navigation solution Archives

I’ve used React Native since the very early days of it being opened sourced and have tried many solutions, this has been my navigator progression…NavigatorIOS Navigator react-native-router-flux NavigationExperimental or ex-navigation (depending on navigation requirements)Each upgrade took time to refactor and introduce a new, slightly different, pattern for navigation and managing navigation state.Fortunately, we’ve now got a single “official” solution to navigation in React Native with react-navigation.
The TabNavigator takes an object and each key/value pair is going to represent a tab.You can see that we then pass a screen to each tab—this will be the component that should be rendered when that tab is active.The last thing we need to do is use the Tabs navigator in our app entry point.
We can then replace the Feed screen definition in the TabNavigator with our new stack.I didn’t mention it before but in React Navigation, in addition to accepting components for the screen, it accepts other navigation stacks to display for a screen.
It, like the navigate function, is available on I’m pulling all the data to generate the UserDetail.js screen like thisModalThe final thing I want to cover in this tutorial is how to create a modal with React Navigation.
In addition to the mode, which I described above, we have headerMode which tells the StackNavigator to not display a navigation bar for this stack — we’ll let the children navigators do that.To keep a consistent interface and to show that you can nest a StackNavigator in a StackNavigator we’ll build one for the settings screen as well.Finally, we’ll want to tell the app entry point to use our new Root navigator instead of the Tabs.All of this leaves us with the followingRemember, all of this code is available on Github and I encourage you to check it out as well as the react navigation docs.

If you’ve worked with React Native for any amount of time you’ve likely been confused by how you navigate in your app (practices, packages, etc). I’ve used React Native since the very early days of…
Continue reading “Getting Started with React Navigation, the Navigation Solution for React Native”

Converting a React App to React NativeI have been working on a lot of mobile projects lately — including Cordova, PhoneGap, React Native, some Ionic and Swift — but I have to say, React Native is by far the best experience in mobile development I have had so far.
It shares the same workflow as a React application for the web which is pretty easy to reason about and find where things are quickly.Now I am building an app to gamify recycling in Indiana.
Since the web app is in React, I figured it would be easier to build the Native version in iOS and Android at the same time using React Native.Here are some mockups to give you an idea.
(I changed the menu from the right side to the left side after this)Setting Up the React Native AppWhere React Native outdoes React is on it’s simple set up for apps.
That was pretty quick and easy —I just installed a few modules and wrote a minimal amount of code.List ViewsMost of the components I made I was able to copy from my web app and just update the UI.For this app, I have an ever-growing array of various characters that I wanted to display in a scrollable list on mobile.

I have been working on a lot of mobile projects lately — including Cordova, PhoneGap, React Native, some Ionic and Swift — but I have to say, React Native is by far the best experience in mobile…
Continue reading “Converting a React App to React Native – Gwendolyn Faraday – Medium”