Complete Guidance to Create React Native Redux CRUD App Part 1

We are going to see how to create React Native Redux CRUD application.

In this series, you will learn how to create react native application, how to structure your project, basics of react-navigation, how to create bottom navigation, how to set up redux with react native.

In part 1 of the React Native Redux CRUD series, we will see how to create react native application, how to structure your project,basics of react-navigation, how to create bottom navigation.

Let’s dive right in to project.

Let’s dive right in to project.

we are going to create react native application through a command-line interface.

Open the command prompt in your system. Type the below command and click enter.

ReduxCRUD is the application name we are creating. you can create any name you want.

[comment]: <> (Need to change later)

react-native init ReduxCRUD

It will take time to complete. Once successfully completed, go to that folder by typing cd ReduxCRUD in cmd (Command Prompt) and click enter.

we need to install the following packages to create React Native Redux CRUD application.

yarn add react-native-vector-icons react-redux redux redux-thunk native-base lodash @react-navigation/native react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view @react-navigation/bottom-tabs @react-navigation/stack

react-native-vector-icons: This library is using to display icons in react native application

react-redux, redux, redux-thunk: These 3 library is for redux integration in react native.

lodash: lodash is a javascript library. lodash has many advantages you can check out here.

@react-navigation/native react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view @react-navigation/bottom-tabs: These libraries we are using for navigation.

Project Structure of React Native Redux CRUD Application

Before creating screens let’s see the project structure. The below structure is the final structure of our application.

├── src
│ ├── actions
│ │ ├── index.js
│ │ ├── QuoteAction.js
│ │ ├── types.js
│ │
│ ├── components
│ │ ├── MyHeader
│ │
│ ├── navigations
│ │ ├── MainNavigation.js
│ │
│ ├── reducers
│ │ ├── index.js
│ │ ├── QuoteReducer.js
│ │
│ │
│ ├── screens
│ │ ├── HomeScreen.js
│ │ ├── ListQuotes.js
│ │ ├── QuoteForm.js
│ │ ├── SettingsScreen.js
│
├─App.js

In this section, we are going to create a navigations and screens folder (Homescreen, SettingsScreen).

If you are using VS Code editor then type code . in cmd and click enter button this command will open your project in VS Code.

First, we need to create an src folder inside the project folder(ReduxCRUD). Then create navigations and screens folder.

Inside the navigations folder create MainNavigation.js files and then inside the screens folder create HomeScreen.js and SettingsScreen.js files

├── src
│ ├── navigations
│ │ ├── MainNavigation.js
│ │
│ │
│ ├── screens
│ │ ├── HomeScreen.js
│ │ ├── SettingsScreen.js

Create Bottom Tab Navigation React Native

In this section, we are going to see how to create 2 simple screens with bottom navigation for our React Native Redux CRUD App.

Create a HomeScreen.js file inside the screens folder and paste the below code.

We just created the simple functional component with text Home Screen

import React from "react";
import { View, Text } from "react-native";

export const HomeScreen = () => {
  return (
    <View>
      <Text>Home Screen</Text>
    </View>
  );
};

export default HomeScreen;

Create a SettingsScreen.js file inside the screens folder and paste the below code.

Similar to Home Screen we created the simple functional component with the text Settings screen.

import React from "react";
import { View, Text } from "react-native";

export const SettingsScreen = () => {
  return (
    <View>
      <Text>Settings Screen</Text>
    </View>
  );
};

export default SettingsScreen;

Now we are going to create Bottom Navigation.

Let’s create MainNavigation.js file inside navigation folder and paste the below code.

MainNavigation.js

import "react-native-gesture-handler";
import React from "react";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { Icon } from "native-base";
import HomeScreen from "../screens/HomeScreen";
import SettingsScreen from "../screens/SettingsScreen";

const Stack = createStackNavigator();
const Tab = createBottomTabNavigator();

export const HomeStack = () => {
  return (
    <Stack.Navigator
      initialRouteName="Home"
      screenOptions={{
        gestureEnabled: false,
        showIcon: true,
      }}
    >
      <Stack.Screen
        name="Home"
        component={HomeScreen}
        options={{
          headerShown: false,
        }}
      />
    </Stack.Navigator>
  );
};

