log in screen

App.js

@@ -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>
 
   );

android/app/src/main/AndroidManifest.xml

@@ -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"

components/BottomTab.js

@@ -1,13 +1,8 @@
 import React from 'react';
-import {
+import {StatusBar, StyleSheet, Text, useColorScheme, View} from 'react-native';
-  StatusBar,
-  StyleSheet,
-  Text,
-  useColorScheme,
-  View,
-} from 'react-native';
 import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
-import HomeScreen from './HomeScreen'
+import HomeScreen from './HomeScreen';
+import RegisterUserScreen from './RegisterUserScreen';
 import {Icon} from 'react-native-elements';
 
 const Tab = createBottomTabNavigator();
@@ -16,62 +11,77 @@ function BottomTab() {
   return (
     <Tab.Navigator
       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={{
+          tabBarIcon: ({focused}) => (
+            <Icon
+              name="home-outline"
+              type="ionicon"
+              size={36}
+              color="#206ba5"
+            />
+          ),
+	  headerShown:false,
         }}
-
+      />
-	  >
+      <Tab.Screen
-      <Tab.Screen name="Home" component={HomeScreen} options={{
+        name="s"
-
+        component={HomeScreen}
-	      "tabBarIcon": ({focused}) => (
+        options={{
-
+          tabBarIcon: ({focused}) => (
-          <Icon name='home-outline'  type='ionicon' size={36} color='#206ba5' ></Icon>
+            <Icon
-
+              name="search-outline"
-
+              type="ionicon"
-	      )
+              size={36}
-
+              color="#206ba5"
-      }}/>
+            />
-      <Tab.Screen name="s" component={HomeScreen} options={{
+          ),
-
+	  headerShown:false,
-	      "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" />
-      <Tab.Screen name="r" component={HomeScreen} options={{
+          ),
-
+	  headerShown:false,
-	      "tabBarIcon": ({focused}) => (
+        }}
-
+      />
-          <Icon name='sliders'  type='feather' size={36} color='#206ba5' ></Icon>
+      <Tab.Screen
-
+        name="t"
-
+        component={RegisterUserScreen}
-	      )
+        options={{
-
+          tabBarIcon: ({focused}) => (
-      }}/>
+            <Icon
-      <Tab.Screen name="t" component={HomeScreen} options={{
+              name="person-circle-outline"
-
+              type="ionicon"
-	      "tabBarIcon": ({focused}) => (
+              size={36}
-
+              color="#206ba5"
-          <Icon name='person-circle-outline'  type='ionicon' size={36} color='#206ba5' ></Icon>
+            />
-
+          ),
-
+	  headerShown:false,
-	      )
+        }}
-
+      />
-      }}/>
     </Tab.Navigator>
   );
 }

components/HomeScreen.js

@@ -6,7 +6,7 @@ import {
 	useColorScheme,
 	View,
 } from 'react-native';
-import { Icon } from 'react-native-elements'
+import { Icon } from 'react-native-elements';
 
 const HomeScreen = () => {
 	return (

components/RegisterUserScreen.js

@@ -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;