Podemos registrarnos en la base de datos

App.js

@@ -1,27 +1,16 @@
-import { StatusBar } from 'expo-status-bar';
-import React from 'react';
-import { StyleSheet, Text, View } from 'react-native';
-
-
-export default function App() {
-  return (
-    <View style={styles.container}>
-      <Text>"Hello"</Text>
-      <StatusBar style="auto" />
-    </View>
-  );
-}
+import React, { Component } from 'react';
+import firebase from 'firebase'
+import { NavigationContainer } from '@react-navigation/native';
+import { createStackNavigator } from '@react-navigation/stack';
 
+import RegisterScreen from './screens/RegisterScreen';
+import LoginScreen from './screens/LoginScreen';
+import { firebaseConfig } from './config/firebaseConfig';
+import { Text, View } from 'react-native';
+import { styles } from './config/styles';
 
-// Import the functions you need from the SDKs you need
-// import { initializeApp } from "firebase/app";
-import firebase  from 'firebase';
-// expo install firebase
-// TODO: Add SDKs for Firebase products that you want to use
-// https://firebase.google.com/docs/web/setup#available-libraries
 
-// Your web app's Firebase configuration
-const firebaseConfig = {
+/*const seConfig = {
   apiKey: "AIzaSyDW-ABAQ3r_WR7C7WC_3VprL77NcAoitJI",
   authDomain: "freehand-d8ecd.firebaseapp.com",
   projectId: "freehand-d8ecd",
@@ -29,16 +18,67 @@ const firebaseConfig = {
   messagingSenderId: "48371388186",
   appId: "1:48371388186:web:9a5a4bf1218e17ac6326a3"
 };
-
+*/
 // Initialize Firebase
-const app = firebase.initializeApp(firebaseConfig);
+//const app = firebase.initializeApp(seConfig);
+if (firebase.apps.length === 0) {
+  firebase.initializeApp(firebaseConfig)
+}
+
+const Stack = createStackNavigator();
+
+export default class App extends Component {
+  constructor(props){
+    super(props);
+    this.state = {
+      loaded: false,
+    }
+  }
+  
+  componentDidMount(){
+    firebase.auth().onAuthStateChanged((user) => {
+      if (!user){
+        this.setState({
+          loggedIn: false,
+          loaded: true,
+        })
+      }
+      else{
+        this.setState({
+          loggedIn: true,
+          loaded: true,
+        })
+      }
+    })
+  }
 
+  render() {
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#fff',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-});
+    const { loggedIn, loaded } = this.state
+
+    if(!loaded){
+      return(
+        <View style={styles.regcontainer}>
+          <Text>Hopper</Text>
+        </View>
+      );
+    }
+
+    if(!loggedIn){
+      return (
+        <NavigationContainer>
+          <Stack.Navigator>
+            <Stack.Screen name={" "} options={{headerShown: false}} component={LoginScreen}/>
+            <Stack.Screen name={"Register"} options={{headerTransparent: true, headerTitle: " "}} component={RegisterScreen}/>
+          </Stack.Navigator>
+        </NavigationContainer>
+      );
+    }
+
+    return(
+      <View style={styles.regcontainer}>
+        <Text>Cheese</Text>
+      </View>
+    );
+  }
+}

components/CustomButton.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Text, TouchableOpacity } from 'react-native';
+
+import { styles } from '../config/styles';
+import colors from '../config/colors';
+
+function CustomButton( {title, onPress, color = "skyblue", marginTop} ) {
+    return (
+        <TouchableOpacity style={[styles.regbutton, { backgroundColor: colors[color] }, { marginTop: marginTop }]} onPress={onPress}>
+            <Text style={styles.regbuttontext}>{title}</Text>
+        </TouchableOpacity>
+    );
+}
+
+export default CustomButton;

config/colors.js

@@ -0,0 +1,5 @@
+export default {
+        softpink: '#FFF0F5',
+        skyblue: '#87CEFA',
+        white: '#FFFFFF'
+}

config/firebaseConfig.js

@@ -0,0 +1,8 @@
+export const firebaseConfig = {
+  apiKey: "AIzaSyDW-ABAQ3r_WR7C7WC_3VprL77NcAoitJI",
+  authDomain: "freehand-d8ecd.firebaseapp.com",
+  projectId: "freehand-d8ecd",
+  storageBucket: "freehand-d8ecd.appspot.com",
+  messagingSenderId: "48371388186",
+  appId: "1:48371388186:web:9a5a4bf1218e17ac6326a3"
+};

config/styles.js

