DEV Community: Mauricio Trejo

From Zero To React Native Hero PT2: Building our app's core💥

Mauricio Trejo — Fri, 29 May 2020 18:10:57 +0000

At the first part of this guide we figured how to run our very first React Native application and learned about some fundamental concepts for building our user interfaces. You can check it here: Running our first RN app.

As said in this post, this full guide will cover these:

Initial React Native project configuration
React Native Navigation
Redux
Firebase Firestore

First step is already completed, as we built our ReactNativeNotes project and deployed it to our devices for the first time. Now we need to understand how or initial project is configured in order to finally start the coding part.🤓

We'll work this guide to get this:

For starters, it's extremely important to understand how our project is configured. With our initial configuration, our root directory looks like this:

We can see we have three initial folders inside:

🗂 ReactNativeNotes
 📁 _tests_
 📁 android
 📁 ios
 📁 node_modules

🧐 Important note: Both ios and android folders are projects by theirselves, android folder can be opened in android studio. For ios we can open .xcodeproj or .xcworkspace in Xcode. I recommend to use .xcworkspace as it doesn't present problems for running our project. If this file doesn't exist yet, you need to install Pods to your iOS project.

The node_modules folder contains every package we have installed and is necessary for running our app. Its content is built after the package.json file. Every external dependency we install using a package manager like yarn or npm will be reflected in this file under the "dependecies" section. This is how our package.json looks like right now:

Next important file is index.js located at the root of our project:

This file is what the bundler will be looking for to compile our application. As we can see, the method registerComponent is used to define what will be compiled, receiving as first parameter the name of our application and as second parameter our main component, which in this case is our App component imported from our App.js file.

Once these things are noted, we'll get our hands on the code!👨‍💻

Coding! 💻

First thing will need to do is creating a new directory at the root of our project, we'll name it src. Inside this folder we will create three more folders, the first one will be named components, the second one will be named screens and the last one will me named utils. Our new project structure should look like this:

We did this in order to organize our project classifying which components will serve as screens and which ones will be to build a specific part of our UI.

Let's start with our screens. Create a new folder inside src/screens/ named notes. Here you'll create two files: index.js and styles.js

Now we are finally going to start typing. At index.js you'll need to add this:


import React, { Component } from 'react';
import {
    SafeAreaView,
    View,
    Text,
    StatusBar,
} from 'react-native';

const initState = {
}

class NotesScreen extends Component {
    constructor(props) {
        super(props)
        this.state = {
            ...initState
        }
    }


    render() {
        return (
            <>
                <StatusBar barStyle="dark-content" />
                <SafeAreaView>
                    <View style={{ justifyContent: 'center', alignItems: 'center' }}>
                        <Text>My notes</Text>

                    </View>
                </SafeAreaView>
            </>
        );
    }
};


export default NotesScreen;

With this lines of code we will initiate our main screen using a class component. Now it's a good idea to take a look of the types of components we'll be using. 🧐

Components 📌

As said before, the magic of React Native is that it is all about components. We need to understand that each of this components has its own lifecycle from the moment it is "summoned" to our screen. We'll take a quick look to the lifecycle methods we'll use:

constructor(): This is the first method to be executed when calling a component. Here's where we usually set all variables and also fetch all external data we'll be using within our component.
render(): This method is executed after constructor. It is in charge of displaying our UI.
componentDidMount(): This method is executed after rendered, and its execution is constantly active. It can listen to changes within our component and is regularly used to set events that will be used along the whole component lifecycle.
componentWillUnmount(): This method is executed when the lifecycle of our component reaches its end.

Now it's important to understand that we can use two types of components:

Class Components: This type of components provide an easier way to handle our lifecycles, we can use every method from a component inside this type. We'll be using this type for the our screens.
Functional Components: These are plain javascript functions which return a JSX structure. We'll be using them to render specific parts of our UI where we don't really need to deal with lifecycle methods.

❗️We can handle component lifecycles in Functional Components using React Hooks. You should take a look at that.

Let's change our App.js file!

App.js contains a functional component named App, which will return a JSX structure. This JSX structure is our NotesScreen from screens folder.

