Read Daily News on Your Own App- React Native
React Native provides seamless support for cross-platform app dev on both iOS and Android for your apps. Having recently taken React Native, I learned that there were a lot of useful features you can add like create your OWN app, much of which I’ll explain here.
What we’ll be doing
- Exploring the stack and bottom-tab navigators separately
- Combining them to transition through our React Native app screens
- Integration of API in React Native
Note: For this article, I’ll be using React Navigation’s latest stable version, which is v5.
What’s React Navigation?
In the same way going back and forth is handled in a web browser — where routes are pushed and popped — React Navigation pushes and pops your app’s routes. The special thing about it is that it includes the smooth animations we see and love on our phones today when switching between screens.
Installation
If you haven’t already done so, let’s install the react-navigation package. You’ll need to run the expo install command as well to install its dependencies if you’re using Expo!
yarn add @react-navigation/nativeyarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
Setup
In the first instance, we’re going to use a stack navigator. I mentioned earlier React Navigation pushes and pops routes, and it does so to and from a stack.
The stack navigator is a stack containing your app’s routes, where by default your first screen is your root screen. As you transition through your app’s screens, the new screen is placed on top of the stack.
App.js
A few notes on the above:
- First, we’re importing all of our screens as you normally would in any React/React Native application
- We’re then initiating our stack using
createStackNavigatorand creating a stack screen for each of our app’s screens using their components - We’re using creating material bottom stack navigator using
createMaterialBottomTabNavigatorand creating stack screen inside bottom tab navigator - Finally, we’re wrapping our stack screens with
NavigationContainer, which is responsible for managing our app’s state
Usage
Application Screens
HomeScreen.js
API Fetch:
fetchmethod is used to access GET API we pass the query in method, which returns a Promise in object format- We convert the returned object array into JSON format and change the state of our data array
catchmethod is used to handle any error that occurs in accessing the api call.
HomeScreen
- Each screen held within the stack will carry navigation as props, thus each will have access to Navigation’s
navigate()function - The
navigate()function first parameter refers to the name of the screen (as set inApp.js). The second parameter is optional and holds any details we need to pass between screens. In this case, we’re passing a user ID and name.
DetailsScreen.js
- In
DetailsScreen.js, we’re accessing the same route params we passed in fromHomeScreen.js.
SearchScreen.js
Component Screens
CardView.js
CardView.js
A few notes on the above:
- CardView is to render the cards that we are able to using on the HomeScreen.js
- Finally, we’re wrapping our stack screens with
navigate, which is responsible for managing ourDetailsScreen.js
SearchListView.js
Working Demo
We should now have a React Native app with basic navigation, looking like so:
Putting It All Together
If you’ve made it this far, amazing! So far we’ve looked at how to implement navigation via the two main navigators provided by React Navigation — stack, and bottom-tab. But most apps nowadays use all of these in conjunction, so how can we do that?
If you try adding multiple navigators to the NavigatorContainer, it’ll produce an error saying there’s already an existing navigator.
Final Product
We now have a React Native application making use of stack, tab, and drawer navigators through the React Navigation package.
Summary
React Navigation provides an easy way to handle navigation throughout your React Native app. With the help of stacks, bottom-tabs and transitioning through screens is a breeze.