@@ -0,0 +1,61 @@
+import { StyleSheet } from "react-native"
+
+import colors from "./colors"
+
+export const styles = StyleSheet.create({
+    stdcontainer: {
+        flex: 1,
+        justifyContent: 'flex-start',
+        alignItems: 'center'
+    },
+
+    regcontainer: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+
+    regbutton:{
+        backgroundColor: colors.skyblue,
+        justifyContent: 'center',
+        alignItems: 'center',
+        width: '50%',
+        height: '5%',
+    },
+
+    regtxtfield: {
+        backgroundColor: colors.softpink,
+        width: '75%',
+        height: '5%',
+        borderRadius: 25,
+        paddingLeft: 20,
+        paddingRight: 20,
+        margin: 20,
+    },
+
+    regbuttontext: {
+        color: colors.white,
+        fontSize: 17
+    },
+
+    logo: {
+        width: "25%",
+        height: "25%",
+        top: 50,
+        marginBottom: 200
+    },
+
+    loginbutton: {
+        position: 'absolute',
+        bottom: 50,
+    },
+
+    picker: {
+        width: '50%',
+    },
+
+    qsttxt: {
+        marginTop: 20,
+        fontWeight: "bold"
+    }
+})

package-lock.json

@@ -5,6 +5,9 @@
   "packages": {
     "": {
       "dependencies": {
+        "@react-native-picker/picker": "^2.1.0",
+        "@react-navigation/native": "^6.0.4",
+        "@react-navigation/stack": "^6.0.9",
         "expo": "~42.0.1",
         "expo-status-bar": "~1.0.4",
         "firebase": "8.2.3",
@@ -1727,6 +1730,18 @@
         "node": ">=0.1.95"
       }
     },
+    "node_modules/@egjs/hammerjs": {
+      "version": "2.0.17",
+      "resolved": "https://registry.npmjs.org/@egjs/hammerjs/-/hammerjs-2.0.17.tgz",
+      "integrity": "sha512-XQsZgjm2EcVUiZQf11UBJQfmZeEmOW8DpI1gsFeln6w0ae0ii4dMQEQ0kjl6DspdWX1aGY1/loyXnP0JS06e/A==",
+      "peer": true,
+      "dependencies": {
+        "@types/hammerjs": "^2.0.36"
+      },
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
     "node_modules/@expo/config": {
       "version": "5.0.9",
       "resolved": "https://registry.npmjs.org/@expo/config/-/config-5.0.9.tgz",
@@ -3180,6 +3195,103 @@
       "resolved": "https://registry.npmjs.org/@react-native-community/cli-types/-/cli-types-4.10.1.tgz",
       "integrity": "sha512-ael2f1onoPF3vF7YqHGWy7NnafzGu+yp88BbFbP0ydoCP2xGSUzmZVw0zakPTC040Id+JQ9WeFczujMkDy6jYQ=="
     },
+    "node_modules/@react-native-picker/picker": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@react-native-picker/picker/-/picker-2.1.0.tgz",
+      "integrity": "sha512-iJ/QaDrBMBaW6cFuQyR3DXzcn2h7c5O7mGgmNLCBQHTTtLNBZR+Sxogy6YleFPeToNdysG5mTTkXqBmlWHMQqg==",
+      "peerDependencies": {
+        "react": "16 || 17",
+        "react-native": ">=0.57"
+      }
+    },
+    "node_modules/@react-navigation/native": {
+      "version": "6.0.4",
+      "resolved": "https://registry.npmjs.org/@react-navigation/native/-/native-6.0.4.tgz",
+      "integrity": "sha512-497dGGDIZ8hDCPGj6GXZvLGHk6NvZk5k4r1cjwgqcXwutK5fS7sgD0dZP52NTQC3GvLe8PZNv6AEdMIqFrZK6A==",
+      "dependencies": {
+        "@react-navigation/core": "^6.0.2",
+        "escape-string-regexp": "^4.0.0",
+        "nanoid": "^3.1.23"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*"
+      }
+    },
+    "node_modules/@react-navigation/native/node_modules/@react-navigation/core": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/@react-navigation/core/-/core-6.0.2.tgz",
+      "integrity": "sha512-Omsb670qmNfO0KGiRrOE+KXpCYQ6jXxE5uCPnj5srW31s6YDGiFl/M5sRcMyBdDXLXp5HjkQTJpU9ilmjKtL5g==",
+      "dependencies": {
+        "@react-navigation/routers": "^6.0.1",
+        "escape-string-regexp": "^4.0.0",
+        "nanoid": "^3.1.23",
+        "query-string": "^7.0.0",
+        "react-is": "^16.13.0"
+      },
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
+    "node_modules/@react-navigation/native/node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@react-navigation/native/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
+    "node_modules/@react-navigation/routers": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/@react-navigation/routers/-/routers-6.0.1.tgz",
+      "integrity": "sha512-5ctB49rmtTRQuTSBVgqMsEzBUjPP2ByUzBjNivA7jmvk+PDCl4oZsiR8KAm/twhxe215GYThfi2vUWXKAg6EEQ==",
+      "dependencies": {
+        "nanoid": "^3.1.23"
+      }
+    },
+    "node_modules/@react-navigation/stack": {
+      "version": "6.0.9",
+      "resolved": "https://registry.npmjs.org/@react-navigation/stack/-/stack-6.0.9.tgz",
+      "integrity": "sha512-LV9MlxqOH6+wgU7LxhaTRSY+WTuzNa2NnOCji9nyAA4Xohp9tpuLhYJRYdNRWXBcfseBqz1o4L0LAxRMv+CXYQ==",
+      "dependencies": {
+        "@react-navigation/elements": "^1.1.2",
+        "color": "^3.1.3",
+        "warn-once": "^0.1.0"
+      },
+      "peerDependencies": {
+        "@react-navigation/native": "^6.0.0",
+        "react": "*",
+        "react-native": "*",
+        "react-native-gesture-handler": ">= 1.0.0",
+        "react-native-safe-area-context": ">= 3.0.0",
+        "react-native-screens": ">= 3.0.0"
+      }
+    },
+    "node_modules/@react-navigation/stack/node_modules/@react-navigation/elements": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@react-navigation/elements/-/elements-1.1.2.tgz",
+      "integrity": "sha512-PbPCleC1HpUlXtuP0DFNCNTEhRLd6lmB0KxY0SGRGqCemS3HpG/PajEQ1LDe7S51M03a1tDby1MfKTkNanUXAg==",
+      "peerDependencies": {
+        "@react-navigation/native": "^6.0.0",
+        "react": "*",
+        "react-native": "*",
+        "react-native-safe-area-context": ">= 3.0.0"
+      }
+    },
+    "node_modules/@types/hammerjs": {
+      "version": "2.0.40",
+      "resolved": "https://registry.npmjs.org/@types/hammerjs/-/hammerjs-2.0.40.tgz",
+      "integrity": "sha512-VbjwR1fhsn2h2KXAY4oy1fm7dCxaKy0D+deTb8Ilc3Eo3rc5+5eA4rfYmZaHgNJKxVyI0f6WIXzO2zLkVmQPHA==",
+      "peer": true
+    },
     "node_modules/@types/istanbul-lib-coverage": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.3.tgz",
