title: how to fetch data from firebase using expo react native app
body: <p><strong>Problem:</strong></p>
  
  <p>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.</p>
  
  <pre><code>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 =()=&gt;{
      app.database().ref('/trains').on("value").then(snapshot=&gt;{
        console.log(snapshot);
      })
    }
  
    render() {
      var ds = new ListView.DataSource({ rowHasChanged: (r1, r2) =&gt; r1 !== r2 });
      return (
        &lt;View style={styles.form}&gt;
          &lt;View style={styles.inputSection}&gt;
            &lt;TextInput
              style={styles.input}
              placeholder="From"
              onChangeText={start =&gt; {
                this.setState({ start: start });
              }}
              underlineColorAndroid="transparent"
            /&gt;
            &lt;MaterialCommunityIcons
              style={styles.inputicon}
              name="backspace"
              size={30}
              color="#42a5f5"
            /&gt;
          &lt;/View&gt;
          &lt;View style={styles.inputSection}&gt;
            &lt;TextInput
              style={styles.input}
              placeholder="To"
              onChangeText={end =&gt; {
                this.setState({ end: end });
              }}
              underlineColorAndroid="transparent"
            /&gt;
            &lt;MaterialCommunityIcons
              style={styles.inputicon}
              name="backspace"
              size={30}
              color="#42a5f5"
            /&gt;
          &lt;/View&gt;
          &lt;View style={styles.classSection}&gt;
            &lt;Picker
              selectedValue={this.state.class}
              style={{ height: 50, width: box_width }}
              onValueChange={(itemValue, itemIndex) =&gt;
                this.setState({ class: itemValue })
              }
            &gt;
              &lt;Picker.Item label="1 st Class" value="1" /&gt;
              &lt;Picker.Item label="2 nd Class" value="2" /&gt;
              &lt;Picker.Item label="3 rd Class" value="3" /&gt;
            &lt;/Picker&gt;
          &lt;/View&gt;
  
          &lt;View style={styles.buttonCoontainer}&gt;
            &lt;View style={styles.searchContainer}&gt;
              &lt;TouchableOpacity onPress={this.search}&gt;
                &lt;View style={styles.search}&gt;
                  &lt;Text style={styles.searchText}&gt;Search&lt;/Text&gt;
                  &lt;Ionicons name="ios-search" size={30} color="#fff" /&gt;
                &lt;/View&gt;
              &lt;/TouchableOpacity&gt;
            &lt;/View&gt;
          &lt;/View&gt;
        &lt;/View&gt;
      );
    }
  }
  
  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"
    }
  });
  </code></pre>
  
  <p>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.</p>
  
  <pre><code>app.database().ref('/trains').on("value").then(snapshot=&gt;{
        console.log(snapshot);
      })
  </code></pre>
  
  <p>This is how I configure the firebase in my app and have imported it to my current component.</p>
  
  <pre><code>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;
  </code></pre>
  
  <p>This is how my database looks like in the console.
  <a href="https://i.stack.imgur.com/jB2bV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jB2bV.png" alt="datbase view"></a></p>
  
  <p>Can someone help me to query this database correctly from my react native app?. Thank you very much.</p>