FlatList is not rendering my data inside react-native-tab-view

Question

I have a state this.state.mantras which gets updated everytime I post a new mantra.

I have a component with a FlatList to render each of the mantras. However, the FlatList is not rendering anything. I am able to console.log the state which logs the updated state of the mantras array every time.

I have a feeling that it's caused by something to do with react-native-tab-view within which I am trying to render the flatlist.

SecondRoute = () => (
    <FlatList
      keyExtractor={(item, index) => index.toString()}
      numColumns={1}
      data={this.state.mantras}
      renderItem={this._renderItem}
    />
)

render() {
 console.log(this.state) <-- success
  return (
   <TabView
    renderTabBar={props =>
      <TabBar
        bounces
        {...props}
        style={styles.tabStyle}
      />
    }
    navigationState={this.state}
    renderScene={SceneMap({
      second: this.SecondRoute, <--- fails to render, no errors
    })}
    onIndexChange={index => this.setState({ index })}
    initialLayout={{ width: Dimensions.get('window').width }}
   />
  )
 }

_renderItem = ({item, index}) => (
  <View>
   <View style={styles.mantraCard} key={item.id}>
   <Text style={styles.title}>{item.title}</Text>
   <Text style={styles.description}>{item.description}</Text>
   </View>
  </View>
);

When I remove the wrapper and just add the SecondRoute component as is, it renders successfully — Ozge Cokyasar, Jun 03 '19 at 03:48
try warpping with a , if it doesn't work , try adding extraData={this.state} in FlatList, may help u — Adarsh, Jun 03 '19 at 05:39
@OzgeCokyasar did you find any solution to resolve this issue — Rover, Sep 20 '22 at 13:21

score 0 · Answer 1 · answered Jun 03 '19 at 06:05

last month, I met the problem when react-native-scrollable-tab-view. the reason is the flatList no height in tab view on android platform. but on ios, it works well. so we have two solutions.

give the tabView a height

   <ScrollableTabView
   style={{ height: 300 }
    initialPage={0}                    
    }
  >
  // you list view
 </ScrollableTabView>

2, I modify the scrollTabView, made it same with ios, which use animated.ScrollView

 renderScrollableContent() {
{
const scenes = this._composeScenes();
return <Animated.ScrollView
horizontal
pagingEnabled
automaticallyAdjustContentInsets={false}
contentOffset={{ x: this.props.initialPage * this.state.containerWidth, 
}}
ref={(scrollView) => { this.scrollView = scrollView; }}
onScroll={Animated.event(
  [{ nativeEvent: { contentOffset: { x: this.state.scrollXIOS, }, }, }, 
],
  { useNativeDriver: true, listener: this._onScroll, }
)}
onMomentumScrollBegin={this._onMomentumScrollBeginAndEnd}
onMomentumScrollEnd={this._onMomentumScrollBeginAndEnd}
scrollEventThrottle={16}
scrollsToTop={false}
showsHorizontalScrollIndicator={false}
scrollEnabled={!this.props.locked}
directionalLockEnabled
alwaysBounceVertical={false}
keyboardDismissMode="on-drag"
{...this.props.contentProps}
>
  {scenes}
</Animated.ScrollView>;

}

FlatList is not rendering my data inside react-native-tab-view

1 Answers1