How to change the border color of a specific box when focused
Opened this issue · 1 comments
anujkaushik1512 commented
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 commented
Hello,
focusStyle only affect on container view. You can use like this.
<OtpInputs inputContainerStyles={{ borderWidth: 1, borderColor: 'black', }} focusStyles={{ borderColor: 'red', }} ...>