Impressum


Andreas Gaal
Heinrich-Ebel-Str. 40
48161 Münster
Kontakt:
Telefon: 0251 625 4 838
E-Mail: me@laugi.com
Website: www.ycom1.com

Blog-Verfasser

Verantwortlich nach § 55 Abs.2 RStV
Andreas Gaal
Heinrich-Ebel-Str. 40
48161 Münster

Wir verwenden Cookies und andere Technologien auf unserer Website. Es werden keinerlei personalisierten Daten gespeichert.
#h1-Tutorial react-native drawer navigation-h1#....
#h3-Implementing drawer navigation routes in a react native app
-h3#....

#hr#....
#sup-This is a short tutorial to implement react-native drawer navigation,I did not consider here styling, it is just a fast walk-through enabling for quick success in setting up functional navigation between screens using react drawer navigation: -sup# ....

We start a new react-native application by typing into the terminal:........

#cmd-npx @react-native-community/cli@latest init mynewproject-cmd#........

Then change directory into the project folder, start up your editor e.g. vsCode, and remove unnecessary code from ''App.tsx'' file until we have something like this remaining: --#--#

#D-....
     import React from 'react';....
     import {Text } from 'react-native';....
     ....
     function App() {  ....
          return (....
                  <Text>Hello World</Text>....
          );....
     }....
    ....
    export default App; 
-D#....

Now we might start up the metro engine by 

#cmd-npm start-cmd#, by pressing 'a' we can start up our app in Android, to see the according output:  'Hello World'........Besides the drawer-navigation itself we need to install some of it's dependencies:....

#cmd-yarn add @react-navigation/drawer-cmd#....
#cmd-yarn add @react-navigation/native-cmd#....
#cmd-yarn add react-native-gesture-handler-cmd#....
#cmd-yarn add react-native-screens-cmd#....
#cmd-yarn add react-native-safe-area-context-cmd#....
#cmd-yarn add react-native-reanimated-cmd#....
....

Then we prepare two example screens to navigate to, let's say they are 'HomeScreen' and 'ProfileScreen':

#D-
function HomeScreen() {....
       return(....
            <View>....
                 <Text>home screen</Text>....
           </View>....
       );....
}....
-D#....

#D-
function ProfileScreen() {....
    return(....
        <View>....
            <Text>profile screen</Text>....
        </View>....
    );....
}
-D#....

Going further, we need to add the react-native-reanimated/plugin in our file: 'babel.config.js':....

#D-....
    module.exports = {....
          presets: [       ...       ], ....
          plugins: [       ....
                'react-native-reanimated/plugin',  ....
          ],....
    };....
-D#

#sup-#b-`react-native-reanimated/plugin` has to be listed last(!!!)-b#-sup#....

Turning to our App.tsx file we create an instance of the drawer by passing it to the drawer creation module:....

#D-
import { createDrawerNavigator } from '@react-navigation/drawer';....
import { createStaticNavigation } from '@react-navigation/native';....
import 'react-native-gesture-handler';....
....
const Drawer = createDrawerNavigator({....
       screens: {....
                 Home: HomeScreen,....
                 Profile: ProfileScreen,....
       },....
});........
-D#........



The drawer will be initiated by, and then embedded into the App:


#D-
const Navigation = createStaticNavigation(Drawer);....
function App() {....      
       return(....          
               <Navigation/>....      
       );....
}....
-D#


So we see our drawer working:...
....

#vidwebm-#src-./docs/drawer.webm-src#-vidwebm#....


I hope this was of a little help, as a remark this tutorial did not consider further theming, e.g in dark mode font visibility is not considered, and it has also been assumed that NodeJs environment has been set up........


Andy Gaal.... 


share
#h1-Tutorial react-native drawer navigation-h1#....
#h3-Implementing drawer navigation routes in a react native app
-h3#....

#hr#....
#sup-This is a short tutorial to implement react-native drawer navigation,I did not consider here styling, it is just a fast walk-through enabling for quick success in setting up functional navigation between screens using react drawer navigation: -sup# ....

We start a new react-native application by typing into the terminal:........

#cmd-npx @react-native-community/cli@latest init mynewproject-cmd#........

Then change directory into the project folder, start up your editor e.g. vsCode, and remove unnecessary code from ''App.tsx'' file until we have something like this remaining: --#--#

#D-....
     import React from 'react';....
     import {Text } from 'react-native';....
     ....
     function App() {  ....
          return (....
                  <Text>Hello World</Text>....
          );....
     }....
    ....
    export default App; 
-D#....

Now we might start up the metro engine by 

#cmd-npm start-cmd#, by pressing 'a' we can start up our app in Android, to see the according output:  'Hello World'........Besides the drawer-navigation itself we need to install some of it's dependencies:....

#cmd-yarn add @react-navigation/drawer-cmd#....
#cmd-yarn add @react-navigation/native-cmd#....
#cmd-yarn add react-native-gesture-handler-cmd#....
#cmd-yarn add react-native-screens-cmd#....
#cmd-yarn add react-native-safe-area-context-cmd#....
#cmd-yarn add react-native-reanimated-cmd#....
....

Then we prepare two example screens to navigate to, let's say they are 'HomeScreen' and 'ProfileScreen':

#D-
function HomeScreen() {....
       return(....
            <View>....
                 <Text>home screen</Text>....
           </View>....
       );....
}....
-D#....

#D-
function ProfileScreen() {....
    return(....
        <View>....
            <Text>profile screen</Text>....
        </View>....
    );....
}
-D#....

Going further, we need to add the react-native-reanimated/plugin in our file: 'babel.config.js':....

#D-....
    module.exports = {....
          presets: [       ...       ], ....
          plugins: [       ....
                'react-native-reanimated/plugin',  ....
          ],....
    };....
-D#

#sup-#b-`react-native-reanimated/plugin` has to be listed last(!!!)-b#-sup#....

Turning to our App.tsx file we create an instance of the drawer by passing it to the drawer creation module:....

#D-
import { createDrawerNavigator } from '@react-navigation/drawer';....
import { createStaticNavigation } from '@react-navigation/native';....
import 'react-native-gesture-handler';....
....
const Drawer = createDrawerNavigator({....
       screens: {....
                 Home: HomeScreen,....
                 Profile: ProfileScreen,....
       },....
});........
-D#........



The drawer will be initiated by, and then embedded into the App:


#D-
const Navigation = createStaticNavigation(Drawer);....
function App() {....      
       return(....          
               <Navigation/>....      
       );....
}....
-D#


So we see our drawer working:...
....

#vidwebm-#src-./docs/drawer.webm-src#-vidwebm#....


I hope this was of a little help, as a remark this tutorial did not consider further theming, e.g in dark mode font visibility is not considered, and it has also been assumed that NodeJs environment has been set up........


Andy Gaal....