Full Stack React Native

link Welcome

Welcome to cross-platform app development. With React Native, your apps are platform-agnostic. They can be written for iOS, Android and mobile web with one code base. In this chapter, we will walk through the initial steps to create a React Native application from scratch.

By the end of this lesson, developers will be able to:

• Use the Expo Command Line Interface (CLI)
• Structure a React Native application
• Create their first view
• Install dependencies (with npm or yarn).

link Start it up

These docs are based on the React Native Getting Started Guide guide. Please note that this is under the "Expo CLI Quickstart" tab.

Let's begin with the Expo command line interface.

Expo is a workflow for mobile developers to build React Native apps. It is important to note that while this section uses Expo, Expo is not required.

With Expo, you have access to lots of built-in functionality, provided by the Expo SDK. Without Expo, you can build apps with Native Modules. TL;DR, if you are new to mobile app development, stick with Expo.

Expo Project Lifecycle

The two ways to use Expo tools are called the "managed" and "bare" workflows.

• Source: Expo Documentation

In any case, we shall begin building our app by installing the Expo client, and running the init command:

npm install -g expo-cli
expo init <app-name>

source ~/.bash_profile
expo init <app-name>

In this case, <app-name> will be the name of your app. Please do not name it <app-name>!

Keep in mind, our first app will be a writing prompts app, so try to give it a name that rolls off the tongue (or simply writing-app).

Following the Expo Setup Wizard

Let's create a React Native app using the Expo CLI wizard:

1) Select blank - this is a blank canvas app template.

? Choose a template: (Use arrow keys)
  ----- Managed workflow -----
❯ blank                 a minimal app as clean as an empty canvas 

2) Name your app. Again, do not name it app-name! Typing the full app name will edit it in your package.json file.

{
   "expo": {
     "name": "<app-name>",
     "slug": "<app-slug>"
   }
 }

If you followed these steps successfully, you should have a new app with the following structure:

.
.expo-shared/
assets/
node_modules/
.gitignore
.watchmanconfig
App.js
app.json
babel.config.js
package.json
yarn-error.log
yarn.lock

Once set up, please cd into the app's root directory and run yarn start:

cd <app-name>
yarn start

Great! We are now running our first React Native application.

Our first app will allow users to read prompts and write stories on the go.

Ready to continue building our first view? Edit your App.js to greet your new app:

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Hello World! Welcome to my app.</Text>
    </View>
  );
}

As you may have noticed, this snippet looks like Javascript and JavaScript Elements, or JSX (React).

React Native was built with React developers in mind. The difference is there are not any markup tags such as <div>.

How does React Native work?

React Native provides a core set of platform agnostic, native components like View, Text, and Image that map directly to the platform’s native UI building blocks.

As a result React Native renders fully native components. iOS users will see a UIView and Android users will see a View:

Source

We no longer have to write Swift/Objective-C or Java/Kotlin to produce native apps. We can also utilize web-based tools for faster debugging, such as instant reloading.

Components Deep Dive

What other components can you find that are similar to React? Try digging around the documentation, and see if you can tell which components mirror their web-based counterparts.

React Native Components

link Building Reusable Components

During this course we focus on building reusable components with JavaScript. Let's continue with our first React Native app, a writing prompts app.

By the end of this lesson, developers will be able to:

• Create reusable components with props
• Style components using a custom Stylesheet

First React Native Component

Continuing from chapter one, we will build our first React Native component.

RoundedButton Component

Let's create our first reusable component, called RoundedButton.

For a challenge, try to create your own RoundedButton component. The button should display text inside of a pressable rounded button.

Save the following source code inside ./RoundedButton.js.

import React from 'react';
import { Text, View, TouchableOpacity, StyleSheet } from 'react-native';

