React Native formInput Component with Underline Decoration

Utilizing the FormInput element in React Native Elements, I have observed a line underneath each FormInput component. Interestingly, one line appears fainter than the other.

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

This is how the form looks:

<View style={styles.container}>
                <Image 
                    style={styles.image}
                    source={app.imageBackground}
                />
                <View style={{ alignItems: 'center' }}>
                    <Image 
                        style={styles.logo}
                        source={app.logo}
                    />
                </View>

                <View  style={styles.cardWrapper}>
                    <View style={styles.card}>
                        <FormInput 
                            inputStyle={styles.textInput}
                            placeholder='<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b0c5c3d5c2f0d5ddd1d9dc9ed3dfdd">[email protected]</a>'
                            autoCapitalize='none'
                            autoCorrect={false}
                            underlineColorAndroid='transparent'
                            placeholderTextColor='white'
                            onChangeText={this.onEmailChange.bind(this)} 
                        />
                        <FormInput 
                            secureTextEntry={true}
                            autoCapitalize='none'
                            placeholder='password'
                            autoCorrect={false}
                            inputStyle={styles.textInput}
                            underlineColorAndroid='transparent'
                            placeholderTextColor = 'white'
                            onChangeText={this.onPasswordChange.bind(this)} 
                        />
                        <FormValidationMessage>{this.renderError()}</FormValidationMessage>
                        {this.renderButton()}

                        <Text style={{color:'white', textAlign:'center'}}>New to Foodspecials?<Text style={{fontWeight:'900'}} onPress={() => this.props.navigation.navigate('SignUp')}> Sign up</Text></Text>
                    </View>
                </View>

            </View>

Take a look at my styles:

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
    },
    cardWrapper: {
        padding: 20
    },
    card: {

    },
    logo: {
        justifyContent: 'center',
    },
    image: {
        backgroundColor: '#ccc',
        flex: 1,
        position: 'absolute',
        width: '100%',
        height: '100%',
        justifyContent: 'center',
    },
    textInput: {
        height: 50,
        fontSize: 20,
        borderRadius: 50,
        backgroundColor: 'rgba(255, 255, 255, 0.3)',
        color: 'white',
        width: '100%',
        paddingLeft: 20,
        marginTop: 10,
        marginBottom: 10
    },
    button: {
        borderWidth: 2,
        borderColor: 'white',
        marginTop: 10,
        marginBottom: 10
    }
})

I attempted setting a borderWidth of 0 to the FormInput without success.

Additionally, trying to set a transparent borderColor did not yield the desired result.

Upon removing the FormValidationMessage component, both lines become more prominent.

Is there a workaround for this issue?

Answer №1

Encountering a similar problem, I managed to resolve it by incorporating the following line of code:

<Input inputContainerStyle={{borderBottomWidth:0}} />

Answer №2

One way to solve this issue is by including an additional property in the input component:

<Input inputContainerStyle={{borderBottomWidth:0}} />

Answer №3

To change the border color to transparent, you can do so by setting "transparent" as the value for borderColor.

<Input
    inputContainerStyle={{
        borderWidth: 0,
        borderColor: "transparent"
    }}
    placeholder="Test placeholder...."
/>

Answer №4

To enhance the appearance, consider enclosing each <FormInput/> within a <View> and applying unique styling to each view. Remember that the style defined inside the <FormInput/> component will not apply when using InputStyle props.

<View style={styles.input}>
    <Input placeholder="Username" returnKeyType="next" />
</View>
<View style={styles.input}>
    <Input placeholder="Password" returnKeyType="go" secureTextEntry />
</View>

Answer №5

I recently implemented this solution for an Input field and found that it also works perfectly for a FormInput. By using the inputContainerStyle property, I was able to remove the bottom border effortlessly.

<Input
    placeholder="Username"
    leftIcon={<FontAwesome name="user-o" size={24} />}
    onChangeText={(username) => this.setState({username})}
    value={this.state.username}
    containerStyle={styles.formInput}
    inputContainerStyle={{
        borderRadius:10,
        backgroundColor:'white',
        borderBottomColor:'white'
    }}
/>

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

Encountered an issue retrieving audio during recording with Recorder.js

I've come across a scenario where I'm utilizing the Recorder.js Demo for recording audio. Interestingly, it works perfectly on Linux but encounters an issue when used on Windows. A pop-up alert stating "Error getting audio" shows up. Here's ...

Tips for effectively transmitting and managing a JSON object within an ASP.NET MVC controller

I am currently working on a project using ASP.NET MVC 4 and I'm facing an issue with sending a JSON object to a controller that is supposed to accept it. Here is the snippet of javascript and jQuery code I am using: var jsonObject = { "PlantShip ...

The JavaScript function will only run after the user clicks the button twice

