Starting to learn React-Native #01

Hello, folks!

After great procrastination, I finally wrote my first post sharing my progress on React-Native.

This text is based on Lex Lemmens's post at:
https://medium.com/swlh/writing-your-really-first-mobile-app-in-react-native-simple-to-do-app-e67f875f0721

I'll use his tutorial to create my version of a To-Do App for iPhone.
The content may differ due to the version of some components.

So, let's start:

My config:
MacBook Pro 2010 (Core 2 Duo 2,4GHz)
macOS Sierra (10.12.6)

Requirements:
• iPhone
• Expo App
• IDE/Editor (I will use VSCode)
• Basic knowledge of macOS and Terminal app

First of all, we need to install npm which is installed with Node.js.
So, let's access www.nodejs.org and download node.

Click on the downloaded installation package and follow the on-screen instructions.

After that, open Terminal app and type the following commands to check if everything was correctly installed:

$ node -v
$ npm -v

Then install Expo (a software which will serve our new application to the Expo app on iPhone) by typing:

$ sudo npm install -g expo-cli

Create a folder to keep our projects and enter in it:

$ mkdir React
$ cd React

Then create a new project using:

$ expo init ToDo

Choose "minimal" to create a default template.
Set the "name" and "displayName" of the project.

Navigate to the new project folder:

$ cd ToDo

And start the project server:

$ expo start

Your default web browser will open and the expo server will start running.

Open your iPhone camera app and point it at the QR Code on the lower-left corner.
Click on the notification at the top of the screen to open it in the Expo app.

Wait a few moments for the first build to finish and a blank screen with an example text appears.

Now that we have our app running, let's open the App.js file with your favorite IDE.
Start by cleaning the template file like the code below.

App.js - Clean code

Let's add a gradient color on the background and change the status bar to a white text color.
To do that, import "LinearGradient" and "StatusBar" and add the following code:

App.js - Adding some color

The "style={{ flex: 1 }}" code is to ensure that the gradient will cover the whole screen.

Creating the text inputs

The next step is to add text inputs where people will type the To-Do title.

App.js - Creating and styling the Text Input

Don't forget to import "TextInput".
The <View> section is the React Native correspondent to HTML <div>.
The "styles" section is very similar to CSS.
The options set in the TextInput component are called "props" in React Native.
Read more about them in the official documentation:
https://facebook.github.io/react-native/docs/textinput.html#props

This is how it should look now:

Text Input

The app logic

Now comes the part that will make our app come to life.
The best way to define the logic is by splitting it into little steps.

1. A variable (state) that holds the text input value should be empty by default.
2. The variable should change its value while the user is typing.
3. After pressing enter (done) the text input value should be added to a list and be reset to a default empty value.
4. By hitting the delete button the item is removed from the list.
5. By hitting the edit button the user should be able to edit the entry.
6. By marking the checkbox the item should be strikethrough.

Let's start:

First, we should create and variable (state) with an empty default value and define that the text input component will use this state to hold its value.

App.js - Setting state to default empty value

Notice that we create a "state" and add a "value" prop in the text input component.

Second step

Now we have to update the state when the user is typing.
To do that we will use the "onChangeText={this.changeText}" prop, which will call the onChangeText method. This method receives the new value and set the new state of inputValue.

App.js - Update inputValue with TextInput value

Third step

When you hit done, the content should be stored in an array and showed on the list.

App.js - Showing the list of saved items when hitting "done"

We create a new "todos" array in the state.
There is where our To-Do items will be stored.

We also added an "onSubmitEditing" prop in the Text Input that will call the "addItem" function. That function adds new items to the "todos" state.

But why did we use concat() instead of push()?
Because of the immutability of the state.
The concat() doesn't modify the array but creates a new one.
Read more at:
https://medium.com/javascript-in-plain-english/how-to-add-to-an-array-in-react-state-3d08ddb2e1dc

In the render function, we've added a variable "todos", that will map the whole array to rows with a side checkbox button (we need to import "TouchableOpacity" to make the button touchable). This variable is displayed in a <View> after the Text Input.
The concat() has been used here again because it's necessary to create a new array before we can reverse() the order. Otherwise, it will keep reversing as you type.

That's how it looks right now.

Items on the list

I'll be back!

I hope you are enjoying.
The other steps of the logic will be described in the next post.
If you have any questions or suggestions, feel free to contact me.

Thanks for reading.

Comments

[BrunoSanta]

nice and well put subjects.
appreciate it dude.

[Victor Macarios]

Thanks man!
I hope it could be helpful for your knowledge as well.