ReactNative: Basic App skeleton (For Beginner)
In this blog, we will set up a react-native app with basic functionality such as Navigation, Redux, UI Library, and Hooks.
We will build an app with the following functionality.
- Home Screen: List the movies in the grid. The page will have two actions 1. Users will be able to like movies. 2. User will be able to navigate to the detail page of the movie.
- Search Screen: The user will be able to search the movies by name. Search results will be displayed in the list on the same page.
- Favorite Screen: Displays the list of the movies that the user has liked.
- Detail Page: Display the movie poster and details such as cast, awards, directors, etc..
The final Application Will Look like this.
Lets Begin :
Technical Setup :
Navigation: For Navigation we will use React Navigation. Parent Navigation will be Stack Navigation, and for Secondary navigation, we will use the Tab Navigation.
Redux — To have centralized state management and to be able to share the state among different components we will use Redux.
We will use the most simplest setup of redux (with plain actions).
Step 1: Create the reducer.
Our Reducer will maintain the state of the favorite object.
There are two actions our reducers are going to handle. Add Favourite and remove Favourite. The Reducer will look as follows.
Step 2. Create Store
const myStore = createStore(reducerObj);
Pass it to the Provider so the store will be available to all the screens mentioned in this hierarchy.
Step 3: Dispatch the action :
When the user clicks on the like button we will dispatch the action to add favorite.
Step 4: Receive the state in favorite page.
Accessing the state on the favorite screen is easy. We will use the useSelector hook to access the state. Thats it the simplest redux setup you can find online :)
Native Base — Used for UI component
We have used native base for creating UI in the app. You can find more information about it on the website.
Hooks : We have used following hooks in the project. userState , useEffect, useNavigation,useDispath, useSelector (I won’t go in detail of each of the hook as it is out of the scope of the article)
You can download the project from git here :- https://github.com/sushilronghe99/rnmovies
