React Navigation 5.x || Drawer Navigation
Installation
Install the required packages in your React Native project
yarn add @react-navigation/drawer
................................................................................................................................................................................................................................
Example : #5.1 [ Basic Setup]
import React from 'react'
import { Text, View, Button } from 'react-native'
import { NavigationContainer } from '@react-navigation/native'
import { createDrawerNavigator } from '@react-navigation/drawer'
const Home = ({ navigation }) => {
return (
<>
<Text> Home</Text>
<Button title='Go to Profie' onPress={() => navigation.navigate('profiles')}></Button>
</>
)
}
const Profile = () => {
return (
<>
<Text> Profile</Text>
</>
)
}
const Drawer = createDrawerNavigator()
const RootRoute = () => {
return (
<Drawer.Navigator>
<Drawer.Screen name='Home' component={Home} />
<Drawer.Screen name='Profile' component={Profile} />
</Drawer.Navigator>
)
}
const App = () => {
return (
<>
<NavigationContainer>
<RootRoute />
</NavigationContainer>
</>
)
}
export default App
Happy coding :)
................................................................................................................................................................................................................................
Example : #5.2 [ Stack + Tab + Drawer]
import * as React from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createDrawerNavigator } from '@react-navigation/drawer'
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack'
import { View, Text } from 'react-native'
import Icon from 'react-native-vector-icons/Ionicons'
const Home = () => <><Text>Home</Text></>
const SettingStack = () => <><Text>Settings</Text></>
const NotificationStack = () => <Text>notification</Text>
const Stack = createStackNavigator()
const HomeStack = ({navigation}) => {
return (
<Stack.Navigator
screenOptions={{
headerLeft: ({})=><Icon name ='md-menu' size={22} onPress={()=>navigation.openDrawer()}/>
}}
>
<Stack.Screen name='Home' component={Home} />
</Stack.Navigator>
)
}
const Tab = createBottomTabNavigator()
const TabNavigator = () => {
return (
<Tab.Navigator>
<Tab.Screen name="Home" component={HomeStack} />
<Tab.Screen name="Announcement" component={NotificationStack} />
<Tab.Screen name="Settings" component={SettingStack} />
</Tab.Navigator>
);
}
const Drawer = createDrawerNavigator();
const AppDrawer = () => {
return (
<Drawer.Navigator
drawerStyle={{
width: 350,
}}>
<Drawer.Screen name="Home" component={TabNavigator} />
</Drawer.Navigator>
);
}
const App = () => {
return (
<NavigationContainer>
<AppDrawer />
</NavigationContainer>
)
}
export default App
Happy coding :)
................................................................................................................................................................................................................................
Example : #5.3
import React from 'react'
import { View, Text, Image, TouchableOpacity } from 'react-native'
import { createDrawerNavigator} from '@react-navigation/drawer'
import Icon from 'react-native-vector-icons/FontAwesome'
const MenuIcon = (props) => {
return (
<TouchableOpacity onPress={props.navigation}>
<View style={{ flexDirection: 'row' }}>
<View style={{ marginHorizontal: 10 }}>
<Icon size={25} name={props.iconName} />
</View>
<View>
<Text>{props.titleName}</Text>
</View>
</View>
</TouchableOpacity>
)
}
const MenuContainer = (props) => {
return (
<View>
<Image source={require('../assets/images/hn.png')} />
<View>
<MenuIcon iconName='user' titleName='Account' navigation={() => props.navigation.navigate('Account')} />
<MenuIcon iconName='bell' titleName='Notification' navigation={() => props.navigation.navigate('Notifications')} />
<MenuIcon iconName='gear' titleName='Article' navigation={() => props.navigation.navigate('Article')} />
</View>
</View>
)
}
const Accounts = () => <Text> Accounts Screen </Text>
const Notifications = () => <Text> Notifications Screen </Text>
const Articles = () => <Text> Articles Screens</Text>
const DrawerStack = createDrawerNavigator()
export default () => (
<DrawerStack.Navigator drawerContent={(props) => <MenuContainer {...props} />}>
<DrawerStack.Screen name='Account' component={Accounts} />
<DrawerStack.Screen name='Article' component={Articles} />
<DrawerStack.Screen name='Notifications' component={Notifications} />
</DrawerStack.Navigator>
)
Happy coding :)
................................................................................................................................................................................................................................
Example : #5.5 [ with out props]
import * as React from 'react';
import { StackActions, CommonActions, DrawerActions } from '@react-navigation/native';
export const navigationRef = React.createRef();
export function navigate(name, params) {
navigationRef.current?.navigate(name, params);
}
export function push(...args) {
navigationRef.current?.dispatch(StackActions.push(...args));
}
export function closeDrawer() {
navigationRef.current?.dispatch(DrawerActions.closeDrawer());
}
export function openDrawer() {
navigationRef.current?.dispatch(DrawerActions.openDrawer());
}
export function toggleDrawer() {
navigationRef.current?.dispatch(DrawerActions.toggleDrawer());
}
export function back(key = null) {
navigationRef.current?.dispatch(CommonActions.goBack());
}
when ever u want to navigate or push a new rout u can easily do this like :
import * as RootNavigation from 'azir-services/NavigationService';
RootNavigation.push(routName, params);
React Native Drawer Navigation 4x
Step: #1
How to Building A React Native App with DrawerNavigator Using React Navigation
React Native Drawer Navigation imports the createDrawerNavigator from the react-navigation-drawer library.
looks like as below
import { createDrawerNavigator } from 'react-navigation-drawer'
Step: #2
Install library is mendatory
yarn add react-navigation
yarn add react-native-gesture-handler react-native-reanimated
or optionals
yarn add react-native-screens@^1.0.0-alpha.23.
yarn add react-navigation-drawer
yarn add react-navigation-stack
Step: #3
To finalize installation of react-native-gesture-handler for Android, make the following modifications to MainActivity.java
android\app\src\main\java\com\helloworld\MainActivity.java
import com.facebook.react.ReactActivityDelegate;
import com.facebook.react.ReactRootView;
import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;
@Override
protected ReactActivityDelegate createReactActivityDelegate() {
return new ReactActivityDelegate(this, getMainComponentName()) {
@Override
protected ReactRootView createRootView() {
return new RNGestureHandlerEnabledRootView(MainActivity.this);
}
};
}
Step: #4
[OPTIONAL]
yarn add react-native-screens@^1.0.0-alpha.23.
To finalize installation of react-native-screens for Android, add the following two lines to dependencies section in android/app/build.gradle:
implementation 'androidx.appcompat:appcompat:1.1.0-rc01'
implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0-alpha02'
Step: #5
App.js
import React, {Component} from 'react'
import { View, Text, TouchableOpacity } from 'react-native'
import { createAppContainer } from 'react-navigation'
import { createStackNavigator } from 'react-navigation-stack'
import { createDrawerNavigator, DrawerActions } from 'react-navigation-drawer'
import Icon from 'react-native-vector-icons/Ionicons'
class Home extends Component{
render(){
return(
<View>
<Text> Home</Text>
</View>
)
}
}
class Setting extends Component{
render(){
return(
<View>
<Text> Setting</Text>
</View>
)
}
}
const MenuIcon =({navigation})=>{
return(
// <TouchableOpacity onPress={()=> navigation.dispatch(DrawerActions.toggleDrawer())}>
<TouchableOpacity onPress={()=> navigation.openDrawer()}>
<Icon name='md-menu' size={25}/>
</TouchableOpacity>
)
}
const HomeStack = createStackNavigator({
Home: { screen: Home}
},{
defaultNavigationOptions:({navigation})=>({
headerLeft:<MenuIcon navigation ={navigation}/>
})
})
const SettingStack = createStackNavigator({
Setting:{ screen: Setting}
},{
defaultNavigationOptions:({navigation})=>({
headerLeft:<MenuIcon navigation={navigation}/>
})
})
const DrawerStack = createDrawerNavigator({
HomeStack,
SettingStack
})
const AppContainer = createAppContainer(DrawerStack)
class App extends Component{
render(){
return(
<AppContainer/>
)
}
}
export default App
Step: #6
Output
Step: #7
How design or Set Menu Icons in React Native
yarn add react-native-vector-icons
Go to below project directory and copy the link paste the bottom one only
android\app\build.gradle
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
Output
Note - Just better to have re-run the project instead of to reload
Happy Coding :)
......................................................................................................................................................................................................................................
Example : # 2
Happy Coding :)
.......................................................................................................................................................................................................................................
nice
ReplyDelete