react native

Getting Started With React Native

by •

In 2019, we decided to rewrite our native mobile apps in React Native and needed to get started on the platform quickly. This post is going to focus on what we currently have selected as training steps to get ramped up on React Native whether you’ve used it before or not.

The Basics

There are some things everyone needs to use React Native. This isn’t comprehensive and assumes a certain level of development knowledge, but these are some basics we refer to ourselves when getting started.

JavaScript

If you’re coming into React Native fresh and have no background of JavaScript, you’re going to want to solve that first. We use the paid courses from tylermcginnis.com. These courses are expansive and always up to date. This is great because even if you have already been using JavaScript for a while, you can go back as a reference point and learn even more since last time.

If you want to deviate, there are plenty of courses and references online, including:

TypeScript

Not necessary but recommended (by us), TypeScript is a superset of JavaScript that includes types and compiles to JavaScript. Since it is as simple as that description makes it sound, it is worth learning and it should be quick to pick up.

To show how easy it is, the official documentation even has a TypeScript in 5 Minutes tutorial. If you just went through JavaScript training, the last thing you’re going to want to do is jump into more tutorials, which makes this quick five-minute summary a nice “next step.”

If you happen to be coming off of Android or iOS development to React Native:

It is especially revealing how similar these languages can be when you compare across all three

Kotlin

val occupations = mutableMapOf(
    "Malcolm" to "Captain",
    "Kaylee" to "Mechanic"
)
occupations["Jayne"] = "Public Relations"

Swift

var occupations = [
    "Malcolm": "Captain",
    "Kaylee": "Mechanic",
]
occupations["Jayne"] = "Public Relations"

Typescript

let occupations = {
    "Malcolm": "Captain",
    "Kaylee": "Mechanic",
};
occupations["Jayne"] = "Public Relations";

React Native

I know it sounds too simple, but next up you can learn React Native. There is more you can learn for specific cases (which we will go into below), but you’re ready to go at this point.

You can pick up the React Native official guide to create your first application. This guide doesn’t require you to have knowledge of React beforehand which makes it a great starting point.

If you want to follow along with how we do it, I recommend you at least read over the next section to see what things we use in addition to the basics so you understand the differences.

And More

Everything in this section is less necessary to learn React Native but are additional features or tools we use in our own process. Continue reading to “Get Started” like we have.

React Hooks

React Hooks are a feature that lets you use state and other React features without writing classes (our code is all functional). Though they were recently introduced in React 16.8 (we’re only on 16.12 while writing this), we’re using React Hooks in our code base extensively.

While many comparisons make a point about the cleanliness of a functional component using React Hooks to a class-based React Component, what I ended up liking as a developer is the change in responsibilities of different actions throughout the app. An example of a Stopwatch as a React Component could be:

class Stopwatch extends React.Component {
    constructor(props) {
        super(props)
        this.state = { timeInMillis: 0, running: false }
    }

    onStartPause = () => {
        this.setState(state => {
            if(!state.running) {
                clearInterval(this.watch)
            } else {
                const startTime = Date.now() - this.state.timeInMillis
                this.watch = setInterval(() => {
                    this.setState({ timeInMillis: Date.now() - startTime })
                })
            }
            return { running: !state.running }
        })
    }

    onReset = () => {
        clearInterval(this.watch)
        this.setState({ timeInMillis: 0, running: false })
    }

    render() {
        const { timeInMillis, running } = this.state
        return(
            <div>
                <h1>{timeInMillis}ms</h1>
                <button onClick={this.onStartStop}>
                    {running ? 'Start' : 'Pause' }
                </button>
                <button onClick={this.onReset}>Reset</button>
            </div>
        )
    }
}

In this example, clicking a button calls a function that handles the logic of starting and pausing the timer as well as modifying the state. The state is modified as a secondary action because it needs to be updated so the logic can run appropriately the next time the button is pressed. Switching to React Hooks could yield code like this:

const Stopwatch = () => {
    const [timeInMillis, setTimeInMillis] = useState(0)
    const [running, setRunning] = useState(false)

    useEffect(() => {
        if(!running) {
            clearInterval(this.watch)
        } else {
            const startTime = Date.now() - this.state.timeInMillis
            this.watch = setInterval(() => {
                this.setState({ timeInMillis: Date.now() - startTime })
            })
        }
    }, [running])

    onStartPause = () => {
        setRunning(!running)
    }

    onReset = () => {
        setRunning(false)
        setTimeInMillis(0)
    }

    return(
        <div>
            <h1>{timeInMillis}ms</h1>
            <button onClick={this.onStartPause()}>
                {running ? 'Start' : 'Pause' }
            </button>
            <button onClick={this.onReset}>Reset</button>
        </div>
    )
}

Comparing these two examples doesn’t show a large difference in how much code needs to be written. In both cases, we’re using the same functions and the buttons result in the same outcome. The difference is that the buttons now only call functions that modify the state of the component and as a result of that state change, the useEffect Hook runs. The logic of starting and pausing the timer is separated from any action taken, so onReset now can just modify the state of running and the Hook gets called to clear the watch.

If you’re looking to get started on hooks now, we found that the official hooks documentation is a pretty thorough guide reference source. The “Rules of Hooks” section especially can save you a lot of headaches when you’re starting out.

Storybook

Something I have always liked about Android Studio is how I can easily preview my layouts before writing any code and then, if I’m lucky, I can just drop them in. I like laying out my views as much as I can first before wiring everything up, which is where Storybook comes in.

You can create UI components isolated from your application and structure those into screens. It also extends further by letting you manipulate the values driving the component so you can see how it would behave given states that may not be easily reachable without stubbing out a lot of logic in the code.

Storybook Example

To get started with learning Storybook:

Flexbox

A little off-topic, but a side note is that we use Flexbox for CSS layouts. It’s a straightforward API that handles structuring a layout in most of the ways you’ll want. Taking the guesswork and boilerplate out of laying out components is worth it, especially since it’s simple.

A few good resources we found are:

If you think you can learn it better by visually seeing how it works, Flexbox Froggy is a game that you can use to avoid having to set up an example app.

That’s It?​

Obviously, this isn’t everything you need in the long run. There are plenty of other topics to talk about including GraphQL and testing React Native, but if you went through all these tutorials (including the And More section), you’re (mostly) caught up on how we’re handling React Native.