Orders.js

import React, { Component } from 'react';
import { View, Text, StyleSheet, Dimensions, FlatList, ScrollView, TouchableOpacity } from 'react-native';
import firebase from "react-native-firebase";
import Icon from 'react-native-vector-icons/Ionicons';

import { SharedElement } from 'react-native-motion';

const { width } = Dimensions.get("window")
// create a component
class Home extends Component {
  constructor(props) {
    super(props);
    this.state = {
      currentUser: null,
      orders: []
    }
  }
  componentDidMount() {
    const currentUser = firebase.auth().currentUser.uid;
    this.setState({ currentUser });
    // request/providerId/orders
    const Orders = firebase.database().ref(`request/${currentUser}/orders`);
    Orders.on("value", (snapshot) => {
      console.log(snapshot)
      let orders = []
      snapshot.forEach((childSnapshot) => {
        orders.push({
          id: childSnapshot.val().id,
          nameProblem: childSnapshot.val().nameOfProblem,
          description: childSnapshot.val().description,
          date: childSnapshot.val().date,
          time: childSnapshot.val().time,
          Price: childSnapshot.val().price,
          statusInfo: childSnapshot.val().statusInfo,
        });
        this.setState({ orders })
        console.log('@Child', childSnapshot.val());
      });
    });
  }
  _listEmptyComponent = () => {
    return (
      <View style={styles.container}>
        <Text style={{ alignSelf: "center" }}> No Orders Found :( try Later!</Text>
      </View>
    )
  }
  render() {
    return (
      <SharedElement id="source">
        <View style={styles.container}>
          <FlatList data={this.state.orders}
            key={Math.random() * 1000}
            contentContainerStyle={{ flexGrow: 1 }}
            ListEmptyComponent={this._listEmptyComponent()}
            renderItem={({ item }) => {
              return (
                <ScrollView scrollEnabled={true} style={{ marginTop: 20 }} >
                  <TouchableOpacity onPress={()=>this.props.navigation.navigate('detail')}>
                    <View
                      style={{
                        flex: 1,
                        padding: 15,
                        borderRadius: 5,
                        width: width - 20,
                        alignItems: "flex-start",
                        justifyContent: "flex-start",
                        backgroundColor: "#eee",
                      }}>
                      <View style={{ justifyContent: "flex-start", alignItems: "baseline" }}>
                        <View style={{
                          flexDirection: "row",
                          alignItems: "center"
                        }}>
                          <Icon name="ios-build" size={25} color='#4d8dd6' style={{ margin: 5 }} />
                          <Text style={{ color: "#1567d3" }}> <Text style={{ color: "#828282" }}> Title:</Text> {item.nameProblem}</Text>
                        </View>
                        <View style={{
                          flexDirection: "row",
                          alignItems: "center"
                        }}>
                          <Icon name="md-clipboard" size={25} color='#4d8dd6' style={{ margin: 5 }} />

                          <Text numberOfLines={1} ellipsizeMode='tail' style={{ color: "#1567d3", paddingEnd: 10 }}>
                            <Text style={{ color: "#828282" }}> Description:</Text> {item.description}
                          </Text>
                        </View>
                        <View style={{
                          flexDirection: "row",
                          alignItems: "center"
                        }}>
                          <Icon name="ios-calendar" size={25} color='#4d8dd6' style={{ margin: 5 }} />
                          <Text style={{ color: "#1567d3" }}>
                            <Text style={{ color: "#828282" }}> Date:</Text> {item.date}
                            <Text style={{ color: "#828282" }}>   Time:</Text> {item.time}
                          </Text>
                        </View>
                        <View style={{
                          flexDirection: "row",
                          alignItems: "center"
                        }}>
                          <Icon name="ios-alert" size={25} color='#4d8dd6' style={{ margin: 5 }} />
                          <Text style={{ color: "#1567d3" }}> <Text style={{ color: "#828282" }}> Status:</Text> {item.statusInfo}</Text>
                        </View>
                      </View>
                      <View style={{ width: width - 50, flexDirection: "row", justifyContent: "space-around", margin: 10, marginBottom: 0 }}>
                        <TouchableOpacity style={{ width: 100, justifyContent: "center", borderColor: "#333", borderWidth: 1, margin: 10, padding: 10, alignItems: "center" }}>
                          <Text style={{ fontSize: 17 }}>Reject</Text>
                        </TouchableOpacity>
                        <TouchableOpacity style={{ backgroundColor: "#5ed81c", width: 170, justifyContent: "center", alignItems: "center", borderColor: "#5ed81c", borderWidth: 1, margin: 10, padding: 10, }}>
                          <Text style={{ fontSize: 17, color: "#fff" }}>Accept</Text>
                        </TouchableOpacity>
                      </View>


                    </View>
                  </TouchableOpacity>
                </ScrollView>
              )
            }
            }
            keyExtractor={(item, index) => index.toString()}
          />
        </View>
      </SharedElement>
    );
  }
}

// define your styles
const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignSelf: "center"
  },
});

//make this component available to the app
export default Home;