React Native Login Screen
import React, { Component } from 'react';
import { StyleSheet,Text, View, TextInput, Button ,TouchableOpacity} from 'react-native';
import { Image } from 'react-native';
export default class Bananas extends Component {
render() {
let pic = {
uri: 'http://3.6.64.197/pluginfile.php?file=%2F1%2Ftheme_lambda%2Flogo%2F1584095532%2Fcoco.jpg'
};
return (
<View>
<Image source={pic} style={{width: 140, height: 50,marginTop:100,alignContent:"center",alignItems:"center",alignSelf:"center"}}/>
<View>
<Text style={style.logo}>Login</Text>
</View>
<View>
<TextInput style={style.inputView}
placeholder="Username"
placeholderTextColor="#000">
</TextInput>
</View>
<View>
<TextInput style={style.inputView}
secureTextEntry
placeholder="Password"
placeholderTextColor="#000"
onChangeText={text => this.setState({password:text})}>
</TextInput>
</View>
<View>
<TouchableOpacity style={style.loginBtn}>
<Text style={style.loginText}>LOGIN</Text>
</TouchableOpacity>
</View>
</View>
);
}
}
const style = StyleSheet.create({
logo:{
fontWeight:"bold",
fontSize:20,
alignSelf:"center",
color:"#fb5b5a",
marginTop:50,
},
inputView:{
alignSelf:"center",
width:"80%",
backgroundColor:"#C0C0C0",
borderRadius:5,
height:50,
marginTop:10,
color:"#000",
marginBottom:20,
justifyContent:"center",
padding:10
},
loginBtn:{
width:"80%",
backgroundColor:"#fb5b5a",
borderRadius:5,
height:50,
alignSelf:"center",
alignItems:"center",
justifyContent:"center",
marginTop:10,
marginBottom:10
},
loginText:{
color:"white"
},
inputIcon:{
width:30,
height:30,
marginLeft:15,
justifyContent: 'center'
},
});
