priyatham
/
locaft_mobile
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
App.js
View File

@ -56,7 +56,10 @@ const App = () => {
enableScreens();
return (
<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>
);

2
android/app/src/main/AndroidManifest.xml
View File

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

142
components/BottomTab.js
View File

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

78
components/HomeScreen.js
View File

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

139
components/RegisterUserScreen.js Normal file
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;