React Native Button Not Visible Android - react-native

Question

Button is not visible in the android.
Render Method:
render() {
return (
<View style = { styles.container }>
<View style = { styles.form }>
<Image source={require('../../assets/icon.png')} style = {styles.loginIcon}/>
<View style = { styles.form }>
<TextInput style={ styles.input } onChangeText={(username) => this.setState({username})} placeholder="Username"/>
<TextInput style={ styles.input } onChangeText={(password) => this.setState({password})} placeholder="Password"/>
<View style={ styles.buttonView }>
<Button title="Login" color="#197DC1" style={ styles.primaryBttn } onPress={this.validateCredentialsAndLogin.bind(this)}/>
</View>
<Text>
Forgot Password?
</Text>
</View>
</View>
</View>
);
}
CSS:
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#ECF0F1'//#F5FCFF
},
form :{
flex:1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'white',
flexDirection: 'column',
marginTop: '25%',
marginBottom:'25%',
paddingTop:'10%',
width:'90%',
height:'40%'
},
input:{
height:40,
marginBottom:10,
borderBottomColor: 'black',
width:'100%'
},
loginIcon:{
width:80,
height:80,
},
buttonView:{
flex:1,
width:'100%',
height:50
}
Even though there is flex for parent and height and color for button still not able to view button.
PS: I am new to react-native correct me If I am wrong with the styles or anything else.

Answer 1

Looks like issue is with your styling. You can see your button simply replacing your form style with following:
form:{
flex:1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'white',
flexDirection: 'column',
width:'90%',
height:'40%'
},
You should first learn how to style using flexbox(link).