How to add icons in drawer menu for individual menu item?

Question

I am using drawer menu and I need to add icons to each of the menu items. How to add icons so that they get displayed before the name of eah activity?

My code -

class SideMenu extends Component {

    renderMenu() {
        let menuArray = [
            {
                id:1,
                screen: 'HomeDrawer',
                title: 'Dashboard',
            },
            {
                id:2,
                screen: 'AccountSettings',
                title: 'Account Settings',
            },
            {
                id:3,
                screen: 'NotificationSettings',
                title: 'Notification Settings',
            }
        ]

        return menuArray.map((item) => {
            return(
                <TouchableWithoutFeedback 
                    onPress={this.navigateToScreen(item.screen)} key={item.id}>
                    <View style={styles.menuItemContainer}>
                        <View  style={{ flex:2 }}>
                            <Text style={styles.menuText}>{item.title}</Text>
                        </View>
                    </View>
                </TouchableWithoutFeedback>
            )
        })
    }

    render() {
        return(
            <View style={{ flex:1, backgroundColor:'#FFFFFF' }}>
                <ScrollView>
                    <View style={{ height: '30%', marginBottom: 50}}>         
                    <LinearGradient 
                        start={{ x: 0, y:0 }}
                        end={{ x: 1, y: 0 }}
                        colors={['#1865e5', '#159af6']}
                        style={{height: 200}} >         


                    <View style={{ elevation: 5,}}>
                        <Image
                            source={require('../assets/logo.png')}
                            style={{ height:100, width:100, marginLeft: 10, marginTop: 30, marginBottom: 10 }}
                        />
                    </View>

                    <View>
                    {
                            this.state.userDetails ?

                            <View>

                                    <Text style={{ fontWeight: "bold", fontSize:15, color: '#FFFFFF', marginLeft: 10 }}>{this.state.userDetails && this.state.userDetails.Details[0].name}</Text>
                                    <Text style={{ fontSize:14, color: '#FFFFFF', marginLeft: 10 }}>{this.state.userDetails && this.state.userDetails.Details[0].email}</Text>
                            </View>

                            :
                            <Text>Loading...</Text>
                    }

                    </View>                    
                    </LinearGradient>  
                    </View>                  
                    { this.renderMenu() }

                    <TouchableWithoutFeedback 
                        onPress={ () => {
                            Alert.alert(
                                'Logout',
                                'Are you sure you want to logout?',
                                [
                                  {text: 'No', onPress: () => console.log('Cancel Pressed'), style: 'cancel'},
                                  {text: 'Yes', onPress: () => {

                                    AsyncStorage.removeItem('userDetails', () => 
                                    {

                                    });
                                    this.navigateToScreen('Login')();
                                  }},
                                ],
                                { cancelable: false }
                              )
                        }}>
                        <View style={styles.menuItemContainer}>
                            <View  style={{ flex:3 }}>
                                <Text style={styles.menuText}>Logout</Text>
                            </View>
                        </View>
                    </TouchableWithoutFeedback>

                </ScrollView>
            </View>
        )
    }
}

})

export default SideMenu

To achieve -

Tried adding icon attribute to each ids and with image but unfortunately it didn't work as expected.

How to add the icons that are in the assets folder so that it can be displayed as per the design that it attached along with this question?

Answer 1

You have to make a customized side bar to add more flexibility to add icons.