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?