import * as React from 'react';
import { Button, View, Text,StyleSheet, Image, StatusBar, TextInput} from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import {TouchableOpacity} from "react-native";
function LoginScreen({navigation}) {
return (
<View style={styles.container}>
<Image style={styles.image} source={require("./assets/log2.png")} />
<StatusBar style="auto" />
<View style={styles.inputView}>
<TextInput
style={styles.TextInput}
placeholder="Username"
placeholderTextColor="white"
/>
</View>
<View style={styles.inputView}>
<TextInput
style={styles.TextInput}
placeholder="Password."
placeholderTextColor="white"
/>
</View>
<TouchableOpacity>
<Text style={styles.forgot_button}>Forgot Password?</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.loginBtn}
onPress={() => navigation.navigate('Home')}>
<Text style={styles.loginText}>LOGIN
</Text>
</TouchableOpacity>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#151B29",
alignItems: "center",
justifyContent: "center",
},
image: {
marginBottom: 40,
width: 100,
height: 100,
},
inputView: {
backgroundColor: "#00194F",
borderRadius: 10,
width: "70%",
height: 45,
marginBottom: 20,
alignItems: "center",
},
TextInput: {
height: 50,
flex: 1,
padding: 10,
marginLeft: 20,
backgroundColor:"#00194F",
},
forgot_button: {
height: 30,
marginBottom: 20,
color:'white'
},
loginBtn: {
width: "80%",
borderRadius: 10,
height: 50,
alignItems: "center",
justifyContent: "center",
marginTop: 40,
backgroundColor: "#0044D6",
},
});
function HomeScreen({ navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
</View>
);
}
const Stack = createNativeStackNavigator();
function App() {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Login">
<Stack.Screen name="Login" component={LoginScreen} />
<Stack.Screen name="Home" component={HomeScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
export default App;
NEW ENTRIES