Is there a way to modify the color of the horizontal line within react-native-otp-inputs in the React Native platform?

Is there a way to customize the color of the horizontal line in react-native-otp-inputs for react native? I used react-native-otp-inputs to capture user OTP input, but now I want to change the color of the default black horizontal line to white. You can refer to the image to identify the specific horizontal line I am referring to.

I attempted to change the color by styling otpInputs, but it was unsuccessful. What steps should I take next? Please note that styles.inputStyle is intended for the input, not the default horizontal line which is black.

https://i.sstatic.net/j4g6P.png

Here is my OTP 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;

Upon adding

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

The updated look can be seen in this image. Are there any suggestions for further enhancing the style or removing the background line? https://i.sstatic.net/zNQDb.png

Answer №1

Simply include the specified property from the react-native-otp-inputs library.

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Centered text in <td> with CSS aligned to the right

https://i.sstatic.net/UrB5f.jpg Is there a way to align the 3 input fields so that their right edges are all vertical? I still want the text+Input to be centered within the column but aligned vertically... Using Bootstrap 3.3.7 HTML: <link href="h ...

Populate a dropdown menu using JSON data

I am working with an SQLite table that has columns for id and name. I have created a JSON array of rows from the autocomplete.php page. Now, I am trying to populate a dropdown list in my select element using this JSON data by utilizing jQuery and JavaScrip ...

Getting a JSON response from a JSP page through an AJAX request

I'm encountering an issue with a JSP page that is supposed to send a JSON response when requested through an AJAX call. However, the response is being directed to the error part of the AJAX call instead of the success part. Below is the code in my JS ...

The error message "Uncaught TypeError: Cannot read property '0' of undefined" is triggered when using toDataURL

Recently diving into the world of JavaScript and facing a perplexing error. I must be overlooking some fundamental concept... apologies in advance. Here is the issue at hand. In my HTML file, this snippet of code is present: <div> <script type= ...

What is the best way to ensure my image adjusts its width and height responsively?

How can I make my image responsive to the size of the container, adjusting not just the width but also the height to fit in a container with a max-width of 1300px? I have created a test image with dimensions of 400px height and 1300px width. Take a look a ...

The appearance of an unforeseen * symbol caused a

Having issues with this particular line of code, import * as posenet from '@tensorflow-models/posenet' The error 'Uncaught SyntaxError: Unexpected token *' keeps popping up, I have the latest version of Chrome installed and I've ...

There are times when window.onload doesn't do the trick, but using alert() can make

I recently posted a question related to this, so I apologize for reaching out again. I am struggling to grasp this concept as I am still in the process of learning JavaScript/HTML. Currently, I am loading an SVG into my HTML using SVGInject and implementi ...

Jest: Issue with spyOn test failing despite async function being executed

Having trouble setting up a spyOn for an async function within a submodule. This issue is throwing me off because I've successfully implemented similar tests in the past. Here's an overview of the code: In routes.js: const express = require(&apo ...

An essential component of Chai assertion is the inclusion of "or"

While attempting to iterate through a list of elements, I am looking to verify that the body contains either of two values. However, the current assertion method only allows me to check for one value: expect(cellText).includes(toDateFormat); Is there a wa ...

delete the initial background color assigned to the button

The "ADD TO CART" and "save design" buttons are currently displaying as shown in the image below. I would like to make the "SAVE DESIGN" button look similar to the "ADD TO CART" button, meaning I want to remove the background-color and dot symbol. Code ...

Incorporating Node.JS variables within an HTML document

After building a simple site using Express, I discovered that Node.js variables can also be used with Jade. exports.index = function(req, res){ res.render('index', { title: 'Express' }); }; This is the code for the index file: ext ...

Retrieving Parts of a URL in AngularJS

Is there a way to extract all parts of a URL after "/"? For example: http://myadress.com/#/example/url/here/param1 Result: ['example', 'url', 'here']. Currently, $routeParams only returns an object with route parameters lik ...

JavaScript code for iframe auto resizing is not functioning properly on Firefox browser

I have implemented a script to automatically resize the height and width of an iframe based on its content. <script language="JavaScript"> function autoResize(id){ var newheight; var newwidth; if(document.getElementById){ newh ...

Is there a method to properly implement a button in React that can change the color theme of the entire page, rather than just altering the theme of a single component?

Hello there! I am delving into the world of framer-motion and material-ui as a new user. My current project involves creating a login page where users can toggle between white and black themes using an icon. However, I've encountered a challenge where ...

Performing Jasmine unit testing on a component that relies on data from a service, which itself retrieves data from another service within an Angular 2+ application

Attempting to implement unit testing for a service using httpmock has been challenging. The service in question utilizes a method to make http get calls, but I have encountered difficulties in writing the test cases. saveservice.service.ts -- file const ...

Utilize the findIndex method to search for an element starting at a designated index

Below is a snippet of code that I have: private getNextFakeLinePosition(startPosition: number): number{ return this.models.findIndex(m => m.fakeObject); } This function is designed to return the index of the first element in the array that has ...

How can I conceal the contents of a webpage until the entire page has finished loading before revealing them?

Is there a way to delay displaying my login template until all elements are fully loaded? Currently, when I visit the site, the template appears first followed by fonts and other components. I want to ensure that nothing is shown to the user until the enti ...

Tips for resolving a flickering issue that occurs when switching to an input field with our default value / placeholder plugin

In the realm of web development, numerous plugins cater to the implementation of HTML5's placeholder attribute in older browsers. The plugin we have opted for can be found here. Unlike some other alternatives, this particular plugin, with a few modif ...

How can I enhance the appearance of my custom field using CSS in Advanced Custom Fields?

Utilizing the Wordpress Advanced custom field plugin, I have successfully added a custom field to my site. Within this custom field, I have inserted images and now I am looking to center them on my page using CSS styles such as margin: 0 auto. If you&apo ...

Enhance your website with a dynamic 'click to update' feature using ajax

I'm in the process of developing a straightforward list application where users can easily edit items by clicking on them. Although everything seems to be working fine, I'm encountering an issue with saving changes to the database. For some reaso ...