React Native Elements Line underneath FormInput Component

4
votes

I'm using the FormInput element from React Native Elements, which seems to produce a line underneath each FormInput component. One is more faint than the other.

enter image description here

Form looks as follows

<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='[email protected]'
                            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>

Here are 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've tried to add a borderWidth property of 0 to the FormInput but this doesn't seem to work.

I've also tried to set a borderColor to transparent which didn't work either.

I've also noticed, if I remove the FormValidationMessage component, both line become more apparent.

Is there a workaround for this?

5
javascriptcssreactjsreact-native

5 Answers

14
votes

I was facing the same issue and fixed it by adding borderBottomWidth:0 as belows: 

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

Solution is add a property of input ,

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

you can achieve that by changing the color of the border by passing "transparent" to borderColor as follows.

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

Try to put Each <FormInput/> inside a <View>. Then style that view accordingly. Those line is a part of <FormInput/> component so styling with InputStyle props won't do the job.

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

I did this for an Input element. You might get the same effect for a FormInput. Anyway, it got rid of the bottom border. You use the inputContainerStyle.

<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'
    }}
/>