Using React Router in React Native
2020 was nuts, am I right? So glad to have that one behind us. I am aware that just because the clock struck midnight on December 31st and 2020 became 2021, that does not necessarily mean that everything is going to magically change, but I am hopeful.
2020 took a lot out of all of us. It made us rethink… well, everything… but I bet if you look back on the year, you will see some good in there as well. For me personally, I bought my first house, a beautiful cabin up in the North Georgia mountains, I decided to follow my passion for programming by attending Flatiron School of Software Engineering, I proposed to the most amazing woman (she said yes!), and if that wasn’t enough, we will be having a baby boy come May! Even with the tremendous losses, soul crushing solitude and the seemingly endless string of horrible events that was 2020, I am hopeful.
Currently, I am putting the final touches on my capstone project at Flatiron. I decided to go in a slightly different direction with my final project than they had probably intended, and although we had not learned React Native in class, I felt confident enough in my ability to learn quickly to make it an integral part of my final project 😅😅.
So, how DO you use routes in React Native? It’s very similar to using routes in React… like most things in React Native.
You start by installing react-native-router with either npm or yarn… npm install react-router-native or yarn add react-router-native… then import NativeRouter and Route from react-router-native, like so ⤵️
Now, you are going to want to wrap everything in NativeRouter. So, if you used react-native init to initialize your app, this should go in your App.js file.
Next you can define your routes. For this particular app, I only needed one route, but you can define as many as your app calls for here. Each route will have a path and component. The path prop should describe the path name and component should define the React element that will be returned by the Route when the path is matched. In this case /contacts will return my Contacts component.
When you want to use your defined routes, you have some options. If, like me, you want to return the desired component after, say, verified bio-metric authentication, you can use redirect. Here, when the user… me… successfully passes the bio-metric scan, in this case fingerprint, the contacts component is returned. This is accomplished by importing Redirect from react-router-native. Then I tell the app to return <Redirect to=”/contacts” /> if this.state.authenticated is true. You can also use link if it more appropriate for your app by importing link from react-router-native and saying something like <Link to=”/contacts”> Contacts </Link>. This will give you a pressable link “Contacts”. This is similar to an HTML anchor but the the Link component does not reload the page.
That pretty much sums it up. This is just a very basic overview of react router native. If this does not cover the information needed for your specific situation, or if you just want to dive deeper, I suggest checking out https://reactrouter.com/native/guides/quick-start. Good luck in 2021!