export const SettingsStack = () => {
  return (
    <Stack.Navigator
      initialRouteName="Settings"
      screenOptions={{
        gestureEnabled: false,
        showIcon: true,
      }}
    >
      <Stack.Screen
        name="Settings"
        component={SettingsScreen}
        options={{
          headerShown: false,
        }}
      />
    </Stack.Navigator>
  );
};

export default function Main() {
  return (
    <NavigationContainer>
      <Tab.Navigator
        screenOptions={({ route }) => ({
          tabBarIcon: ({ focused, color, size }) => {
            let iconName;

            if (route.name === "Home") {
              iconName = "home";
            } else if (route.name === "Settings") {
              iconName = "settings";
            }

            // You can return any component that you like here!
            return (
              <Icon
                name={iconName}
                size={size}
                color={color}
                style={{ color: color }}
                type="MaterialIcons"
              />
            );
          },
        })}
        tabBarOptions={{
          activeTintColor: "#ff6347",
          inactiveTintColor: "gray",
        }}
      >
        <Tab.Screen name="Home" component={HomeStack} />
        <Tab.Screen name="Settings" component={SettingsStack} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

Let’s Modify the App.js in our project folder.

import React from "react";
import { SafeAreaView } from "react-native";
import MainNavigation from "./src/navigations/MainNavigation";

const App = () => {
  return (
    <SafeAreaView style={{ flex: 1 }}>
      <MainNavigation />
    </SafeAreaView>
  );
};

export default App;

To run react native application type react-native run-android in cmd and click enter to run project.

If Icons not showing up please try this command react-native link react-native-vector-icons and then rerun your app.

Explanation of the MainNavigation.js code:

We must import a gesture handler at top of the app to navigation get work. you can check it on react navigation’s official website here. We also attached an image from the official website check it below.

We need to wrap the whole app in NavigationContainer so we imported that.

The NavigationContainer is responsible for managing your app state and linking your top-level navigator to the app environment. you can read more about Navigation Container here.

createStackNavigator is used to transition between screens where a new screen placed on top. Read more about createStackNavigator here.

createBottomTabNavigator is used to create the bottom tab bar in our application. you can read more about createBottomTabNavigator here.

Next, we are creating two stacks named HomeStack and SettingsStack. Why we are creating two stacks is because of we are going to create Two bottom tab menus one is Home and another one settings.

Whether the tab contains a single page or multiple pages, It’s always best practice to create a stack menu and then place that inside tab.

Currently, we created single page in both stacks. Later we will show how to work with multiple pages.

<Tab.Screen name="Home" component={HomeStack} />
<Tab.Screen name="Settings" component={SettingsStack} />

Tab.Screen is the tab we are creating which must be placed inside Tab.Navigator. Each Tab screen must have 2 props name(unique) and component.

screenOptions={({route}) => ({
          tabBarIcon: ({focused, color, size}) => {
            let iconName;

            if (route.name === 'Home') {
              iconName = 'home' ;
            } else if (route.name === 'Settings') {
              iconName =  'settings' ;
            }

            // You can return any component that you like here!
            return (
              <Icon
                name={iconName}
                size={size}
                color={color}
                style={{color: color}}
                type="MaterialIcons"
              />
            );
          },
        })}

On Tab Navigator we have 2 props which is an optional . We are using screenOptions props to display tab icons based on route name.

tabBarOptions={{
          activeTintColor: '#ff6347',
          inactiveTintColor: 'gray',
}}

tabBarOptions props is used to change active tab icon color and text color. There are more props available to use based on our use case we can use it. Read more about Bottom Tab Navigation here.

Conclusion:

You can get the code from GitHub using the following command. Github URL is here

git clone —single-branch —branch part1 https://github.com/mahisat/react-native-redux-example-crud.git

If you have any doubts you can put that in the comment section.

In the next series of React Native Redux CRUD, we will show how to configure Redux in our React native application.