How can I change the horizontal line color in react-native-otp-inputs in react native? I have used react-native-otp-inputs to get user opt but now I want to change the color of that horizontal line to white you all can see the image to know that which horizontal line I am talking about..

I have tried to change the color by giving style to otpInputs but its not working so what can I do now? NOTE: that styles.inputStyle is for the input not for that horizontal line which was default by react-native-otp-inputs and that horizontal line was black default.

MY opt verification file code

//import liraries
import React, { Component } from 'react';
import { View, Text, StyleSheet, TouchableOpacity, Image } from 'react-native';
import HeaderComponent from '../../Components/HeaderComponent';
import HorizontalLine from '../../Components/HorizontalLine';
import WrapperContainer from '../../Components/WrapperContainer';
import imagePath from '../../constatns/imagePath';
import strings from '../../constatns/lang';
import navigationStrings from '../../constatns/navigationStrings';
import { moderateScaleVertical } from '../../styles/responsiveSize';
import styles from './styles';
import OtpInputs from 'react-native-otp-inputs';
import actions from '../../reudx/actions';

// create a component
const OtpVerification = ({ navigation, route }) => {

    const { data } = route?.params

    console.log("route parms", data)

    const leftCustomView = () => {
        return (
            <TouchableOpacity
                onPress={() => navigation.goBack()}
            >
                <Image source={imagePath.icBack} />
            </TouchableOpacity>
        )
    }

    const handleChange = async (value) => {
        if (value.length >= 6) {
            try {
                let res = await actions.otpVerify({
                    otp: value,
                    user_id: data._id
                })
                console.log("api res",res)
            } catch (error) {
                console.log("error riased in verify api",error)
                alert(error?.message)
            }
        }
    }

    return (
        <WrapperContainer
            containerStyle={{ paddingHorizontal: 0 }}
        >
            <HeaderComponent
                centerText={`${data?.selectedCountry?.dialCode} ${data?.phoneNumber}`}
                containerStyle={{ paddingHorizontal: 8 }}
                leftCustomView={leftCustomView}
                isLeftView={true}
                isRight={false}
            />
            <HorizontalLine />

            <Text style={{ ...styles.descStyle, marginVertical: moderateScaleVertical(24) }}>{strings.WE_HAVE_SENT_YOU_AN_SMS}</Text>
            <Text style={styles.descStyle}>{strings.TO_COMPLETE_YOUR_PHONE_NUMBER}</Text>

            <View style={{ marginHorizontal: moderateScaleVertical(16) }}>
                <OtpInputs                                           // This is the OPT INPUTS..
                    placeholder='*'
                    handleChange={handleChange}
                    numberOfInputs={6}
                    style={{ flexDirection: 'row', justifyContent: 'space-between', marginVertical: moderateScaleVertical(42) }}
                    inputStyles={styles.inputStyle}
                />                                                   // here OPT INPUTS ends..

                <View style={{ marginTop: moderateScaleVertical(52) }}>
                    <Text style={styles.bottomText}>{strings.RESEND_CODE}</Text>
                </View>
            </View>
        </WrapperContainer>
    );
};

export default OtpVerification;

After adding

inputContainerStyles={{
      borderBottomWidth: 2,
      borderBottomColor: 'blue',
    }} 

its lookign like this any way to improve its style or remove the background line?

CodePudding user response：

You can try

<OtpInputs 
            placeholder="*"
            handleChange={handleChange}
            numberOfInputs={6}
            inputContainerStyles={{borderBottomWidth:1,borderBottomColor:'tomato'}}
          />

 

 

CodePudding user response：

you can just add the property as per the library of react-native-otp-inputs.

  <OtpInputs 
    placeholder="Number"
    numberOfInputs={2}
    style={{ flexDirection: 'row', justifyContent: 'space-between' }}
    inputContainerStyles={{
      borderBottomWidth: 2,
      borderBottomColor: 'blue',
    }}

https://snack.expo.dev/@muhammadabdullahrishi/line-color