@@ -4257,6 +4369,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/color": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/color/-/color-3.2.1.tgz",
+      "integrity": "sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA==",
+      "dependencies": {
+        "color-convert": "^1.9.3",
+        "color-string": "^1.6.0"
+      }
+    },
     "node_modules/color-convert": {
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@@ -4270,6 +4391,15 @@
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
       "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
     },
+    "node_modules/color-string": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.6.0.tgz",
+      "integrity": "sha512-c/hGS+kRWJutUBEngKKmk4iH3sD59MBkoxVapS/0wgpCz2u7XsNloxknyvBhzwEs1IbV36D9PwqLPJ2DTu3vMA==",
+      "dependencies": {
+        "color-name": "^1.0.0",
+        "simple-swizzle": "^0.2.2"
+      }
+    },
     "node_modules/color-support": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/color-support/-/color-support-1.1.3.tgz",
@@ -4469,6 +4599,24 @@
         "object-assign": "^4.1.1"
       }
     },
+    "node_modules/cross-fetch": {
+      "version": "3.1.4",
+      "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.1.4.tgz",
+      "integrity": "sha512-1eAtFWdIubi6T4XPy6ei9iUFoKpUkIF971QLN8lIvvvwueI65+Nw5haMNKUwfJxabqlIIDODJKGrQ66gxC0PbQ==",
+      "peer": true,
+      "dependencies": {
+        "node-fetch": "2.6.1"
+      }
+    },
+    "node_modules/cross-fetch/node_modules/node-fetch": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.1.tgz",
+      "integrity": "sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw==",
+      "peer": true,
+      "engines": {
+        "node": "4.x || >=6.0.0"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "6.0.5",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",
@@ -5597,6 +5745,14 @@
         "node": ">=8"
       }
     },
+    "node_modules/filter-obj": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/filter-obj/-/filter-obj-1.1.0.tgz",
+      "integrity": "sha1-mzERErxsYSehbgFsbF1/GeCAXFs=",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/finalhandler": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.2.tgz",
@@ -5992,6 +6148,21 @@
         "node": ">= 8"
       }
     },
+    "node_modules/hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "peer": true,
+      "dependencies": {
+        "react-is": "^16.7.0"
+      }
+    },
+    "node_modules/hoist-non-react-statics/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+      "peer": true
+    },
     "node_modules/http-errors": {
       "version": "1.7.3",
       "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.7.3.tgz",
@@ -8126,6 +8297,17 @@
       "resolved": "https://registry.npmjs.org/nanocolors/-/nanocolors-0.1.12.tgz",
       "integrity": "sha512-2nMHqg1x5PU+unxX7PGY7AuYxl2qDx7PSrTRjizr8sxdd3l/3hBuWWaki62qmtYm2U5i4Z5E7GbjlyDFhs9/EQ=="
     },
+    "node_modules/nanoid": {
+      "version": "3.1.28",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.28.tgz",
+      "integrity": "sha512-gSu9VZ2HtmoKYe/lmyPFES5nknFrHa+/DT9muUFWFMi6Jh9E1I7bkvlQ8xxf1Kos9pi9o8lBnIOkatMhKX/YUw==",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
     "node_modules/nanomatch": {
       "version": "1.2.13",
       "resolved": "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.13.tgz",
@@ -8904,6 +9086,23 @@
         "once": "^1.3.1"
       }
     },
