How to change the border color of a specific box when focused

[anujkaushik1512]

Like if i have 4 otp inputs and i focus on any box then only color of that box should be changed. <View style={classes.enterOtpView}> <OtpInputs placeholder='x' onFocus={handleFocus} onBlur={handleBlur} ref={otpRef} placeholderTextColor='lightgray' handleChange={(code) => code.length === 4 ? setDisabled(false) : setDisabled(true)} autofillFromClipboard={true} numberOfInputs={4} style={classes.enterOtpStyle} keyboardType='phone-pad' inputStyles={classes.enterOtpText} />

    </View>

styles ->

     enterOtpView: {
        width: '100%',
        minHeight: responsiveHeight(20),
        justifyContent: 'center',
        alignItems: 'center'

    },

    enterOtpStyle: {
        flexDirection: 'row',
    },

    enterOtpText: {
        fontSize: responsiveFontSize(2.5),
        borderWidth: 2,
        // borderColor: props?.color || 'lightgray',
        borderRadius: 10,
        marginRight: 20,
        textAlign: 'center',
        color: '#052F5F',
        fontWeight: 'bold',
        // paddingBottom: 0,
        paddingTop: 10,
        paddingBottom: 10,
        paddingLeft: 12,
        paddingRight: 12,
    },

[ozdemiremrah]

Hello,

focusStyle only affect on container view. You can use like this.

<OtpInputs inputContainerStyles={{ borderWidth: 1, borderColor: 'black', }} focusStyles={{ borderColor: 'red', }} ...>