I attempted to create a button that toggles the visibility of a div element. Initially, I added the "onclick" event to the button and wrote this function: function showElement() { var element = document.querySelector('.blocks-fnd-div'); if ...

Storing user data on the client side of a website is most effectively accomplished by

I am looking to incorporate the following features: I would like to personalize the user experience by greeting them with their login name on the webpage (e.g. 'Hello, Fred!'). I also want to display or hide certain content based on the user&apo ...

Creating a time-limited personal link with Django Rest Framework and React

I have a frontend application built with React Framework that I want to provide access to via a time-limited personal link, without the need for additional authentication functions. With approximately 1-2 new users per day, my proposed implementation is as ...

How to convert deeply nested object structures containing arrays in JavaScript

Despite the less-than-desirable name of this inquiry, the question is fairly straightforward. I have a particular object: let test = { date1: [ { time: 1, value: 5, }, { time: 2, value: 6, }, ], date2: [ { ...

Framer motion layout animation fails to account for page scrolling during transitions in NextJs routes

Currently, I am working on a fascinating NextJS project that showcases a series of interactive blocks. As the user navigates through the app, these blocks dynamically adjust their size and position on the screen. To achieve this effect, I'm leveragin ...

What is the best way to utilize URL parameters to dynamically update a component's state within a class component

I am currently working on a React component that is making calls to two different API URLs, and the fetch operations are functioning as expected. However, I would like to utilize the URL handle structure, which looks like localhost://site/coins/[handle], a ...

Experiencing a surge in requests with LazyLoad enabled?

My website contains numerous images, most of which are displayed within a slider using SlickSlider.js with Lazyload. Although the page load time is 3.87 seconds, there are over 134 requests being made for these images. Upon closer inspection, I noticed th ...

Is it necessary to include @types/ before each dependency in react native?

I am interested in converting my current react native application to use typescript. The instructions mention uninstalling existing dependencies and adding new ones, like so: yarn add --dev @types/jest @types/react @types/react-native @types/react-test- ...

The process of JavaScript for detecting and extracting text from

After much searching, I stumbled upon this intriguing piece of JavaScript code at this location. Curiously, I was able to remove a few eggs using the following script: var eggCoordinates = []; for (var i = 0; i < 5; i++) { eggCoordinates.push(new E ...

Troubleshooting: Issue with Nested jQuery UI Accordion Implementation

I am having issues with the menu collapsing incorrectly. While the top level functions properly, the sub menus do not collapse as expected. I am unsure about the correct approach to fix this problem. Can anyone provide guidance? jquery $(function() { ...

The element fails to appear on screen when using Firefox

Check out this site using IE or Chrome and pay attention to the yellow block: Then, try opening the same page in Firefox and watch as the block mysteriously vanishes. Does anyone have any idea why this is happening? Did I make a mistake somewhere? ...

Creating an associative array in javascript: A step-by-step guide

I require an array to be structured in the following manner: {"3": {"label":"All i want for christmas", "song":"Alliw_1405399165.mp3", "name":"All i want for christmas"}, "4": {"label":"Call your girlfriend robyn clip", "song":"Gang ...

Tips for creating a responsive iframe without relying on aspect ratio assumptions

Is there a way to create a responsive iframe without relying on a fixed aspect ratio? The width and height of the content are unknown until rendering. Keep in mind, using Javascript is an option. For instance: <div id="iframe-container"> <i ...

The absence of a datepicker in Bootstrap has become glaringly obvious

My form includes a single date input using <input type='date' class='form-control'>. When utilizing the form-control feature from Bootstrap 5, the default white color is applied to the date picker, matching the rest of the form. ...

ExpressJS route handler encounters an error due to undefined 'this' reference

teamList.js class teamListCtrl { constructor() { this.data = "example"; } fetch(response, request) { console.log("DISPLAY ! ", JSON.stringify(this)); } } module.exports = new teamListCtrl(); //singleton router.js var express = require( ...

What is the best way to begin IMA HTML5 SDK ads with sound off?

One challenge I encountered was getting autoplay video to work on iOS 10 using HTML5. To achieve this, I utilized the following code: <video autoplay loop muted playsinline controls> <source src="http://distribution.bbb3d.renderfarming.net/vi ...

Exploring the intricacies of Implementing Chromecast Networks, with a curious nod towards potentially mirroring it with

In my current project, I am aiming to replicate the functionality of a Chromecast on a Roku device. To achieve this, I need to first discover the Roku using UDP and then send an HTTP POST request to control it. During a recent developer fest where I learn ...

Ways to solely cache spa.html using networkfirst or ways to set up offline mode with server-side rendering (SSR)

I am facing an issue with my application that has server-side rendering. It seems like the page always displays correctly when there is an internet connection. However, I am unsure how to make Workbox serve spa.html only when there is no network available. ...