+    "node_modules/query-string": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/query-string/-/query-string-7.0.1.tgz",
+      "integrity": "sha512-uIw3iRvHnk9to1blJCG3BTc+Ro56CBowJXKmNNAm3RulvPBzWLRqKSiiDk+IplJhsydwtuNMHi8UGQFcCLVfkA==",
+      "dependencies": {
+        "decode-uri-component": "^0.2.0",
+        "filter-obj": "^1.1.0",
+        "split-on-first": "^1.0.0",
+        "strict-uri-encode": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/querystringify": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz",
@@ -9021,6 +9220,57 @@
         "react": "16.13.1"
       }
     },
+    "node_modules/react-native-gesture-handler": {
+      "version": "1.10.3",
+      "resolved": "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-1.10.3.tgz",
+      "integrity": "sha512-cBGMi1IEsIVMgoox4RvMx7V2r6bNKw0uR1Mu1o7NbuHS6BRSVLq0dP34l2ecnPlC+jpWd3le6Yg1nrdCjby2Mw==",
+      "peer": true,
+      "dependencies": {
+        "@egjs/hammerjs": "^2.0.17",
+        "fbjs": "^3.0.0",
+        "hoist-non-react-statics": "^3.3.0",
+        "invariant": "^2.2.4",
+        "prop-types": "^15.7.2"
+      }
+    },
+    "node_modules/react-native-gesture-handler/node_modules/fbjs": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-3.0.0.tgz",
+      "integrity": "sha512-dJd4PiDOFuhe7vk4F80Mba83Vr2QuK86FoxtgPmzBqEJahncp+13YCmfoa53KHCo6OnlXLG7eeMWPfB5CrpVKg==",
+      "peer": true,
+      "dependencies": {
+        "cross-fetch": "^3.0.4",
+        "fbjs-css-vars": "^1.0.0",
+        "loose-envify": "^1.0.0",
+        "object-assign": "^4.1.0",
+        "promise": "^7.1.1",
+        "setimmediate": "^1.0.5",
+        "ua-parser-js": "^0.7.18"
+      }
+    },
+    "node_modules/react-native-safe-area-context": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/react-native-safe-area-context/-/react-native-safe-area-context-3.3.2.tgz",
+      "integrity": "sha512-yOwiiPJ1rk+/nfK13eafbpW6sKW0jOnsRem2C1LPJjM3tfTof6hlvV5eWHATye3XOpu2cJ7N+HdkUvUDGwFD2Q==",
+      "peer": true,
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*"
+      }
+    },
+    "node_modules/react-native-screens": {
+      "version": "3.8.0",
+      "resolved": "https://registry.npmjs.org/react-native-screens/-/react-native-screens-3.8.0.tgz",
+      "integrity": "sha512-lHrnB/elAoMJKv8O12U6BLgeup4lB6ZKJHEOVuG/D72nv/OE9wUusbou6YCB5tp3YbaSpHflPnkFmHA/vCejpw==",
+      "peer": true,
+      "dependencies": {
+        "warn-once": "^0.1.0"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*"
+      }
+    },
     "node_modules/react-native-web": {
       "version": "0.13.18",
       "resolved": "https://registry.npmjs.org/react-native-web/-/react-native-web-0.13.18.tgz",
@@ -10089,6 +10339,19 @@
         "plist": "^3.0.1"
       }
     },
+    "node_modules/simple-swizzle": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
+      "integrity": "sha1-pNprY1/8zMoz9w0Xy5JZLeleVXo=",
+      "dependencies": {
+        "is-arrayish": "^0.3.1"
+      }
+    },
+    "node_modules/simple-swizzle/node_modules/is-arrayish": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
+      "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ=="
+    },
     "node_modules/slash": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
@@ -10332,6 +10595,14 @@
       "resolved": "https://registry.npmjs.org/source-map-url/-/source-map-url-0.4.1.tgz",
       "integrity": "sha512-cPiFOTLUKvJFIg4SKVScy4ilPPW6rFgMgfuZJPNoDuMs3nC1HbMUycBoJw77xFIp6z1UJQJOfx6C9GMH80DiTw=="
     },
+    "node_modules/split-on-first": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/split-on-first/-/split-on-first-1.1.0.tgz",
+      "integrity": "sha512-43ZssAJaMusuKWL8sKUBQXHWOpq8d6CfN/u1p4gUzfJkM05C8rxTmYrkIPTXapZpORA6LkkzcUulJ8FqA7Uudw==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/split-string": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/split-string/-/split-string-3.1.0.tgz",
@@ -10499,6 +10770,14 @@
         "node": ">= 0.10.0"
       }
     },
+    "node_modules/strict-uri-encode": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz",
+      "integrity": "sha1-ucczDHBChi9rFC3CdLvMWGbONUY=",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/string_decoder": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
@@ -11050,6 +11329,11 @@
         "makeerror": "1.0.x"
       }
     },
+    "node_modules/warn-once": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/warn-once/-/warn-once-0.1.0.tgz",
+      "integrity": "sha512-recZTSvuaH/On5ZU5ywq66y99lImWqzP93+AiUo9LUwG8gXHW+LJjhOd6REJHm7qb0niYqrEQJvbHSQfuJtTqA=="
+    },
     "node_modules/wcwidth": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/wcwidth/-/wcwidth-1.0.1.tgz",
