Mobile

App.js

-import { StatusBar } from 'expo-status-bar';
-import { StyleSheet, Text, View } from 'react-native';
+import { useEffect, useState } from 'react';
+import { View, Image, StyleSheet } from 'react-native-web';
+import {db} from './firebase-config';
+import {addDoc, collection, getDocs} from "firebase/firestore"
+import { async } from '@firebase/util';
+import { NavigationContainer } from '@react-navigation/native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+
 
 export default function App() {
+  const [newName, setNewName] = useState("")
+  const [newEmail, setNewEmail] = useState("")
+  const [newUrl, setNewUrl] = useState("")
+  const [users, setUsers] = useState([]);
+  const usersCollectionRef = collection(db, "users");
+
+
+  const createUser = async () =>{
+      await addDoc(usersCollectionRef, {name: newName, email: newEmail, url: newUrl});
+  };
+
+  useEffect(() => {
+    const getUsers = async () => {
+      const data = await getDocs(usersCollectionRef);
+      setUsers(data.docs.map((doc) => ({...doc.data(), id: doc.id })));
+    };
+
+    getUsers();
+  }, []);
+
+
+  const Stack = createNativeStackNavigator();
+
   return (
-    <View style={styles.container}>
-      <Text>Open up App.js to start working on your app!</Text>
-      <StatusBar style="auto" />
-    </View>
+    <NavigationContainer>
+        <Stack.Navigator>
+        <Stack.Screen
+          name="Home"
+          component={HomeScreen}
+          options={{title: "Welcome"}}
+        />
+        <div className='App'> 
+            <input placeholder='Name...'  onChange={(event) => {setNewName(event.target.value);}}/>
+            <input placeholder='Email' onChange={(event) => {setNewEmail(event.target.value);}}/>
+            <input placeholder='URL' onChange={(event) => {setNewUrl(event.target.value);}}/>
+            <button onClick={createUser}>Create User</button>
+              {users.map((user) => {
+                return (
+                  <div>
+                    <h1>Name: {user.name}</h1>          
+                    <h1>E-Mail: {user.email}</h1>
+                    <Image
+                        style={{width: 50, height: 50}}
+                        source={{uri : user.url}}
+                    />
+                  </div>
+                  );
+              })}  
+            </div>
+            </Stack.Navigator>
+    </NavigationContainer>
+
   );
 }
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#fff',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-});

firebase-config.js

+import { getFirestore } from '@firebase/firestore';
+import { initializeApp } from "firebase/app";
+
+
+const firebaseConfig = {
+  apiKey: "AIzaSyBsN0wEZIv-VsDaLwleYdgSsw398Wzu5x4",
+  authDomain: "mobilecomputing-135af.firebaseapp.com",
+  projectId: "mobilecomputing-135af",
+  storageBucket: "mobilecomputing-135af.appspot.com",
+  messagingSenderId: "278853955846",
+  appId: "1:278853955846:web:5da41fd1fab66df287ee87"
+};
+
+
+const app = initializeApp(firebaseConfig);
+
+export const db = getFirestore(app);
\ No newline at end of file

package.json

@@ -10,11 +10,16 @@
     "eject": "expo eject"
   },
   "dependencies": {
+    "@react-navigation/native": "^6.0.10",
+    "@react-navigation/native-stack": "^6.6.1",
     "expo": "~44.0.0",
     "expo-status-bar": "~1.2.0",
+    "firebase": "^9.6.10",
     "react": "17.0.1",
     "react-dom": "17.0.1",
     "react-native": "0.64.3",
+    "react-native-safe-area-context": "^4.2.4",
+    "react-native-screens": "^3.13.1",
     "react-native-web": "0.17.1"
   },
   "devDependencies": {