Credit/Debit card custom input fields in React native

Question

I want to create inputText to enter credit card number. I can achieve this using 16 different but is there any other way without any npm library I can implement this. Also how can I highlight the cursor

Answer 1

I was in your case when I'm working with OTP input view before.

My idea is you need to create:

• a custom CardNumberInput which is a Touchable (User actually do not input here) so you can easily custom indicator of this input

• and a "invisible" input field which has been focused when user click on your CardNumberInput, the value of this input field will update the UI of the CardNumberInput you have created.

You could check on my code:

renderDigits(idx) {
    let { cardNumber } = this.state;
    let filled = (idx === cardNumber.length);
    let hasValue = (idx <= cardNumber.length)
    let value = cardNumber.charAt(idx - 1);

    return (
        <View style={{
            backgroundColor: (filled) ? 'rgb(119,183,246)' : 'white',
            alignItems: 'center', justifyContent: 'center',
            padding: 5, width: 25
        }}>
            <Text
                style={{
                    fontSize: 20,
                    color: (filled) ? 'rgb(41, 112, 184)' : 'rgb(216, 216, 216)',
                }}
                emphasize
            >
                {(hasValue) ? value + '' : '_'}
            </Text>
        </View>
    );
}

render() {
    let cardNumberView = [];
    for (let idx = 1; idx <= 6; idx += 1) {
        cardNumberView.push(this.renderDigits(idx));
    }

    return (
        <View>
            <Text>Card number</Text>

            <TextInput
                style={{opacity: 0, width: 0, height: 0}}
                ref={(input) => {
                    this.cardNumberInput = input;
                }}
                onChangeText={(text) => {
                    this.setState({otp: text});
                }}
                keyboardType={'number-pad'}
                maxLength={6}
                value={this.state.otp}
            />

            <TouchableOpacity
                onPress={() => {
                    this.cardNumberInput.focus();
                }}
                style={{ width: '100%' }}>
                <View style={{ flexDirection: 'row' }}>
                    {cardNumberField}
                </View>
            </TouchableOpacity>

        </View>
    )
}

That's it. ^^ Hope that help