@@ -12538,6 +12822,15 @@
         "minimist": "^1.2.0"
       }
     },
+    "@egjs/hammerjs": {
+      "version": "2.0.17",
+      "resolved": "https://registry.npmjs.org/@egjs/hammerjs/-/hammerjs-2.0.17.tgz",
+      "integrity": "sha512-XQsZgjm2EcVUiZQf11UBJQfmZeEmOW8DpI1gsFeln6w0ae0ii4dMQEQ0kjl6DspdWX1aGY1/loyXnP0JS06e/A==",
+      "peer": true,
+      "requires": {
+        "@types/hammerjs": "^2.0.36"
+      }
+    },
     "@expo/config": {
       "version": "5.0.9",
       "resolved": "https://registry.npmjs.org/@expo/config/-/config-5.0.9.tgz",
@@ -13725,6 +14018,78 @@
       "resolved": "https://registry.npmjs.org/@react-native-community/cli-types/-/cli-types-4.10.1.tgz",
       "integrity": "sha512-ael2f1onoPF3vF7YqHGWy7NnafzGu+yp88BbFbP0ydoCP2xGSUzmZVw0zakPTC040Id+JQ9WeFczujMkDy6jYQ=="
     },
+    "@react-native-picker/picker": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@react-native-picker/picker/-/picker-2.1.0.tgz",
+      "integrity": "sha512-iJ/QaDrBMBaW6cFuQyR3DXzcn2h7c5O7mGgmNLCBQHTTtLNBZR+Sxogy6YleFPeToNdysG5mTTkXqBmlWHMQqg==",
+      "requires": {}
+    },
+    "@react-navigation/native": {
+      "version": "6.0.4",
+      "resolved": "https://registry.npmjs.org/@react-navigation/native/-/native-6.0.4.tgz",
+      "integrity": "sha512-497dGGDIZ8hDCPGj6GXZvLGHk6NvZk5k4r1cjwgqcXwutK5fS7sgD0dZP52NTQC3GvLe8PZNv6AEdMIqFrZK6A==",
+      "requires": {
+        "@react-navigation/core": "^6.0.2",
+        "escape-string-regexp": "^4.0.0",
+        "nanoid": "^3.1.23"
+      },
+      "dependencies": {
+        "@react-navigation/core": {
+          "version": "6.0.2",
+          "resolved": "https://registry.npmjs.org/@react-navigation/core/-/core-6.0.2.tgz",
+          "integrity": "sha512-Omsb670qmNfO0KGiRrOE+KXpCYQ6jXxE5uCPnj5srW31s6YDGiFl/M5sRcMyBdDXLXp5HjkQTJpU9ilmjKtL5g==",
+          "requires": {
+            "@react-navigation/routers": "^6.0.1",
+            "escape-string-regexp": "^4.0.0",
+            "nanoid": "^3.1.23",
+            "query-string": "^7.0.0",
+            "react-is": "^16.13.0"
+          }
+        },
+        "escape-string-regexp": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+          "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA=="
+        },
+        "react-is": {
+          "version": "16.13.1",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+          "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+        }
+      }
+    },
+    "@react-navigation/routers": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/@react-navigation/routers/-/routers-6.0.1.tgz",
+      "integrity": "sha512-5ctB49rmtTRQuTSBVgqMsEzBUjPP2ByUzBjNivA7jmvk+PDCl4oZsiR8KAm/twhxe215GYThfi2vUWXKAg6EEQ==",
+      "requires": {
+        "nanoid": "^3.1.23"
+      }
+    },
+    "@react-navigation/stack": {
+      "version": "6.0.9",
+      "resolved": "https://registry.npmjs.org/@react-navigation/stack/-/stack-6.0.9.tgz",
+      "integrity": "sha512-LV9MlxqOH6+wgU7LxhaTRSY+WTuzNa2NnOCji9nyAA4Xohp9tpuLhYJRYdNRWXBcfseBqz1o4L0LAxRMv+CXYQ==",
+      "requires": {
+        "@react-navigation/elements": "^1.1.2",
+        "color": "^3.1.3",
+        "warn-once": "^0.1.0"
+      },
+      "dependencies": {
+        "@react-navigation/elements": {
+          "version": "1.1.2",
+          "resolved": "https://registry.npmjs.org/@react-navigation/elements/-/elements-1.1.2.tgz",
+          "integrity": "sha512-PbPCleC1HpUlXtuP0DFNCNTEhRLd6lmB0KxY0SGRGqCemS3HpG/PajEQ1LDe7S51M03a1tDby1MfKTkNanUXAg==",
+          "requires": {}
+        }
+      }
+    },
+    "@types/hammerjs": {
+      "version": "2.0.40",
+      "resolved": "https://registry.npmjs.org/@types/hammerjs/-/hammerjs-2.0.40.tgz",
+      "integrity": "sha512-VbjwR1fhsn2h2KXAY4oy1fm7dCxaKy0D+deTb8Ilc3Eo3rc5+5eA4rfYmZaHgNJKxVyI0f6WIXzO2zLkVmQPHA==",
+      "peer": true
+    },
     "@types/istanbul-lib-coverage": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.3.tgz",
