Forem: MTA Team

Adding Redux to your React Native App

MTA Team — Tue, 28 Jul 2020 15:21:47 +0000

Why Do We Need Global State ?

If we want to pass a data to a component from another one, we have few options. If they have a relation then it’s easy, we just pass the data as a prop. But as the complexity grows it is harder to track down the component tree and props. What if the components don’t have a relation? That’s where global state comes into play. Imagine Redux global store as a component at higher level than all of your componets and you can pass and fetch any data from there via actions and reducers at any level. In this article we will show you how to add and use Redux in your React Native App.

How To Install React-Redux

Open your project folder in your terminal and run commands below.

npm install redux react-redux redux-persist @react-native-community/async-storage --save

What Are Reducers and Actions ?

A reducer is a function that determines changes to an application’s state. It uses the action it receives to determine this change.

As you go deep in Redux, you’ll find out that all you’re going to do will be in reducers and actions. If you can grasp these concepts well, you’ll master redux in no time. Let’s start.

Write Your First Reducer

Let’s create a folder named redux **in project level and inside that two more folders named **actions **and **reducers. **In reducers folder create a file. Let’s name it **userReducer. We’ll use this reducer to pass down a string(name) and a boolean(loggedIn) value.

At the top we will define an Initial state for default values. After that we’ll define our reducer.

Our reducer will have two parameters. First one is our state and the second one is the action that triggers our state changes. We change our state based on the type of action.

Write Your First Action

In actions folder create a file named userActions. We have two actions, first one is for passing down the username to the reducer and second one is for resetting the reducer.

Root Reducer

If you have more than one reducer in your app then you need to create a root reducer to combine all your reducers. In reducers folder create another file named rootReducer.

Note that when you export, left side of the object is how you will call the reducer state in components.

What is Redux-Persist ?

If you want to keep your data in redux even if you close your app you need redux-persist. In redux-persist you can decide which data you’ll keep and which data you’ll lose.

In redux folder create a file named store.

Now it’s time to wrap our app with the store we created.

Let’s open our App.js file. To access redux data from all components we should wrap our app with Provider and give store as a prop.

And for redux-persist, at a level below we wrap our app with PersistGate and give persistor as prop and set loading prop as null.

Now we’re ready to use our reducers and actions in our app.

So let’s use them.

What are MapStateToProps and MapDispachToProps ?

How To Send Data To Redux Store?

In this example we have a text input and a button for user to type their name and proceed with their name. We have a component called landingPage. In this file before we use actions we have to import them.

For triggering the action we need to use **mapDispatchToProps **function and to get the data from redux store we need to use **mapStateToProps **function.

**Dispatch **is a function that will trigger our actions. We pass a parameter to the reducer.The reducer will use that parameter once the action is triggered.

Using action is quite easy. We just need to define it from props and use it as a function. As you can see in the image above we pass the username state as parameter and call action. This will trigger our action and go to the reducer with the username data.

How To Receive Data From Redux Store?

We have a second page to show user name in another component.

For getting the data from redux store we need to use **mapStateToProps **function. We will get user from state of our store.

And for logout we also define resetUserAction.

Using data from redux store is also quite easy. Like action; just define it from props and use it wherever you want.

Conclusion:

We tried to show and explain how to use Redux in React-Native. Redux may take some time to learn but with practice and time you will master your skills. For more information use can check the Redux documents here.

You can clone this project from *here *via github*.*

MTA Team:

Ali Gümüş Tosun - Semih Sevincli - Aslancan Yılmaz - Burak Arıcı

LinkedIn Accounts:

Ali Gümüş Tosun - Semih Sevinçli - Aslancan Yılmaz - Burak Arıcı

Setting Up Navigation for React Native App

MTA Team — Sun, 28 Jun 2020 20:51:53 +0000

After reading this tutorial, you will have basic understanding about react navigation stack.

Prerequisites :

Android Studio Environment:

You can follow this article’s prerequisites section for setting up Android Studio, JDK & environment variables and creating a React Native project.

Npm Packages :

react-native-reanimated, react-native-gesture-handler, react-native-screens, react-native-safe-area-context,@react-native-community/masked-view, react-navigation

We need to install the dependencies first:

npm i react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

and then:

npm i @react-navigation/native @react-navigation/stack

After you install an npm package, you need to rebuild your project and re-run.

