CODEWITHSUNDEEP
reactjsreact-nativereact-navigationreact-native-flatlist
Ferin Patel
Ferin Patel

Reputation: 3998

React native not re-rendering screen after state update

I am creating masonry list with react-native-seoul/masonry-list and fetching the data from API and updating the state afterwards. However, items are not rendered on screen but the console log of state variables shows data. Other think is that, when i save the file the data is render on screen.

Link to EXPO SNACK

In the example above, you can see that i have two screens

Both screen uses same package to render masonry layout. However it is working in HotBytes Screen but not in Favorite Screen.

ISSUE

The items are not rendering after the data is fetched and state update in favorite screen

Link to EXPO SNACK

Upvotes: 0

Views: 847

Answers (1)

m_wer
m_wer

Reputation: 1534

You made a small mistake inside 'AllScreenTabNavigator.js' by naming the props of AppBottomNavigator.Screen 'children' instead of 'component' as you did correct for the 'HotBytes' as well!

<AppBottomNavigator.Screen
    name="Favourite"
    component={Favourite}
    options={{
      tabBarIcon: ({ color }) => (
        <Feather name="heart" size={20} color={color} />
      ),
    }}
  />

EXPO SNACK_fixed

I think it doesn't need further explanation as it was just a 'slip of the pen' but just in case her's the tab navigator docs

Upvotes: 2

Related Questions