This is how the app knows that initial route is Home. If you check initialRoute you will see that name: 'Home' is the same as route.name = 'Home' in renderScene. RenderScene − This is function for calculating routes. This is just an object where we are setting name (used for routing) and title (used for setting title). InitialRoute − We are setting which route will be rendered first when we start the app. We are setting initialRoute, renderScene and navigatorBar. Navigator − This element handles routing. There is a lot of things going on in example below. We will have AboutContainer.js and AboutButton.js inside. Path to this folder is src/components/about. We will create two components here HomeContainer.js and HomeButton.jsĪbout − About page folder. Path to this folder is src/components/home. We will place it inside src/components folder. Router.js − This is our Router component. We will explain our files and folders in following list − Now that you grasped the concept we will use real life examples in our following chapters. We did this to get comfortable with separation of logic and view. Keep close attention since we will refactor lot of the code but we will show you interesting features.Īll previous chapters used M圜ontainerComponent and MyPresentationalComponent.
In this chapter we will show you how to set up navigation in React Native app.