Note that if you currently have more than one programs reading your project files, below command may give error.

cd android
gradlew assembleDebug

If you get any errors,

gradlew clean

and re-run

gradlew assembleDebug

We should import react-native-gesture-handler at the very beginning of our project(App.js or index.js)

Open app.js and in the first line enter:

import 'react-native-gesture-handler';

Then wrap our whole application with NavigationContainer after we import it.

We also need to create a router which will define the screens for our navigation.

App.js

In our router we import createStackNavigator and initialize a stack with that function.

After we initialize our Stack we can call <Stack.Navigator> and create Screens for every page we have in our app.

Router.js

In Stack.Screen we have two required props: name and component.

Name is the string that we will call our screen with, component is the component that will be rendered when we navigate to the screen.

Since we wrapped our whole app with NavigationContainer in App.js file, we can use navigation functions in all pages.

We created a function and called this.props.navigation.navigate(‘SecondPage’);

Note that ‘SecondPage’ is the name of our other Stack screen.

LandingPage.jsSecondPage.js

then:

cd ..
react-native run-android

You can clone this project from here via github.

This was just a setup tutorial, if you want to learn more about react navigation you can find the full documentation here.

MTA Team:

Ali Gümüş Tosun - Semih Sevincli - Aslancan Yılmaz - Burak Arıcı

LinkedIn Accounts:

Ali Gümüş Tosun - Semih Sevinçli - Aslancan Yılmaz - Burak Arıcı

By MTA Team on June 28, 2020.

Canonical link

Exported from Medium on June 28, 2020.

Setting Up Android Environment for Your First React Native Project

MTA Team — Tue, 23 Jun 2020 15:43:34 +0000

If you are interested in developing mobile apps with React Native but have no experience, this guide will let you start.

Prerequisites :

Android Studio :

Just download and install android studio from the link below.

https://developer.android.com/studio

JAVA SE Development Kit:

Again, download and install jdk that matches your system from the link below.

Java SE 13 - Downloads

Adding Environment Variables

After you installed jdk add “C:\Program Files\Java\jdk-13.0.2\bin” at the end of your “Path” variable in environment variables.

Create another variable in environment variables named “JAVA_HOME” with the path “C:\Program Files\Java\jdk-13.0.2”

Your address may differ depending on your installed JDK version.

Check if path variables contain this folder and if not, add following with your username.

C:\Users\Your_Username\AppData\Local\Android\Sdk\platform-tools

Installing React Native

Install react-native with the command below

npm i -g react-native

Creating React Native Project

Go to the directory you want to create project in and create project with the command below

react-native init Example

When we type react-native init Example to command line it will create a folder named Example and create the project inside it. Open your project after it is created.

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

This is our folder structure. App.js is our initial rendered file. So we are going to start from there.

Building Project in Android Studio

Before we try to run our application in our emulator, we need our npm modules and javascript code to be built so android can run it.

Open android studio and select the android folder in your project, open it.

Click make project button or press Ctrl + F9

If you don’t want to use emulator but your android phone,you can follow our article about connecting over usb debugging with cable or wifi without cable here.

Creating Virtual Device

Click tools from the menu in android studio and click AVD ManagerClick create virtual device button

Pick any device and click next

Download any image then click next.

You can create device with the default configurations by clicking finish.

You can start your virtual device by pressing the first icon.

Open your project directory in terminal and run this command

react-native run-android

If you get any of these errors change directory into android and run clean command

cd android
./gradlew clean

If you run this command in android studio terminal, just run

gradlew clean

After cleaning project if you still get these errors, just re run the react-native run-android command and it will work eventually.

* Task :app:packageDebug FAILED

java.io.IOException: Unable to delete directory ……

* What went wrong:

Execution failed for task ‘:app:compileDebugJavaWithJavac’

Our app started.

Thank you for reading. You can follow us to learn more about react & react native development.

Feel free to ask anything about this article if you get any errors. You can contact any of us on linkedin.

MTA Team:

Ali Gümüş Tosun - Semih Sevincli - Aslancan Yılmaz - Burak Arıcı

LinkedIn Accounts:

Ali Gümüş Tosun - Semih Sevinçli - Aslancan Yılmaz - Burak Arıcı

By MTA Team on June 22, 2020.

Canonical link

Exported from Medium on June 23, 2020.