@@ -14582,6 +14947,15 @@
         "object-visit": "^1.0.0"
       }
     },
+    "color": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/color/-/color-3.2.1.tgz",
+      "integrity": "sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA==",
+      "requires": {
+        "color-convert": "^1.9.3",
+        "color-string": "^1.6.0"
+      }
+    },
     "color-convert": {
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@@ -14595,6 +14969,15 @@
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
       "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
     },
+    "color-string": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.6.0.tgz",
+      "integrity": "sha512-c/hGS+kRWJutUBEngKKmk4iH3sD59MBkoxVapS/0wgpCz2u7XsNloxknyvBhzwEs1IbV36D9PwqLPJ2DTu3vMA==",
+      "requires": {
+        "color-name": "^1.0.0",
+        "simple-swizzle": "^0.2.2"
+      }
+    },
     "color-support": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/color-support/-/color-support-1.1.3.tgz",
@@ -14768,6 +15151,23 @@
         "object-assign": "^4.1.1"
       }
     },
+    "cross-fetch": {
+      "version": "3.1.4",
+      "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.1.4.tgz",
+      "integrity": "sha512-1eAtFWdIubi6T4XPy6ei9iUFoKpUkIF971QLN8lIvvvwueI65+Nw5haMNKUwfJxabqlIIDODJKGrQ66gxC0PbQ==",
+      "peer": true,
+      "requires": {
+        "node-fetch": "2.6.1"
+      },
+      "dependencies": {
+        "node-fetch": {
+          "version": "2.6.1",
+          "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.1.tgz",
+          "integrity": "sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw==",
+          "peer": true
+        }
+      }
+    },
     "cross-spawn": {
       "version": "6.0.5",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",
@@ -15710,6 +16110,11 @@
         "to-regex-range": "^5.0.1"
       }
     },
+    "filter-obj": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/filter-obj/-/filter-obj-1.1.0.tgz",
+      "integrity": "sha1-mzERErxsYSehbgFsbF1/GeCAXFs="
+    },
     "finalhandler": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.2.tgz",
@@ -16010,6 +16415,23 @@
         }
       }
     },
+    "hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "peer": true,
+      "requires": {
+        "react-is": "^16.7.0"
+      },
+      "dependencies": {
+        "react-is": {
+          "version": "16.13.1",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+          "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+          "peer": true
+        }
+      }
+    },
     "http-errors": {
       "version": "1.7.3",
       "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.7.3.tgz",
@@ -17775,6 +18197,11 @@
       "resolved": "https://registry.npmjs.org/nanocolors/-/nanocolors-0.1.12.tgz",
       "integrity": "sha512-2nMHqg1x5PU+unxX7PGY7AuYxl2qDx7PSrTRjizr8sxdd3l/3hBuWWaki62qmtYm2U5i4Z5E7GbjlyDFhs9/EQ=="
     },
+    "nanoid": {
+      "version": "3.1.28",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.28.tgz",
+      "integrity": "sha512-gSu9VZ2HtmoKYe/lmyPFES5nknFrHa+/DT9muUFWFMi6Jh9E1I7bkvlQ8xxf1Kos9pi9o8lBnIOkatMhKX/YUw=="
+    },
     "nanomatch": {
       "version": "1.2.13",
       "resolved": "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.13.tgz",
@@ -18362,6 +18789,17 @@
         "once": "^1.3.1"
       }
     },
+    "query-string": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/query-string/-/query-string-7.0.1.tgz",
+      "integrity": "sha512-uIw3iRvHnk9to1blJCG3BTc+Ro56CBowJXKmNNAm3RulvPBzWLRqKSiiDk+IplJhsydwtuNMHi8UGQFcCLVfkA==",
+      "requires": {
+        "decode-uri-component": "^0.2.0",
+        "filter-obj": "^1.1.0",
+        "split-on-first": "^1.0.0",
+        "strict-uri-encode": "^2.0.0"
+      }
+    },
     "querystringify": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz",
@@ -18728,6 +19166,52 @@
         }
       }
     },
