I am a developing an Iphone App using React Native.I want to display folders through a FlatList.For a User, they have specific folders assigned which has images from Google Cloud Platform. I am getting the folders for a user correctly, but when the user has no specific folders I want a message to be displayed as 'No Folders available'.I have used ListEmptyComponent to render the message.Below is the code:

DownloadPage.js:

import React,{useEffect,useState} from 'react';
import { View, StyleSheet,SafeAreaView,TouchableOpacity,Image,FlatList,Text} from 
'react-native';
import { useSelector,useDispatch } from 'react-redux';
import AsyncStorage  from '@react-native-community/async-storage';
import * as authActions from "../../store/actions/auth";
import { HeaderButtons, Item } from 'react-navigation-header-buttons';
import HeaderButton from '../../components/UI/HeaderButton'; 

const DownloadPage = (props) =>{
const student = useSelector(state => state.auth.availableDevice);
const dispatch = useDispatch(); 

const renderEmptyContainer = () =>{
<View style={styles.MainContainer}>
<View style={styles.emptyTextDisplayView}>
<Text style={styles.emptyTextDisplay}>No Folders to display</Text>
</View>
</View>
 }

useEffect(() => {
const onScreenLoad = async () => {
    const useridfordevices = await
        AsyncStorage.getItem("userDatauserid");
    const obj = JSON.parse(useridfordevices);
    const {userid} = obj;
    var userid1 = userid[0];
    await dispatch(authActions.getFolderInfo(userid1))
  };
onScreenLoad();
}, [dispatch]);
return(  
<SafeAreaView style={styles.MainContainer}>
  <View style={styles.container}>
  <FlatList data={student}
    horizontal={false}
    numColumns={2}
    ListEmptyComponent={renderEmptyContainer()} //**Not working!!!**
  keyExtractor={item => item.index}
  renderItem={itemData => (
    <View style={styles.folderview}>
    <TouchableOpacity
      activeOpacity={0.5}
      onPress={()=>props.navigation.navigate('FolderImagePage',{
        foldername: itemData.item.TargetName,
      })}
      >
       <Image
    style={styles.tinyLogo}
    source={require('../../assets/foldericon.png')}
  />
  
  <View style={styles.textView}>
  <Text style={styles.targettext}>{itemData.item.TargetName}</Text></View>
      </TouchableOpacity>
      </View>
  )}
 /> 
   
 </View>
</SafeAreaView>
)
}
const styles = StyleSheet.create({
MainContainer :{
flex:1,
},
folderview: {
width:190,
height:200, 
margin: 7,
borderRadius : 7 
},

textView: {
bottom:'9%',
width:'50%', 
textAlignVertical:'center',
padding:10,
color: '#000',
left:'7%'

 },
 targettext:{
 fontSize:15,
 fontWeight:'bold',
 },
 emptyTextDisplay:{
 fontWeight:'bold',
 fontSize:25
 },
 emptyTextDisplayView:{
 alignSelf:'center',
 top:'60%'.              **Trying to search the text if hidden**
 }
 });

  DownloadPage.navigationOptions = navData =>{
 return{
 headerTitle: 'Back',
 headerTitleStyle:{
   color:'white',
   
 },
 headerTitleAlign:"left",
 headerStyle: {
  backgroundColor: '#0437F2',
  
},
headerLeft: () =>
  <HeaderButtons HeaderButtonComponent={HeaderButton}>
    <Item
      iconName={'chevron-back-outline'}
      onPress={() => {  
       navData.navigation.navigate('Home');
      }}
    />
  </HeaderButtons>
   }
   }
   export default DownloadPage;

If user doesnt have folder assigned,when I run this code I am getting blank screen.Can anyone say where I am going wrong.Thanks in Advance.

CodePudding user response：

A few things to try

1. Rename renderEmptyContainer to RenderEmptyContainer And then replace

ListEmptyComponent={renderEmptyContainer()} with a component signature

ListEmptyComponent={<RenderEmptyContainer />}

2. Make sure that the student list are empty. Try for debugging just to add an empty array <FlatList data={[]}
3. Make another screen where you test your RenderEmptyContainer.

CodePudding user response：

It was my bad,I forgot to add return in RenderEmptyContainer function.And now everything good to go.Find the RenderEmptyContainer code below:

  const RenderEmptyContainer = () =>{
  return(
  <View style={styles.MainContainer}>
  <View style={styles.emptyTextDisplayView}>
  <Text style={styles.emptyTextDisplay}>No Devices to display</Text>
  </View>
  </View>
  )
  }