CODEWITHSUNDEEP
reactjsreact-nativereact-navigationreact-navigation-top-tabs
Ayyan
Ayyan

Reputation: 21

Dynamic component creation in React Native "Material Top Tabs Navigator"

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.

Upvotes: 1

Views: 221

Answers (0)

Related Questions