React Native Render Flatlist Conditional

I have a question regarding React Native FlatList. I have a FlatList that gets my dataZ state as the data prop - dataZ is an Array that gets filled in by my fetchcall. The response

Solution 1:

Yes, you can check empty array value and can render another view by using this

{
(this.state.dataZ.length!=0)?
 <FlatList                                   
      style={{ marginVertical: 20 }}
      numColumns={2}  
      keyExtractor={(item, index) => index}
      data={this.state.dataZ}
      renderItem = {({ item }) => {
        //  console.log("Item in RenderItem : " + typeof item)if(Array.isArray(this.state.dataZ)) {

          return <MonatsView
          navigate={() => this.props.navigation.navigate("Tag")}
          tag={moment(item.activitydate).format("DD-MM")}
          tagDesc={moment(item.activitydate).day()}
          phase={item.phaseid}
          time={item.time}
          zkub={item.zkub}
          />
        } 
        else {
          return console.log("DATA IS NO ARRAY????")
        }
      }
      }
    />
:
<View> .--------**write here any other view** ----- </View>
}

Point 2: for this you can use:

• use the section list to show only one month data (https://facebook.github.io/react-native/docs/sectionlist).

• you should modify the current array object according to months wise and render a view and set according to that.

Solution 2:

You can check is empty by using length of Array like

this.state.dataZ.length == 0 ? do some thing here iftrue : do some thing here iffalse

and FlatList have prop ListEmptyComponent . It'll call when this.state.dataZ is empty. eg:

<FlatList                                   
      style={{ marginVertical: 20 }}
      numColumns={2}  
      keyExtractor={(item, index) => index}
      data={this.state.dataZ}
      renderItem = {({ item }) => {
        //  console.log("Item in RenderItem : " + typeof item)if(Array.isArray(this.state.dataZ)) {

          return<MonatsViewnavigate={() => this.props.navigation.navigate("Tag")}
          tag={moment(item.activitydate).format("DD-MM")}
          tagDesc={moment(item.activitydate).day()}
          phase={item.phaseid}
          time={item.time}
          zkub={item.zkub}
          />
        } 
        else {
          returnconsole.log("DATA IS NO ARRAY????")
        }
      }
      }
      ListEmptyComponent={
        <EmptyComponenttitle="Nothing here, come back later.." />
      }
    />