Here is a one of the Two Tabs



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";

const { width } = Dimensions.get("window");

export default class AcceptedOrders extends Component {
  constructor(props) {
    super(props);
    this.state = {
      currentUser: null
    };
  }
  componentDidMount() {
    const currentUser = firebase.auth().currentUser.uid;
    this.setState({ currentUser });
    const Orders = firebase.database().ref(`AcceptedOrders/${currentUser}`);
    Orders.on("value", snapshot => {
      let orders = [];
      snapshot.forEach(childSnapshot => {
        if (childSnapshot.val().statusInfo == "Accepted") {
          orders.push({
            gKey: childSnapshot.key,
            id: childSnapshot.val().id,
            nameOfProblem: childSnapshot.val().nameOfProblem,
            description: childSnapshot.val().description,
            date: childSnapshot.val().date,
            time: childSnapshot.val().time,
            Price: childSnapshot.val().Price,
            statusInfo: childSnapshot.val().statusInfo,
            region: childSnapshot.val().region
          });
          this.setState({ orders });
        }
      });
    });
  }

  _listEmptyComponent = () => {
    return (
      <View style={styles.container}>
        <Text style={{ alignSelf: "center" }}>
          {" "}
          No Orders Found :( try Later!
        </Text>
      </View>
    );
  };
  render() {
    return (
      <View style={styles.container}>
        <FlatList
          data={this.state.orders}
          key={Math.random() * 1000}
          contentContainerStyle={{ flexGrow: 1 }}
          ListEmptyComponent={this._listEmptyComponent()}
          extraData={this.state}
          renderItem={({ item }) => {
            return (
              <ScrollView scrollEnabled={true} style={{ marginTop: 20 }}>
                <TouchableOpacity
                  onPress={() =>
                    this.props.navigation.navigate("OrderDetails", {
                      title: item.nameOfProblem,
                      description: item.description,
                      date: item.date,
                      time: item.time,
                      status: item.statusInfo,
                      gKey: item.gKey,
                      price: item.Price,
                      // location: item.location
                      region: item.region
                    })
                  }
                >
                  <View style={styles.listCard}>
                    <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.nameOfProblem}
                        </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",
                          flexWrap: "wrap",
                          paddingEnd: 50,
                          marginVertical: 10
                        }}
                      >
                        <Icon
                          name="md-clipboard"
                          size={25}
                          color="#4d8dd6"
                          style={{ margin: 5 }}
                        />
                        <Text style={{ color: "#828282" }}> Description:</Text>
                        <Text
                          numberOfLines={3}
                          ellipsizeMode="tail"
                          style={{ width: "100%", color: "#1567d3", left: 40 }}
                        >
                          {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-cash"
                          size={25}
                          color="#4d8dd6"
                          style={{ margin: 5 }}
                        />
                        <Text style={{ color: "#1567d3" }}>
                          {" "}
                          <Text style={{ color: "#828282" }}> Price:</Text>{" "}
                          {item.Price}$
                        </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>
                    <TouchableOpacity
                      style={{
                        width: width - 50,
                        borderRadius: 5,
                        height: 45,
                        marginVertical: 10,
                        alignSelf: "center",
                        backgroundColor: "#35b5ce",
                        alignItems: "center",
                        justifyContent: "center"
                      }}
                      onPress={() =>
                        this.props.navigation.navigate("OrderDetails", {
                          title: item.nameOfProblem,
                          description: item.description,
                          date: item.date,
                          time: item.time,
                          status: item.statusInfo,
                          gKey: item.gKey,
                          price: item.Price,
                          // location: item.location
                          region: item.region
                        })
                      }
                    >
                      <Text style={{ color: "#fff", fontSize: 18 }}>Open</Text>
                    </TouchableOpacity>
                  </View>
                </TouchableOpacity>
              </ScrollView>
            );
          }}
          keyExtractor={(item, index) => index.toString()}
        />
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignSelf: "center"
  },
  listCard: {
    flex: 1,
    padding: 15,
    borderRadius: 5,
    width: width - 20,
    alignItems: "flex-start",
    justifyContent: "flex-start",
    backgroundColor: "#eee"
  },
  btnContainer: {
    width: width - 50,
    flexDirection: "row",
    justifyContent: "space-around",
    margin: 10,
    marginBottom: 0
  },
  btnAccept: {
    backgroundColor: "#5ed81c",
    width: 170,
    justifyContent: "center",
    alignItems: "center",
    borderColor: "#5ed81c",
    borderWidth: 1,
    margin: 10,
    padding: 10
  },
  btnReject: {
    width: 100,
    justifyContent: "center",
    borderColor: "#333",
    borderWidth: 1,
    margin: 10,
    padding: 10,
    alignItems: "center"
  }
});