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.

<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', }} ...>