Issue
I am trying to add custom icon to my CustomDrawerComponent, but nothing happen...
App.js :
const navigationOptions = {
headerTintColor: colors.white,
};
const drawerNavigationOption = ({ navigation }) => ({
...navigationOptions,
headerLeft: (
<TouchableOpacity onPress={() => navigation.toggleDrawer()}>
<View>
<Icon name="menu" size={24} color={colors.white} />
</View>
</TouchableOpacity>
),
});
const MapsStackNavigator = createStackNavigator({
MapsNavigator: {
screen: MapsScreen,
navigationOptions: drawerNavigationOption,
},
});
const AppDrawerNavigator = createDrawerNavigator(
{
Plans: MapsStackNavigator,
},
{
contentComponent: CustomDrawerMenu,
contentOptions: {
inactiveTintColor: colors.doveGrey,
activeTintColor: colors.doveGrey,
},
}
);
My CustomDrawerMenu.js :
export default class CustomDrawerMenu extends Component {
render() {
return (
<ScrollView
contentContainerStyle={{
flex: 1,
flexDirection: "column",
justifyContent: "space-between",
}}
>
<SafeAreaView forceInset={{ top: "always", horizontal: "never" }}>
{...}
<DrawerItems {...this.props} />
</SafeAreaView>
{...}
</ScrollView>
);
}
}
My MapsScreen :
export default class MapsScreen extends React.Component {
static navigationOptions = {
drawerIcon: (
<Image
style={{ width: 24, height: 24 }}
source={require("../../assets/icons/plan.png")}
/>
),
title: "Plans",
};
render() {
return (
<Text>My map screen</Text>
);
}
}
But absolutely nothing happened... I tried to add drawerIcon
to my App.js > const navigationOptions
but nothing happened aswell.
I do not really know where to place drawerIconm because I search on the doc, on some YouTubes video and when I reproduced the same, it does not work.
Thank you.
Solution
In the new version of react-navigation(5.x)
You have to do :
1-
import { createDrawerNavigator } from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native';
import Icon from 'react-native-vector-icons/Ionicons';
2- Instead of using createDrawerNavigator
you have to use Drawer.Navigator
as below :
<NavigationContainer>
<Drawer.Navigator
initialRouteName="Products">
<Drawer.Screen name="Products" component={YOUR COMPONENT OR YOUR STACKNAVIGATOR} options={{
drawerIcon: config => <Icon
size={23}
name={Platform.OS === 'android' ? 'md-list' : 'ios-list'}></Icon>
}} />
<Drawer.Screen name="Orders" component={YOUR COMPONENT OR YOUR STACKNAVIGATOR} options={{
drawerIcon: config => <Icon
size={23}
name={Platform.OS === 'android' ? 'md-create' : 'ios-create'}></Icon>
}} />
</Drawer.Navigator>
</NavigationContainer>
Answered By - Abolfazl Roshanzamir
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.