export default function RoundedButton(props) {
  const { text, icon, textColor, backgroundColor, onPress } = props;
  const color = textColor || 'white';
  return (
    <TouchableOpacity
      onPress={() => onPress && onPress()}
      style={[
        styles.wrapper,
        { backgroundColor: backgroundColor || 'transparent' },
      ]}
    >
      <View style={styles.ButtonTextWrapper}>
        {icon}
        <Text style={[{ color }, styles.buttonText]}>{text}</Text>
      </View>
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  wrapper: {
    padding: 15,
    display: 'flex',
    borderRadius: 40,
    borderWidth: 1,
    borderColor: 'white',
    marginBottom: 15,
    alignItems: 'center'
  },
  buttonText: {
    fontSize: 16,
    width: '100%',
    textAlign: 'center'
  },
  ButtonTextWrapper: {
    flexDirection: 'row',
    justifyContent: 'flex-end'
  }
});

Import RoundedButton

The RoundedButton component displays text wrapped inside of a pressable rounded button. Let's bring it into our App.js:

Add this import code snippet to the top of your App.js:

import RoundedButton from './RoundedButton';

Display RoundedButton

Enough imports! Let's display the rounded button inside App.js.

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import RoundedButton from './RoundedButton';

export default function App() {
  return (
    <View style={styles.container}>
      <RoundedButton
        text="Next"
        textColor="#161616"
        onPress={() =>
          console.log("Pressed button!")
        }
      />
    </View>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

React Native - Elements and Props

Building apps in React Native allows us to use flexbox to position our elements.

Inside App.js, try setting the justifyContent property to flex-end or flex-start. You may notice the button move up and down.

Also inside App.js, try experimenting with the RoundedButton props, like text and textColor. Set the text property to "Hello!" and textColor property to green!

link App State - Change Background Color

So far our app displays static information. In React Native, components may update their state to display dynamic data.

By the end of this lesson, developers will be able to:

• Use Hooks to modify internal app state
• Create an onPress button interaction

Writing Prompts

The writing prompts app is designed to display random prompts that inspire users to write.

For now, we will display a randomized background color.

App State with Hooks

• Inside App.js, we are going to modify the current source code. The new source code will provide state to our App using Hooks.
• Hooks were introduced by the React team to use state and other React features without writing classes.

Why Hooks?

Prior to Hooks, class components would modify their state using lifecycle methods, such as the constructor and componentDidMount. With Hooks we can achieve the same internal state as class components, with less boilerplate code.

Adding Hooks into the App

Inside of App.js on line one, import the useState method:

import React, { useState } from 'react';

Our App.js will need to initialize it's state with a color string. Let's declare our first hook, to add and modify this property:

// import statements

export default function App() {
  const [color, setColor] = useState('#161616');

  {/* Do not copy below... */}
  return ()
}

Setting Random Background Color

Each time we press the RoundedButton, let's set the background color to a random rgb() value. Here's a function snippet to do just that...

For a challenge, try to create your own randomRgb function.

// Paste this snippet inside App.js, just above the stylesheet.
const randomRgb = () => {
  const red = Math.floor(Math.random() * 256);
  const green = Math.floor(Math.random() * 256);
  const blue = Math.floor(Math.random() * 256);
  return `rgb(${red}, ${green}, ${blue})`;
};

Now let's add the randomRgb function to our RoundedButton onPress method.

import React, { useState } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import RoundedButton from './RoundedButton';

export default function App() {

  const [color, setColor] = useState('#161616');
  return (
    <View style={[styles.container, { backgroundColor: color }]}>
      <RoundedButton
        text="Next"
        textColor="#161616"
        onPress={() => setColor(randomRgb())}
      />
    </View>
  );
}

const randomRgb = () => {
  const red = Math.floor(Math.random() * 256);
  const green = Math.floor(Math.random() * 256);
  const blue = Math.floor(Math.random() * 256);
  return `rgb(${red}, ${green}, ${blue})`;
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Test Random Background Color

Refresh your app and click the "Next" button. If the app's background color changes, nicely done!! If not, debug your code and make sure it matches the above snippet.

Wrapping Up

Today we made an app to display randomized background colors on your mobile device. The next chapter introduces Express, to create a dynamic list of prompts.