react-native: Add Bottom Tabs to a React Native App with React Navigation v6

(*1*)

Trainer: [0:00] So as to upload navigation to our app, let’s pass to reactnavigation.org. Let’s make a selection the documentation for model 6. Within the Getting Began segment, you are able to observe the set up directions for the platform you might be the use of Expo, non-Expo, iOS, Android, npm, or Yarn.(*19*)

[0:19] Reproduction the set up command and paste it into your terminal. We can additionally want to one after the other set up react-native-screens and react-native-safe-area-context. Earlier than putting in the local dependencies, let’s pass to Guides and Tab Navigation, and let’s additionally set up the Backside Tabs Navigator. We’re going to replica that and paste it into our terminal.(*19*)

[0:45] For iOS, we can cd into the iOS listing and run pod set up. This will likely set up the NATO dependencies. We’re going to return to the basis listing and rebuild the app. In our app.tsx, let’s import a navigation container from React Navigation Local.(*19*)

[1:05] We’re going to want to wrap our complete app within the navigation container. Remember to put this within the Urql supplier. Now anything else inside of this navigation container can use the navigation context, and anything else inside of this Urql supplier will be capable of use the GraphQL context.(*19*)

(*12*) To your supply listing, create a brand new folder and make contact with it displays. Within the displays folder, let’s create a brand new document known as BottomTabs.navigator.tsx. Within the backside tabs navigator, import celebrity as react from React, and create backside tab navigator from React navigation.(*19*)

[1:47] We’re going to do a const backside tabs = create backside tab navigator. Let’s export const backside tab navigator. This will likely be a serve as of React part and an error serve as. Let’s go back. We’re going to use this backside tabs, so backside tabs dot.(*19*)

(*10*) We will see that we will have a bunch, a navigator, or a display screen. We’re going to do BottomTabs.navigator. Inside of right here, we will do BottomTabs.display screen. We’re going to give it a reputation of house and an element of news. In our app.tsx, as an alternative of returning tales right here, let’s go back the ground tab navigator.(*19*)

[2:37] Now we get a tab navigator with simply one tab, which is the house display screen and our record of news is displayed inside of it. Let’s rename tales to house.display screen.(*19*)

[2:50] I will mechanically replace the imports. In our new house.display screen.tsx, let’s rename the export to house display screen. Within the backside tabs navigator, we’re going to want to replace the identify of the export to house display screen. We wish to transfer house display screen into our display screen’s listing.(*19*)

[3:12] As a result of React navigation guarantees that our app does not overflow outdoor of the secure area on a tool, we will pass to our house display screen. If we scroll all the way down to syles, we will take away the transient taste. Simply to provide this a little bit little bit of padding, let’s convert this padding backside to a padding vertical.(*19*)

(*6*) In our display screen’s listing, let’s upload a brand new document and make contact with it bookmarks.display screen.tsx. On this document, let’s import celebrity as react from React, and likewise import view, textual content, and elegance sheet from React Local. We’re going to wish to export const bookmarks display screen.(*19*)

[3:54] It is a useful React part, and returning an error serve as with a view, some textual content pronouncing bookmarks. Let’s additionally upload a mode object on the backside. Kinds = stylesheet create. We’re going to do a container with justify content material heart and align pieces heart.(*19*)

(*4*) On our view, let’s do taste = kinds.container. Open backside tabs navigator once more, and import the bookmark display screen. In our backside tab display screen, let’s upload every other display screen. We’re going to name it bookmarks, and we’re going to go within the bookmarks display screen. After saving, we’re going to see two tabs on the backside.(*19*)

(*3*) Let’s open the bookmarks display screen once more. In our container kinds, let’s additionally upload a flex one, which is able to permit this newsletter within the view to be focused. Within the backside tabs navigator, we will upload as many tabs as we wish so long as the names are distinctive.(*19*)

(*2*) React navigation will mechanically place them in our app. In our case, we simplest want the two tabs.(*19*)

(Visited 1 times, 1 visits today)