After doing this, your app should look like this:

Great! We've learned how to import a component and render it inside another one.🤓 Now it's time to build our user interface with styles.

Go to utils folder and add two files called colors.js and globalStyles.js. We'll use this to centralize our styles in a certain location and make it easier to manage within our components, this truly helps when building large scale applications saving a lot of time of copying and pasting code:

Now let's go back to our notes screen folder and update both index.js and styles.js to the following:

📌 A state in React is an object which belongs to our components context, it is composed by the "variables" we'll be using within this context. Its values can be modified by using setState() method.

Now our screen now looks like this:

It's looking kinda better isn't it!

Let's understand the code above:

// IMPORTS SECTION

import React, { Component } from 'react';
import {
    SafeAreaView,
    TextInput,
    View,
    Text,
    StatusBar,
    TouchableOpacity,
} from 'react-native';

// Importing Styles
import styles from "./styles";
import globalStyles from "../../utils/globalStyles";

The first block of code is about importing everything we'll need to build our interface. We import the components we'll need from react-native to build the structure of our UI, and import styles to customize and adapt these components to our needs.

_textChangeHandler = (text) => {
    this.setState({ newNote: text })
}

<TextInput
    style={styles.input}
    onChangeText={text => this._textChangeHandler(text)}
    multiline
    placeholder={'Write your note here'}
    value={this.state.newNote}
/>

TextInput component receives multiline prop to allow writing on multiple lines inside, an onChangeText props which receives _textChangeHandler function, this function sets newValue state value received from function's call.

_clearNoteHandler = () => {
        this.setState({ newNote: '' })
}

_saveNoteHandler = () => {
        const notes = this.state.savedNotes // create copy from current state value
        notes.unshift({ note: this.state.newNote, done: false }) // set new note to the top of the array
        this.setState({ savedNotes: notes, newNote: '', notesFlag: !this.state.notesFlag }) // set states with update values
}

<TouchableOpacity onPress={this._clearNoteHandler}>
       <Text style={styles.clearButtonText}>Clear</Text>
</TouchableOpacity>
 <TouchableOpacity
       style={this.state.newNote === '' ? styles.saveButtonDisabled : styles.saveButton} 
       disabled={this.state.newNote === ''}
       onPress={() => this._saveNoteHandler()}
       >
       <Text style={styles.saveButtonText}>Save</Text>
</TouchableOpacity>

We created our buttons using TouchableOpacity components, these receive onPress props to perform actions once tap on them. Clear button receives a function which sets newNote state to an empty string and save note button receives a function which adds the newNote value to the current notes and then updates states values.

❗️❗️Note: Functions inside a class component must be called with prefix "this." to be referred. The same applies to state values, this is necessary because these are part of this class component context.

Next step is showing saved notes array. We'll use Flatlist component to render our savedNotes state. Add FlatList to react-native imports at the top of our file, then add the following code at notesContainer View:

 <FlatList
     extraData={this.state.notesFlag}
     data={this.state.savedNotes}
     style={{ width: '90%' }}
     keyExtractor={(value, index) => index.toString()}
     renderItem={value => 
          <NoteComponent 
               note={value.item} doneHandler={() => this._checkDoneHandler(value.index)} 
               removeHandler={() => this._removeNoteHandler(value.index)} />
            }
/>

Flatlist component receives some interesting props: data prop is the current data we'll be rendering, extraData prop is necessary in case the data we're currently rendering presents any changes, we update this flag to indicate Flatlist musts re render its content. KeyExtractor prop defines a unique key for each data value. renderItem prop receives a function which must return a JSX structure, in this case we'll be using a customized component which we must import at the top of the file.

We'll be able to mark our notes as done and remove them from our list, therefore we'll use these next functions to handle our note card actions:

_checkDoneHandler = (index) => {
        const notes = this.state.savedNotes
        if (notes[index].done) {
            notes[index].done = false
            notes.unshift(notes.splice(index, 1)[0])
        }
        else {
            notes[index].done = true
            notes.push(notes.splice(index, 1)[0])
        }

        this.setState({ savedNotes: notes, notesFlag: !this.state.notesFlag })
}


