SetUp Firebase Database

parent 059e5ab3
import { StatusBar } from 'expo-status-bar'; import { StyleSheet, View } from 'react-native';
import { StyleSheet, Text, View } from 'react-native'; import AddData from './src';
export default function App() { export default function App() {
return ( return (
<View style={styles.container}> <View style={styles.container}>
<Text>Open up App.js to start working on your app!</Text> <AddData />
<StatusBar style="auto" />
</View> </View>
); );
} }
...@@ -13,8 +12,5 @@ export default function App() { ...@@ -13,8 +12,5 @@ export default function App() {
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { container: {
flex: 1, flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
}, },
}); });
import firebase from 'firebase/compat/app';
import { getDatabase } from 'firebase/database';
const firebaseConfig = {
apiKey: "AIzaSyCGepr7j41wWYOcq2KgfT2TU9U7ye723Ko",
authDomain: "researchproject-ded92.firebaseapp.com",
databaseURL: "https://researchproject-ded92-default-rtdb.asia-southeast1.firebasedatabase.app",
projectId: "researchproject-ded92",
storageBucket: "researchproject-ded92.appspot.com",
messagingSenderId: "315494030749",
appId: "1:315494030749:web:4f25e1e9f44228e2b02374",
measurementId: "G-52Y793E4LV"
}
if (firebase.apps.length === 0){
firebase.initializeApp(firebaseConfig);
}
const db = getDatabase();
export { db };
import { View, Text, StyleSheet, TextInput, Button } from 'react-native'
import React, { useState } from 'react'
import { db } from '../config'
import { ref, set } from 'firebase/database'
const AddData = () => {
const [title, setTitle] = useState('');
const [body, setBody] = useState('');
//function to add data to forebase realtime db
const dataAddOn = () => {
set(ref(db, 'posts/' + title),{
title: title,
body: body,
});
setTitle('')
setBody('')
}
return (
<View style={styles.container}>
<Text style={styles.header}>AddData</Text>
<TextInput
placeholder='Title'
value={title}
onChangeText={(text) => setTitle(text)}
style={styles.input}
/>
<TextInput
placeholder='Body'
value={body}
onChangeText={(text) => setBody(text)}
style={styles.input}
/>
<Button
title='Add Data'
onPress={dataAddOn}
/>
</View>
)
}
export default AddData
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
},
header:{
fontSize:30,
textAlign:'center',
marginTop:100,
fontWeight: 'bold'
},
input:{
borderWidth:1,
borderColor:'black',
margin:10,
padding:10,
fontSize:18,
borderRadius:6,
}
});
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment