how to fetch data from firebase using expo react native app - firebase

Question

Problem:
I am very new to react native and firebase stuff. I am making a train timetable system. There I have implemented a search function. This is how that component looks.
import React, { Component } from "react";
import {
StyleSheet,
Text,
TextInput,
View,
TouchableOpacity,
Dimensions,
Picker,
ListView
} from "react-native";
import {
Ionicons,
Foundation,
Entypo,
MaterialCommunityIcons,
FontAwesome,
MaterialIcons
} from "#expo/vector-icons";
import app from "../../config/db";
import { Autocomplete } from "react-native-autocomplete-input";
import { addItem } from '../../services/stationService';
const { height, width } = Dimensions.get("window");
const box_width = width / 2 + 40;
export default class TicketForm extends React.Component {
constructor(props) {
super(props);
this.state = {
start: "",
end: "",
class: "",
isLoading:false
};
}
static navigationOptions = {
title: "Tickets",
headerStyle: {
backgroundColor: "#2b78fe"
},
headerTintColor: "#fff",
headerTitleStyle: {
color: "#ffff"
}
};
search =()=>{
app.database().ref('/trains').on("value").then(snapshot=>{
console.log(snapshot);
})
}
render() {
var ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });
return (
<View style={styles.form}>
<View style={styles.inputSection}>
<TextInput
style={styles.input}
placeholder="From"
onChangeText={start => {
this.setState({ start: start });
}}
underlineColorAndroid="transparent"
/>
<MaterialCommunityIcons
style={styles.inputicon}
name="backspace"
size={30}
color="#42a5f5"
/>
</View>
<View style={styles.inputSection}>
<TextInput
style={styles.input}
placeholder="To"
onChangeText={end => {
this.setState({ end: end });
}}
underlineColorAndroid="transparent"
/>
<MaterialCommunityIcons
style={styles.inputicon}
name="backspace"
size={30}
color="#42a5f5"
/>
</View>
<View style={styles.classSection}>
<Picker
selectedValue={this.state.class}
style={{ height: 50, width: box_width }}
onValueChange={(itemValue, itemIndex) =>
this.setState({ class: itemValue })
}
>
<Picker.Item label="1 st Class" value="1" />
<Picker.Item label="2 nd Class" value="2" />
<Picker.Item label="3 rd Class" value="3" />
</Picker>
</View>
<View style={styles.buttonCoontainer}>
<View style={styles.searchContainer}>
<TouchableOpacity onPress={this.search}>
<View style={styles.search}>
<Text style={styles.searchText}>Search</Text>
<Ionicons name="ios-search" size={30} color="#fff" />
</View>
</TouchableOpacity>
</View>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
form: {
flex: 1,
borderWidth: 3,
borderRadius: 8,
borderColor: "#ffff",
backgroundColor: "#ffff",
marginTop: 15,
marginLeft: 15,
marginRight: 15,
marginBottom: 5,
paddingTop: 50,
paddingLeft: 20,
paddingRight: 20
},
input: {
width: box_width,
flex: 1,
paddingTop: 5,
paddingRight: 5,
paddingBottom: 5,
paddingLeft: 0,
backgroundColor: "#fff",
color: "#424242"
},
inputSection: {
flexDirection: "row",
justifyContent: "center",
alignItems: "center",
backgroundColor: "#fff",
borderColor: "#78909c",
borderWidth: 0.8,
paddingLeft: 5,
paddingRight: 5,
marginTop: 10,
marginBottom: 10
},
classSection: {
flexDirection: "row",
justifyContent: "center",
alignItems: "center",
backgroundColor: "#e9ebee",
borderColor: "#e9ebee",
borderWidth: 0.8,
paddingLeft: 5,
paddingRight: 5,
marginTop: 10,
marginBottom: 10
},
dateSection: {
justifyContent: "center",
alignItems: "center",
backgroundColor: "#fff",
paddingLeft: 5,
paddingRight: 5,
marginTop: 10,
marginBottom: 10,
width: 335
},
inputIcon: {
padding: 10
},
reverseContainer: {
flexDirection: "row",
marginTop: 30
},
reverse: {
flexDirection: "row",
borderWidth: 0.5,
borderColor: "#eff0f1",
borderRadius: 5,
width: box_width / 2,
paddingTop: 3,
paddingBottom: 3,
paddingLeft: 20,
paddingRight: 10,
marginLeft: 0,
marginRight: 20,
backgroundColor: "#eff0f1"
},
reset: {
flexDirection: "row",
borderWidth: 0.5,
borderColor: "#eff0f1",
borderRadius: 5,
width: box_width / 2,
paddingTop: 3,
paddingBottom: 3,
paddingLeft: 20,
paddingRight: 10,
marginLeft: box_width / 4,
marginRight: 0,
backgroundColor: "#eff0f1"
},
reverseText: {
marginTop: 3,
marginRight: 10
},
resetText: {
marginTop: 3,
marginRight: 10
},
searchContainer: {
flexDirection: "row",
marginTop: 30
},
search: {
alignItems: "center",
flexDirection: "row",
borderWidth: 0.5,
borderColor: "#2089dc",
borderRadius: 5,
width: box_width + 80,
paddingTop: 6,
paddingBottom: 6,
paddingLeft: box_width / 2,
paddingRight: 10,
marginLeft: 0,
marginRight: 20,
backgroundColor: "#2089dc"
},
searchText: {
marginTop: 3,
marginRight: 10,
fontSize: 15,
fontWeight: "700",
color: "#ffff"
},
searchIcon: {
fontWeight: "700"
}
});
When I hit the search button there it is giving me an error. Here I am specifying how I implemented the action inside the search function.
app.database().ref('/trains').on("value").then(snapshot=>{
console.log(snapshot);
})
This is how I configure the firebase in my app and have imported it to my current component.
import Firebase from 'firebase';
let config = {
apiKey: "My Key",
authDomain: "my domain",
databaseURL: "https://mytrain-5beba.firebaseio.com",
projectId: "mytrain-5beba",
storageBucket: "mytrain-5beba.appspot.com",
messagingSenderId: "305193513552"
};
let app = Firebase.initializeApp(config);
// export const db = app.database();
export default app;
This is how my database looks like in the console.
Can someone help me to query this database correctly from my react native app?. Thank you very much.

Answer 1

You can try something like this:
.database()
.ref('/trains/')
.on('value', snapshot => {
const trains = snapshot.val();
console.warn(trains);
});