How to display the menu list from API in DrawerNavigator - react-native

Question

I have created the side menu using DrawerNavigator with the static menu names and screens. I want the menu names and screens to be dynamic. Meaning to say I like to fetch those details in API and display in the DrawerNavigator. Please help to resolve this.
const MyApp = createDrawerNavigator({
HomeScreen: {
screen: HomeScreen,
},
WebMenuScreen: {
screen: WebMenuScreen,
},
}, {
drawerPosition: 'right',
},{
contentComponent: CustomDrawerComponent
}, {
initialRouteName: 'Login'
});

Answer 1

Try this, I hope this will helps you.
in Route File
import DrawerNavigator from "./DrawerNavigator";
import Home from './Home';
import About from './About'
import {
createStackNavigator,
createAppContainer,
} from "react-navigation";
const MainNavigator = createStackNavigator({
DrawerNavigator: {
screen: DrawerNavigator,
navigationOptions: {
header: null
}
},
Home: {
screen: Home,
navigationOptions: {
htitle: 'Home'
}
},
About: {
screen: About,
navigationOptions: {
htitle: 'About'
}
},
});
const Routes = createAppContainer(MainNavigator);
export default Routes;
in DrawerNavigator File
import React from 'react';
import { Platform, Dimensions } from 'react-native';
import { createDrawerNavigator, createAppContainer } from 'react-navigation';
import Home from './Home';
import About from '/About'
import MenuDrawer from './MenuDrawer';
const WIDTH = Dimensions.get('window').width;
const DrawerConfig = {
drawerWidth: WIDTH*0.83,
contentComponent: ({ navigation }) => {
return(<MenuDrawer navigation={navigation} />)
}
}
const DrawerNavigator = createDrawerNavigator(
{
Home:{
screen:Home
},
About:{
screen:About
},
},
DrawerConfig
);
export default createAppContainer(DrawerNavigator);
in Menu Drawer File
import React from "react";
import {
View,
Text,
ScrollView,
Image,
TouchableOpacity,
} from "react-native";
var obj = JSON.parse('{ "name":"Home","name":"About" }');
// import styles from './menuDrawerStyles'
class MenuDrawer extends React.Component {
navLink(nav, text) {
return (
<TouchableOpacity
style={{ height: 50 }}
onPress={() => this.props.navigation.navigate(nav)}
>
<Text style={styles.link}>{text}</Text>
</TouchableOpacity>
);
}
render() {
return (
<View style={styles.container}>
<ScrollView style={styles.scroller}>
{
this.obj.map((data) => {
<View style={styles.bottomLinks}>
<View style={{ flex: 2, flexDirection: "row" }}>
{this.navLink(data.name, data.name)}
</View>
<View style={{ flex: 2, flexDirection: "row" }}>
{this.navLink(data.name, data.name)}
</View>
</View>
})
}
</ScrollView>
</View>
);
}
}
in Menu Button File
import React from "react";
import { StyleSheet , Platform } from "react-native";
import Icon from "react-native-vector-icons/MaterialIcons";
export default class MenuButton extends React.Component {
render() {
return (
<Icon
name="reorder"
color="black"
size={25}
style={styles.menuIcon}
onPress={() => this.props.navigation.toggleDrawer()}
/>
);
}
}
const styles = StyleSheet.create({
menuIcon: {
zIndex: 9,
position: "absolute",
top: Platform.OS === "android" ? 15 : 25,
left: 20
}
});
In Menu Drawer file you can call Api and fetch menu list.