1

Currently I am developing a news app where I have to show category wise news listing. The categories are dynamic and fetching from API (Eg. Health, Sports, Travel, Technology etc.). I am using Material Top Tabs Navigator to show those categories.

<NewsView.Navigator
  screenOptions={{
    tabBarLabelStyle: { fontSize: 12 },
    tabBarItemStyle: { width: 100 },
    tabBarScrollEnabled: true,
  }}>
  {data.map((category) => (
    <NewsView.Screen
      name={category.name}
      component={category.key_name}
      key={category.id}
    />
  ))}
</NewsView.Navigator>

I need to generate the component for each category dynamically (like for Health, the Health component will be called, for Tech the Tech component and so on....) since for each category, different API will be called and news will be listed accordingly. As per the react navigation I couldn't understand how to develop those dynamic component to achieve the flow.

Here is the prototype image that I need to develop: App Prototype Image

Any help in this regard will be appreciated.

Ayyan
  • 21
  • 2
  • NewsView seems to be an TabNavigator, I don‘t care if an TabNavigator is a good choice for dynamic categories For example you could use a FlatList for to List categories. Maybe you should post a screenshot or at least a wireframe to show what you wanna implement. – Michael Bahl Sep 21 '21 at 16:16
  • @MichaelBahl My main concern is to generate component dynamically. I will show the news listing within FlatList. But I need to handle onRefresh and onEndReached differently as per Component wise. I didn't get any example as such. – Ayyan Sep 21 '21 at 18:05

0 Answers0