React native not re-rendering screen after state update

Question

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

• HotBytes
• Favorite

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

Answer 1

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