Question 136827 in React native Question posted in
The official React Native documentation can be found here.

React native – retrieve and store data in firebase folder wise

hi i want to render the data from the firestore in a react native app.client asked me to do render the data in folderwise .where it contains folder inside folder and files with folder.when user clicks the pdf files it pdf viewer should open .i implemented pdf viewer functionlity .for now i want to know how to render the data folderwise and when clicked on folder it needs to open data inside the folder ,if we click on file it needs to render pdf .please help me im not ettin how to do this.

Tags:

2

Answers


  1. 0

    Use the FlatList

    import React, { useState, useEffect } from 'react';
import { View, Text, FlatList, TouchableOpacity } from 'react-native';
import firestore from '@react-native-firebase/firestore';

const FoldersScreen = () => {
  const [folders, setFolders] = useState([]);

  useEffect(() => {
    const subscriber = firestore()
      .collection('folders')
      .onSnapshot(querySnapshot => {
        const folders = [];
        querySnapshot.forEach(documentSnapshot => {
          folders.push({
            ...documentSnapshot.data(),
            key: documentSnapshot.id,
          });
        });
        setFolders(folders);
      });
    return () => subscriber();
  }, []);

  const renderItem = ({ item }) => {
    if (item.type === 'folder') {
      return (
        <TouchableOpacity onPress={() => console.log('Open folder:', item.name)}>
          <Text>{item.name}</Text>
        </TouchableOpacity>
      );
    } else if (item.type === 'file') {
      return (
        <TouchableOpacity onPress={() => console.log('Open PDF:', item.name)}>
          <Text>{item.name}</Text>
        </TouchableOpacity>
      );
    }
  };

  return (
    <View>
      <FlatList
        data={folders}
        renderItem={renderItem}
      />
    </View>
  );
};

export default FoldersScreen;
    Login or Signup to reply.
  2. 0

    To you second question:

    
// Add a folder document with a subcollection of files
firestore().collection('folders').doc('folder1').set({
  name: 'Folder 1'
});
firestore().collection('folders').doc('folder1').collection('files').doc('file1').set({
  name: 'File 1',
  url: 'https://example.com/file1.pdf'
});
firestore().collection('folders').doc('folder1').collection('files').doc('file2').set({
  name: 'File 2',
  url: 'https://example.com/file2.pdf'
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search