_removeNoteHandler = (index) => {

     Alert.alert(
         'Warning!',
         'Are you sure you want to delete this note?',
         [
           {
              text: 'No',
              style: 'cancel'
            },
            {
              text: 'Yes',
              onPress: () => {
                   const notes = this.state.savedNotes
                   notes.splice(index, 1)
                   this.setState({ savedNotes: notes, notesFlag: !this.state.notesFlag })
                 },
             },
          ],
          { cancelable: false }
        );
    }

_checkDoneHandler function receives the selected index and checks wether it was already checked or not and changes it position in both cases. _removeNoteHandler uses another component called Alert which allows users to decide if they want to perform the action or not. If it is accepted, this function will remove the element from the position received from call.

As NoteComponent is a customized component, it will also receive customized props which will be passed at its invocation: note prop is the current data value to be rendered by our customized component, removeHandler and checkHandler are the functions already discussed above.

Let's build our NoteComponent to finally render our notes.💪

Create a new folder inside our components directory named note. Inside this folder create two more files: index.js and styles.js, just like before. These files will look like this:

We use a functional component, which only return a JSX structure. Our structure is designed to build a card like this:

In order to use those styled checkboxes we'll install a UI library called react-native-elements.

Run in terminal yarn add react-native-elements. After we've finished installing, we'll be able to use its checkboxes importing them like this:

import {CheckBox} from 'react-native-elements'

We'll render the card and wrap our notes content inside a <Text> tag by calling the object note from props object:

<Text> {note} </Text>

🔎 To use normal javascript inside a JSX code block, it's necessary to use { _our javascript code_ }.

Once our component is done, both index.js should look like this:

NoteComponent:

NoteScreen:

Now we're finally able to run our app getting this result:

We've covered a lot of new concepts in this guide which are the basis to build almost every user interface. Next part will be about storing our notes to our cloud database with Firestore.

Here's the link to this repo if you want to check it out. Leave a comment if you had any problems, doubts or just say hi if you want to.🤓

Keep in touch for the coming parts of this guide.

Thank you for reading!!

From Zero To React Native Hero PT1: Running our first app💥

Mauricio Trejo — Tue, 26 May 2020 18:21:56 +0000

React Native is a useful tool to develop applications for both platforms iOS and Android. My experience using it has been quite fun despite of all the time I've spent facing multiple errors caused by myself by not reading the documentation properly.🤣 So I'll do my best to give you a nice and simple walkthrough this wonderful journey of hybrid mobile applications development.

We'll go step by step from zeros to heroes by developing a simple mobile application to save notes.📋 Firebase will be the main tool for every backend process and we'll use Firebase Firestore as our database and the Firebase Authentication feature.

This guide will cover:

Initial React Native project configuration
React Native Navigation
Redux
Firebase Firestore

Previous React Native development environment setup is necessary to follow the steps on this post.

Let's get to it🤖

Creating our app

We'll create our React Native Notes application by opening the terminal at the desired project location and running the following:

$ npx react-native init <ProjectName>

Replace <ProjectName> with the name for your project. I'll go with ReactNativeNotes. It is very important to follow the camelcase format for our project's name.

This command creates a brand new directory at the selected location which contains our new react native project. When it is done, your project's structure should look like this:

To start running our app we'll go to our terminal and we'll run the following commands:

For Android:

npx react-native run-android

This will make the android building process and once it is done, if no device is selected it will open up the default emulator configured on Android Studio.

To run RN on a physical device you only need to plug your device to the computer and grant access permissions. Then run the command above and it will build it to the target.

Tip 🧐: To make sure of which devices we'll be targeted on the deployment you can run adb devices. It will print a list of devices attached to the server and ready to run the app.

For iOS:

The process for running a RN app on iOS might be take a little longer. The easiest way to make it is by going to the ios folder inside our project's directory and open the ".xcworkspace" file:

Once Xcode is opened, we go to the top of the window, we select our target device (it can be a physical device connected to the computer or an emulator), and press the play button.

