videos.jsx

import React, { useState, useEffect } from "react";
import { StyleSheet, View, Text, FlatList } from "react-native";
import { WebView } from "react-native-webview";
import { db, auth } from "../api/FirebaseApi";

export default function Videos() {
  const [contents, setContent] = useState("");
  const [user, currentuser] = useState("");

  useEffect(() => {
    const fetchPosts = () => {
      let currentmember = auth.currentUser.uid;
      let elements = [];
      db.ref("client/").on("value", (snapshot) => {
        if (snapshot.val() != null) {
          console.log("object.keys", typeof snapshot.val());
          Object.keys(snapshot.val()).map((val) => {
            db.ref("client/" + val + "/client/").on("value", function (
              snapshot
            ) {
              if (snapshot.val() != null) {
                if (snapshot.val().useruid.trim() == currentmember.trim()) {
                  currentuser(snapshot.val().displayname);
                  db.ref("client/" + val + "/agent/").on("value", function (
                    snapshot
                  ) {
                    if (snapshot.val() != null) {
                      Object.keys(snapshot.val()).map((val2) => {
                        console.log("object.keys2", typeof val2);
                        db.ref(
                          "client/" + val + "/agent/" + val2 + "/Videos"
                        ).on("value", function (snapshot) {
                          elements.push({
                            videoDescription: snapshot.val().Description.trim(),
                            content: snapshot.val().Video.trim(),
                          });
                        });
                      });
                    } else {
                      elements.push({
                        videoDescription: "",
                        content: "There are no videos",
                      });
                    }
                  });
                  return;
                }
              }
            });
          });
        }
      });

      setContent(elements);
    };
    fetchPosts();
  }, []);

  const renderItems = (rowData) => {
    const { item } = rowData;
    if (item.videoDescription === "") {
      return (
        <>
          <View
            style={{
              padding: 10,
              borderWidth: 1,
              width: "100%",
              alignItems: "center",
            }}
          >
            <Text>{item.content}</Text>
            <Text>{item.videoDescription}</Text>
          </View>
        </>
      );
    } else {
      return (
        <WebView
          source={{ uri: `https://www.youtube.com/embeded/${item.slice(-11)}` }}
        />
      );
    }
  };
  const arr = [];
  arr.push(contents);
  return (
    <>
      <View style={{ flex: 1, alignItems: "center", marginTop: 50 }}>
        <View style={{ width: "80%" }}>
          <FlatList
            data={arr}
            keyExtractor={(index) => index.toString()}
            renderItem={renderItems}
          />
        </View>
      </View>
    </>
  );
}

const styles = StyleSheet.create({});

Videos.navigationOptions = ({ navigation }) => {
  return {
    headerTitle: "Search",
    headerTintColor: "white",
    headerStyle: {
      backgroundColor: "black",
    },
    headerLeft: () => (
      <DrawerButton onPress={() => navigation.toggleDrawer()} />
    ),
  };
};