Pfthb

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.

You can try something like this:

.database()
 .ref('/trains/')
 .on('value', snapshot => 
 const trains = snapshot.val();
 console.warn(trains); 
 );