I'm making the top tab navigator using createMaterialTopTabNavigator of react-navigation. The problem I faced is that the tabs have to decide by the response data of API request. For example, I call an API to request the football team list, receive the list and then set the tabs of the MaterialTopTabNvigator.
I already make the label of the navigator using the component like following :
class TabBarLabel extends React.Component {
constructor(props) {
super(props);
}
render() {
return this.props.focused ? (
<View style={lstyles.container_focused}>
<Text style={lstyles.label_focused}>{this.props.name}</Text>
</View>
) : (
<View style={lstyles.container_blur}>
<Text style={lstyles.label_blur}>{this.props.name}</Text>
</View>
);
}
}
const FootballTeamNavigator = createMaterialTopTabNavigator(
{
teamA : {
screen: AScreenComponent,
navigationOptions: () => {
return {
title: 'teamA',
tabBarLabel({focused}) {
return <TabBarLabel focused={focused} name="teamA" />;
}
};
}
}
},
{
initialRouteName: teamA,
swipeEnabled: false,
timingConfig: {
duration: 1000,
},
tabBarOptions: {
scrollEnabled: true,
...styles,
},
},
);
What I want to do is like :
let teamList = {};
apiForGetFootballTeamList().then(response => {
for (const team of response.data.list) {
tempList[team.name] = team;
}
});
createMaterialTopTabNavigator(
{
...teamList
},
{
initialRouteName: ...,
...
}
);
But I don't know how can I update the tabs using data, like component. (component has state and if we update the state, the component is updated)
Is there any way for it?
