Skip to content
Snippets Groups Projects
Commit 5bfabe51 authored by Christopher Luzzi's avatar Christopher Luzzi
Browse files

Mobile

parent 86e8616e
No related branches found
No related tags found
No related merge requests found
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',
},
});
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
This diff is collapsed.
......@@ -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": {
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment