log in screen

This commit is contained in:
Priyatham Sai chand 2022-04-01 07:06:46 +05:30
parent 5456611c28
commit 951f68377d
No known key found for this signature in database
GPG Key ID: C3DFD0A2F6675222
5 changed files with 259 additions and 107 deletions

5
App.js
View File

@ -56,7 +56,10 @@ const App = () => {
enableScreens(); enableScreens();
return ( return (
<NavigationContainer> <NavigationContainer>
<BottomTab /> <Stack.Navigator initialRouteName="BottomTab">
<Stack.Screen name="BottomTab" component={BottomTab} options={{headerShown: false}} />
<Stack.Screen name="Test" component={HomeScreen} options={{headerShown: false}}/>
</Stack.Navigator>
</NavigationContainer> </NavigationContainer>
); );

View File

@ -1,6 +1,5 @@
<manifest xmlns:android="http://schemas.android.com/apk/res/android" <manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.locaft_mobile"> package="com.locaft_mobile">
<uses-permission android:name="android.permission.INTERNET" /> <uses-permission android:name="android.permission.INTERNET" />
<application <application
@ -9,6 +8,7 @@
android:icon="@mipmap/ic_launcher" android:icon="@mipmap/ic_launcher"
android:roundIcon="@mipmap/ic_launcher_round" android:roundIcon="@mipmap/ic_launcher_round"
android:allowBackup="false" android:allowBackup="false"
android:usesCleartextTraffic="true"
android:theme="@style/AppTheme"> android:theme="@style/AppTheme">
<activity <activity
android:name=".MainActivity" android:name=".MainActivity"

View File

@ -1,13 +1,8 @@
import React from 'react'; import React from 'react';
import { import {StatusBar, StyleSheet, Text, useColorScheme, View} from 'react-native';
StatusBar, import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
StyleSheet, import HomeScreen from './HomeScreen';
Text, import RegisterUserScreen from './RegisterUserScreen';
useColorScheme,
View,
} from 'react-native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import HomeScreen from './HomeScreen'
import {Icon} from 'react-native-elements'; import {Icon} from 'react-native-elements';
const Tab = createBottomTabNavigator(); const Tab = createBottomTabNavigator();
@ -15,63 +10,78 @@ const Tab = createBottomTabNavigator();
function BottomTab() { function BottomTab() {
return ( return (
<Tab.Navigator <Tab.Navigator
screenOptions={{ screenOptions={{
"tabBarShowLabel": false, title: '',
"tabBarStyle": [{ tabBarShowLabel: false,
"position": 'absolute', tabBarStyle: [
"bottom": 10, {
"left": 20, position: 'absolute',
"right": 20, bottom: 10,
"elevation": 0, left: 20,
"backgroundColor" : '#cdcdcd', right: 20,
"borderRadius": 25, elevation: 0,
"height": 50, backgroundColor: '#cdcdcd',
"width": "90%" borderRadius: 25,
height: 50,
}] width: '90%',
}} },
],
> }}>
<Tab.Screen name="Home" component={HomeScreen} options={{ <Tab.Screen
name="Home"
"tabBarIcon": ({focused}) => ( component={HomeScreen}
options={{
<Icon name='home-outline' type='ionicon' size={36} color='#206ba5' ></Icon> tabBarIcon: ({focused}) => (
<Icon
name="home-outline"
) type="ionicon"
size={36}
}}/> color="#206ba5"
<Tab.Screen name="s" component={HomeScreen} options={{ />
),
"tabBarIcon": ({focused}) => ( headerShown:false,
}}
<Icon name='search-outline' type='ionicon' size={36} color='#206ba5' ></Icon> />
<Tab.Screen
name="s"
) component={HomeScreen}
options={{
}}/> tabBarIcon: ({focused}) => (
<Tab.Screen name="r" component={HomeScreen} options={{ <Icon
name="search-outline"
"tabBarIcon": ({focused}) => ( type="ionicon"
size={36}
<Icon name='sliders' type='feather' size={36} color='#206ba5' ></Icon> color="#206ba5"
/>
),
) headerShown:false,
}}
}}/> />
<Tab.Screen name="t" component={HomeScreen} options={{ <Tab.Screen
name="r"
"tabBarIcon": ({focused}) => ( component={HomeScreen}
options={{
<Icon name='person-circle-outline' type='ionicon' size={36} color='#206ba5' ></Icon> tabBarIcon: ({focused}) => (
<Icon name="sliders" type="feather" size={36} color="#206ba5" />
),
) headerShown:false,
}}
}}/> />
<Tab.Screen
name="t"
component={RegisterUserScreen}
options={{
tabBarIcon: ({focused}) => (
<Icon
name="person-circle-outline"
type="ionicon"
size={36}
color="#206ba5"
/>
),
headerShown:false,
}}
/>
</Tab.Navigator> </Tab.Navigator>
); );
} }

View File

@ -1,53 +1,53 @@
import React from 'react'; import React from 'react';
import { import {
StatusBar, StatusBar,
StyleSheet, StyleSheet,
Text, Text,
useColorScheme, useColorScheme,
View, View,
} from 'react-native'; } from 'react-native';
import { Icon } from 'react-native-elements' import { Icon } from 'react-native-elements';
const HomeScreen = () => { const HomeScreen = () => {
return ( return (
<> <>
<StatusBar backgroundColor="#fffff2" barStyle="dark-content" /> <StatusBar backgroundColor="#fffff2" barStyle="dark-content" />
<View <View
style={styles.viewRoot}> style={styles.viewRoot}>
<Text style={styles.heading}>Rental</Text> <Text style={styles.heading}>Rental</Text>
<View style={{ flexDirection: "row", marginTop: "30%", marginLeft: "15%"}}> <View style={{ flexDirection: "row", marginTop: "30%", marginLeft: "15%"}}>
<Icon name='home-outline' style={styles.icon} type='ionicon' size={46} color='#206ba5' ></Icon> <Icon name='home-outline' style={styles.icon} type='ionicon' size={46} color='#206ba5' ></Icon>
<Text style={{color: "#206ba5", fontSize: 25, marginLeft: "-10%"}}>Home</Text> <Text style={{color: "#206ba5", fontSize: 25, marginLeft: "-10%"}}>Home</Text>
</View> </View>
<View style={{ flexDirection: "row", marginTop: "30%", marginLeft: "15%"}}> <View style={{ flexDirection: "row", marginTop: "30%", marginLeft: "15%"}}>
<Icon name='key' type='feather' style={styles.icon} size={46} color='#206ba5'></Icon> <Icon name='key' type='feather' style={styles.icon} size={46} color='#206ba5'></Icon>
<Text style={{color: "#206ba5", fontSize: 25, marginLeft: "-10%"}}>Key</Text> <Text style={{color: "#206ba5", fontSize: 25, marginLeft: "-10%"}}>Key</Text>
</View> </View>
</View> </View>
</> </>
); );
} }
const styles = StyleSheet.create({ const styles = StyleSheet.create({
viewRoot: { viewRoot: {
backgroundColor: '#fffff2', backgroundColor: '#fffff2',
height: '100%', height: '100%',
}, },
heading: { heading: {
color: '#206ba5', color: '#206ba5',
fontSize: 60, fontSize: 60,
textAlign: 'center', textAlign: 'center',
marginTop: '40%', marginTop: '40%',
fontFamily: 'Ubuntu-Bold', fontFamily: 'Ubuntu-Bold',
}, },
icon: { icon: {
alignSelf: "flex-start", alignSelf: "flex-start",
marginLeft: '28%', marginLeft: '28%',
flexDirection: 'row', flexDirection: 'row',
}, },
}); });
export default HomeScreen; export default HomeScreen;

View File

@ -0,0 +1,139 @@
import React, {useState } from 'react';
import {
StatusBar,
StyleSheet,
Text,
useColorScheme,
View,
TouchableHighlight,
TextInput
} from 'react-native';
import { Icon } from 'react-native-elements';
const RegisterUserScreen = () => {
const [username, setUsername] = useState("")
const [orgname, setOrgname] = useState("")
const [token, setToken] = useState("none")
var [ isPress, setIsPress ] = useState(false);
const register = () => {
var data = {
"username": username,
"orgName": orgname
}
fetch("http://192.168.29.141:4000/users", {
method: "POST",
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify(data)
})
.then(function (response) {
return response.json();
})
.then(function (data) {
console.log(data)
setToken(data)
});
}
var touchProps = {
activeOpacity: 1,
underlayColor: 'white',
style: isPress ? styles.btnPress : styles.btnNormal,
onHideUnderlay: () => setIsPress(false),
onShowUnderlay: () => setIsPress(true),
onPress: register,
}
var textInputProps = {
style:styles.input,
onChangeText:setUsername,
value:username,
placeholder:"username",
placeholderTextColor : "#4b4a4a",
}
return (
<>
<StatusBar backgroundColor="#fffff2" barStyle="dark-content" />
<View
style={styles.viewRoot}>
<Text style={styles.heading}>Log In</Text>
<View style={{ flexDirection: "row", marginTop: "20%"}}>
<TextInput {...textInputProps} />
</View>
<View style={{ flexDirection: "row", marginTop: "10%"}}>
<TextInput {...textInputProps} />
</View>
<View style={{ flexDirection: "row", marginTop: "10%", justifyContent: "center"}}>
<TouchableHighlight {...touchProps}>
<Text style={styles.btnText}>Submit</Text>
</TouchableHighlight>
</View>
<Text style={{color: "#206ba5", fontSize: 25 }}>{token.message}</Text>
</View>
</>
);
}
const styles = StyleSheet.create({
viewRoot: {
backgroundColor: '#ffffff',
height: '100%',
justifyContent: 'center',
alignItems: 'center'
},
heading: {
color: '#1C254E',
fontSize: 60,
textAlign: 'center',
fontFamily: 'Ubuntu-Bold',
},
icon: {
alignSelf: "flex-start",
marginLeft: '28%',
flexDirection: 'row',
},
btnNormal: {
borderRadius: 10,
height: 45,
width: 140,
backgroundColor: '#1C254E',
alignItems: 'center',
justifyContent: 'center',
},
btnText: {
textAlign: 'center',
fontSize: 22,
color:'white',
},
btnPress: {
borderRadius: 10,
height: 45,
width: 140,
backgroundColor: '#1C254E',
justifyContent: 'center',
},
input: {
height: 60,
width: 280,
margin: 12,
borderRadius: 15,
padding: 10,
color: "black",
backgroundColor: "#c4c4c4",
},
});
export default RegisterUserScreen;