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/logo.webp")} />
<StatusBar style="auto" />
<View style={styles.inputView}>
<TextInput
style={styles.TextInput}
placeholder="Username"
/>
</View>
<View style={styles.inputView}>
<TextInput
style={styles.TextInput}
placeholder="Password."
/>
</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,
padding: 40,
backgroundColor: "white",
alignItems: "center",
justifyContent: "center",
},
image: {
marginTop:40,
marginBottom: 40,
width: 100,
height: 100,
},
inputView: {
borderWidth:2,
borderRadius: 20,
width: "70%",
height: 40,
marginBottom: 20,
alignItems: "center",
},
TextInput: {
height: 40,
flex: 1,
padding: 10,
marginLeft: 20,
},
forgot_button: {
height: 30,
marginBottom: 20,
},
loginBtn: {
width: "40%",
borderRadius: 20,
height: 40,
alignItems: "center",
justifyContent: "center",
marginTop: 15,
borderWidth:2,
},
});
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