+    "react-native-gesture-handler": {
+      "version": "1.10.3",
+      "resolved": "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-1.10.3.tgz",
+      "integrity": "sha512-cBGMi1IEsIVMgoox4RvMx7V2r6bNKw0uR1Mu1o7NbuHS6BRSVLq0dP34l2ecnPlC+jpWd3le6Yg1nrdCjby2Mw==",
+      "peer": true,
+      "requires": {
+        "@egjs/hammerjs": "^2.0.17",
+        "fbjs": "^3.0.0",
+        "hoist-non-react-statics": "^3.3.0",
+        "invariant": "^2.2.4",
+        "prop-types": "^15.7.2"
+      },
+      "dependencies": {
+        "fbjs": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-3.0.0.tgz",
+          "integrity": "sha512-dJd4PiDOFuhe7vk4F80Mba83Vr2QuK86FoxtgPmzBqEJahncp+13YCmfoa53KHCo6OnlXLG7eeMWPfB5CrpVKg==",
+          "peer": true,
+          "requires": {
+            "cross-fetch": "^3.0.4",
+            "fbjs-css-vars": "^1.0.0",
+            "loose-envify": "^1.0.0",
+            "object-assign": "^4.1.0",
+            "promise": "^7.1.1",
+            "setimmediate": "^1.0.5",
+            "ua-parser-js": "^0.7.18"
+          }
+        }
+      }
+    },
+    "react-native-safe-area-context": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/react-native-safe-area-context/-/react-native-safe-area-context-3.3.2.tgz",
+      "integrity": "sha512-yOwiiPJ1rk+/nfK13eafbpW6sKW0jOnsRem2C1LPJjM3tfTof6hlvV5eWHATye3XOpu2cJ7N+HdkUvUDGwFD2Q==",
+      "peer": true,
+      "requires": {}
+    },
+    "react-native-screens": {
+      "version": "3.8.0",
+      "resolved": "https://registry.npmjs.org/react-native-screens/-/react-native-screens-3.8.0.tgz",
+      "integrity": "sha512-lHrnB/elAoMJKv8O12U6BLgeup4lB6ZKJHEOVuG/D72nv/OE9wUusbou6YCB5tp3YbaSpHflPnkFmHA/vCejpw==",
+      "peer": true,
+      "requires": {
+        "warn-once": "^0.1.0"
+      }
+    },
     "react-native-web": {
       "version": "0.13.18",
       "resolved": "https://registry.npmjs.org/react-native-web/-/react-native-web-0.13.18.tgz",
@@ -19311,6 +19795,21 @@
         "plist": "^3.0.1"
       }
     },
+    "simple-swizzle": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
+      "integrity": "sha1-pNprY1/8zMoz9w0Xy5JZLeleVXo=",
+      "requires": {
+        "is-arrayish": "^0.3.1"
+      },
+      "dependencies": {
+        "is-arrayish": {
+          "version": "0.3.2",
+          "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
+          "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ=="
+        }
+      }
+    },
     "slash": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
@@ -19509,6 +20008,11 @@
       "resolved": "https://registry.npmjs.org/source-map-url/-/source-map-url-0.4.1.tgz",
       "integrity": "sha512-cPiFOTLUKvJFIg4SKVScy4ilPPW6rFgMgfuZJPNoDuMs3nC1HbMUycBoJw77xFIp6z1UJQJOfx6C9GMH80DiTw=="
     },
+    "split-on-first": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/split-on-first/-/split-on-first-1.1.0.tgz",
+      "integrity": "sha512-43ZssAJaMusuKWL8sKUBQXHWOpq8d6CfN/u1p4gUzfJkM05C8rxTmYrkIPTXapZpORA6LkkzcUulJ8FqA7Uudw=="
+    },
     "split-string": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/split-string/-/split-string-3.1.0.tgz",
@@ -19641,6 +20145,11 @@
       "resolved": "https://registry.npmjs.org/stream-buffers/-/stream-buffers-2.2.0.tgz",
       "integrity": "sha1-kdX1Ew0c75bc+n9yaUUYh0HQnuQ="
     },
+    "strict-uri-encode": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz",
+      "integrity": "sha1-ucczDHBChi9rFC3CdLvMWGbONUY="
+    },
     "string_decoder": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
@@ -20063,6 +20572,11 @@
         "makeerror": "1.0.x"
       }
     },
+    "warn-once": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/warn-once/-/warn-once-0.1.0.tgz",
+      "integrity": "sha512-recZTSvuaH/On5ZU5ywq66y99lImWqzP93+AiUo9LUwG8gXHW+LJjhOd6REJHm7qb0niYqrEQJvbHSQfuJtTqA=="
+    },
     "wcwidth": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/wcwidth/-/wcwidth-1.0.1.tgz",

package.json

@@ -8,6 +8,9 @@
     "eject": "expo eject"
   },
   "dependencies": {
+    "@react-native-picker/picker": "^2.1.0",
+    "@react-navigation/native": "^6.0.4",
+    "@react-navigation/stack": "^6.0.9",
     "expo": "~42.0.1",
     "expo-status-bar": "~1.0.4",
     "firebase": "8.2.3",

screens/Home_page.js

@@ -0,0 +1,92 @@
+import React, {useState, useEffect} from 'react'
+import { Button, Text, View, StyleSheet} from 'react-native'
+import {FlatList, ListViewBase } from 'react-native'
+import {TouchableOpacity} from 'react-native-gesture-handler'
+import {List, Divider} from 'react-native-paper'
+import Loading from '../components/Loading'
+import firebase from 'firebase';
+
+
+export default function Home_page({navigation}) {
+  const [threads, setThreads] = useState([]);  
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+
+    const fire = firebase.firestore()
+    .collection('THREADS')
+    
+    .onSnapshot(querySnapshot => {
+      const threads = querySnapshot.docs.map(documentSnapshot => {
+        return{
+          _id:documentSnapshot.id,
+          name:'',
+          ...documentSnapshot.data()
+        };
+
+      });
+
+      setThreads(threads);
+
+      if(loading){
+        setLoading(false);
+      }
+
+    });
+
+    return () => fire();
+  }, []);
+  
+  if (loading) {
+    return <Loading />;
+  }
+  
+  return (
+      <View style={styles.container}>
+        <FlatList
+          data={threads}
+          keyExtractor = {item => item._id}
+          ItemSeparatorComponent={() => <Divider />}
+          renderItem = {({item}) => (
+
+            <TouchableOpacity
+            onPress={() => navigation.navigate('Room', {thread: item})}
+            
+            >
+            <List.Item
+              title={item.name}
+              description='Item description'
+              titleNumberOfLines={1}
+              titleStyle={styles.listTitle}
+              descriptionStyle={styles.listDescription}
+              descriptionNumberOfLines={1}
+            />
+          </TouchableOpacity>
+        )}
+      />
+
+      <Button
+        title='Add Room'
+        onPress={() => navigation.navigate('Add')}
+      />
+
+        <Button
+        title ='Room'
+        onPress= {() => navigation.navigate('Room')}
+        />
+
+      </View>
+    );
+  }
+  const styles = StyleSheet.create({
+    container: {
+      backgroundColor: '#f5f5f5',
+      flex: 1
+    },
+    listTitle: {
+      fontSize: 22
+    },
+    listDescription: {
+      fontSize: 16
+    }
+  });

