Making a simple math learning application with React Native – Part 2

Tram Ho

Initially, when I launched the first article on making a simple math learning application, I did not think I would continue writing Part 2! ^. ^. But I myself found that the app has a lot of directions for development so feel free to code more, so it’s also convenient to write part 2 for it: v. So from now on, I will start this series, turn an app that looks like nothing, but it is actually empty (joking: v), over time, I will gradually apply the techniques in React. Native that I was exposed as Notifications, Authentication, Biometric, etc. and clouds …

I think the introduction should be enough, right: 3, let’s start now

1) Install

In this article, there are two things I will add to the app, as well as help you continue to familiarize yourself with the most basic things in React Native, namely @react-navigation/native and mobx , where @react-navigation/native used to switch between screens, while mobx used for state management (for new friends, mobx is not a bad choice to start learning about managing state)

mobx : https://mobx.js.org/README.html#getting-started , https://reactnavigation.org/docs/getting-started

2) react-navigation / native

We will edit some files and create some new files, the first is App.js ,

Here I have created 1 Stack Welcome, the goal is to contain 3 other sub screens, including welcome, practice and failed

WelcomeStack.js here: v

For the sake of further development, the names of the monitors, or the Stack, I will inform into a common file named route.js as above, you should also have a reasonable folder and file arrangement layout. so that later if the project is enlarged, there is no need to rearrange. You can refer to your route.js file:

Next are 3 files respectively welcome.js , practice.js , failed.js

Also, in this update, I also applied a basic React native animation, but since it’s a pretty interesting and interesting topic, deserving a separate article, I won’t write it here.

In this file, if you pay attention to read a bit (if not read okay, just a bit of error when running it) will see mobx and PracticeStore have been added, I’ll talk about it in the next section.

Note: If during the copy paste, you have discovered a strange library, then please help me: 3

In the 3 files above, except for the animation and mobx , just the UI update for the app is more beautiful and feels closer to the user only. So I will not explain much about these 3 files

3) mobx

mobx if you’ve ever done through redux , the purpose of it is also to manage the state in the store effectively. Let’s take a quick look at the PracticeStore.js file

If you read carefully, you will see that the variables decorated with the keyword are observable , what does that mean? It can be said that observable similar to the state in React, when the variable decorated by observable changes the value, it will cause the Component that uses them to be re-rendered, provided that the Component must be wrapped by observer like this export default observer(Component) . For functions that get data, it will be decorated as computed , and functions that affect and handle observable variables will be decorated as action . It sounds simple, right? If you have used Redux , you will see mobx compact mobx is, or if you have not read it, read through your comparison written earlier, link here

You can read more information about mobx in its homepage.

4) Finish

So we have finished updating the math app, now let’s look at its shape.

When I first came in

Click the play button

Win 2 sentences and get 2 points)

Go to the 3rd sentence, it will be lost

My article here is over, hope to see you in part 3, thank you for taking the time to read my article.

Share the news now

Source : Viblo