The next project I will be working on will be to convert the Subway Times web app into a React Native application. Besides the initial set up, the first thing I want to do is work on navigation.
Why We Need Navigation
Navigating through a web page is done by interacting with the browser or through links. Mobile apps typically have a bar on the top or bottom of the screen that renders a screen depending on which button is pressed. React handles this with navigator components. A few of the most used navigation libraries are React Navigation and React Native Navigation.
For the Subway Times project, I will be using React Navigation. The app will be structured like so.
The app.js file will contain a drawer navigator that will list buttons that render different screens, search, lines, and Starred Stops. Each screen will be the base of a stack.
Navigation Stack
An example of what a navigation stack does is when you are on an app like twitter and click on a tweet to see more information. A new screen renders, and a back arrow is displayed. The way this works is, as you visit screens, they get stacked on top of each other. The screen on top is what gets rendered. The back arrow pops whatever screen is on top off of the stack, and the previous screen will be right where you left off. Think of it like the screens are on a skewer.
Top comments (0)