screens/LoginScreen.js

@@ -0,0 +1,38 @@
+import React, { Component } from "react";
+import { TextInput, TouchableWithoutFeedback, Keyboard, ImageBackground, Image } from "react-native";
+import firebase from "firebase";
+
+import { styles } from "../config/styles";
+import CustomButton from "../components/CustomButton";
+
+
+export default class LoginScreen extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            email: '',
+            password: '',
+        };
+        this.onLogin = this.onLogin.bind(this)
+    };
+
+    onLogin() {
+        const { email, password } = this.state;
+        firebase.auth().signInWithEmailAndPassword(email, password).then((result) => {console.log(result)}).catch((error) => {console.log(error)})
+    }
+
+    render() {
+        
+        return (
+            <TouchableWithoutFeedback style={styles.stdcontainer} onPress={Keyboard.dismiss} accessible={false}>
+                <ImageBackground style={styles.stdcontainer} source={require('../assets/yellow-white.jpg')}>
+                    <Image style={styles.logo} resizeMode="contain" source={require("../assets/open-hand.png")}/>
+                    <TextInput style={styles.regtxtfield} placeholder="Email" onChangeText={(email) => this.setState({ email })}/>
+                    <TextInput style={styles.regtxtfield} placeholder="Password" onChangeText={(password) => this.setState({ password })} secureTextEntry={ true }/>
+                    <CustomButton marginTop={70} title="Login" onPress={() => this.onLogin()}/>
+                    <CustomButton marginTop={25} title="Register" onPress={() => this.props.navigation.navigate('Register')}/>
+                </ImageBackground>
+            </TouchableWithoutFeedback>
+        );
+    }
+}

screens/RegisterScreen.js

@@ -0,0 +1,56 @@
+import React, { Component } from "react";
+import { TextInput, TouchableWithoutFeedback, Keyboard, ImageBackground, Text, View } from "react-native";
+import firebase from "firebase";
+import { Picker } from "@react-native-picker/picker";
+
+import { styles } from "../config/styles";
+import CustomButton from "../components/CustomButton";
+
+export default class RegisterScreen extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            username: '',
+            email: '',
+            password: '',
+            interpreter: false,
+        };
+        this.onRegister = this.onRegister.bind(this)
+    };
+
+    onRegister() {
+        const { username, email, password, interpreter } = this.state;
+        firebase.auth().createUserWithEmailAndPassword(email, password)
+            .then((result) => {
+                firebase.firestore().collection("Users")
+                    .doc(firebase.auth().currentUser.uid)
+                    .set({
+                        username,
+                        email,
+                        interpreter,
+                    })
+                console.log(result)
+            })
+            .catch((error) => {
+                console.log(error)
+            })
+    }
+
+    render() {
+        return (
+            <TouchableWithoutFeedback style={styles.regcontainer} onPress={Keyboard.dismiss} accessible={false}>
+                <ImageBackground style={styles.regcontainer} source={require('../assets/yellow-white.jpg')}>
+                    <TextInput style={styles.regtxtfield} placeholder="Userame" onChangeText={(username) => this.setState({ username })}/>
+                    <TextInput style={styles.regtxtfield} placeholder="Email" onChangeText={(email) => this.setState({ email })}/>
+                    <TextInput style={styles.regtxtfield} placeholder="Password" onChangeText={(password) => this.setState({ password })} secureTextEntry={ true }/>
+                    <Text style={styles.qsttxt}>Are you an interpreter?</Text>
+                    <Picker style={styles.picker} selectedValue={this.state.interpreter} onValueChange={(itemValue,itemIndex) => this.setState({interpreter: itemValue})}>
+                        <Picker.Item label="Yes" value={true}/>
+                        <Picker.Item label="No" value={false}/>
+                    </Picker>
+                    <CustomButton  marginTop={50} title="Register" onPress={() => this.onRegister()}/>
+                </ImageBackground>
+            </TouchableWithoutFeedback>
+        );
+    }
+}