When building the app you'll notice a terminal window will pop up with some weird stuff on it. This window is our node metro bundler, React Native uses this to compile our JS code to the selected target and be able to run it. It should look like this:

❗️Note: You can start this metro bundler by running npm start at the terminal before running the app to the selected target. This can also be used as the console for debugging if necessary.

Once the building process is done, the targeted device should open the application rendering the default RN initial template:

And just like that we've built our first initial React Native application
ready to be deployed both to iOS or Android. Not bad, huh?🤓

The code for this template is located at App.js file at the root of our project's folder. Our file would look like this:

At the beginning I had no clue of what did all of those tags, variables and imports meant 🤯, but after struggling with it for a couple days I understood the necessary:

React Native uses JSX and Components

The easiest way to understand how RN manages its interface structure is to compare it to HTML tags. This tags are used to provide a hierarchical order to our project's structure. RN uses JSX to manage its own tags, known as Components.

React Native is all about components, they go from the simplest ones that help you build a container to the ones you build by yourself. Everything should be wrapped inside a component's open and closing tag, or closing tag by itself.

The react-native package provides you with basic fundamental components we can use to build our own personalized components.😎

At our current App.js file we find Components such as <View> <Text> <Scrollview> <StatusBar> and others.

Let's understand some of these:

<View>: This one is the most fundamental for building user interfaces with RN, it is a container that can be nested inside others to build our UI structure.
<Text>: This is the component provided by react-native for displaying text into UI. Every text we want to present on the interface must be wrapped around this Text tags.
<SafeAreaView>: This is commonly used as the main wrapper component for the whole application. It provides a View which renders our UI only within the safe area boundaries of our devices. This is useful for the latest devices with notch integrated and bottom hand gestures.
<ScrollView>: This component provides a scrollable container for the content inside itself.
<FlatList>: This renders a basic flatlist. Using this component we can go over an array and render each value.
<TouchableOpacity>: This is a container which allows the usage of onPress prop, for representing a functionality of a button. This component is used rather than <Button> because it is highly more customizable.

Each of these components can be adapted to our needs through passing props, which allows us to handle things like styles and data sources among others.

For the task of styling our components, and by styling we mean defining background colors, fonts, container sizes, display directions and that sort of stuff, we'll use React Native's Stylesheet to create our own styles. These are defined by objects similar to regular CSS classes, the main difference is that RN Stylesheets use camelcase syntax for each objects property.

❗️Remember to import every component you will use from react-native at the top of the file.

Let's see an example using the things we talked about above:

The output for this code will look like this:

As you can see, we built a component which renders a simple (and kinda ugly) interface where we can clearly identify the structure we defined at the code:

const App = () => {
  return (
    <>  // One Fragment wrapping the whole content
      <StatusBar barStyle="dark-content" />
      <SafeAreaView> // Prevents the UI to render outside device's borders
       //We use "style" props of each component to set its own customized styles
        <ScrollView
          contentInsetAdjustmentBehavior="automatic"
          style={styles.scrollView}> 
          <View style={styles.body}> 
            <Text style={styles.text}>Hello RN world!</Text> 
          </View>
        </ScrollView>
      </SafeAreaView>
    </>
  );
};

const styles = StyleSheet.create({
  scrollView: {
    backgroundColor: '#000000',
    height: '100%',
    padding: 15
  },
  body: {
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    color: '#FFFFFFF',
    fontSize: 20
  }
});

An important thing to notice about what we've just built is how <SafeAreaView> covers the whole screen but it only allows rendering within its own limits, that's why we see those white borders at the top and bottom of the screen and then we wrap our content inside a <ScrollView> in order to prevent overflowing.

📌 Important: Every render method must return only one parent component, this parent may have as many child as you need but at the top of the structure it must be only one. To help us accomplish this we can use these things called Fragments as we see on the code above, which are represented as <> </>.

These are the basic elements we need to build our application interfaces, feel free to play around with what we've learned because these are the foundations of our coming ReactNativeNotes app.

We'll begin developing our app on the next post, go check it out and stay tunned to go over this journey together.👨‍💻

Thanks for reading!