This is a quick walk through of a simple starter template for Expo projects.

This post was originally published on React Native School. Be sure to visit for more React Native tips, tricks and tutorials!

It works on iOS, Android, and the web.

It includes:

  • Navigation (with React Navigation v5)
  • Testing (with Jest and React Native Testing Library)
  • Code Formatting & Linting (with Prettier and ESLint)
  • Project Structure
expo init --template @react-native-school/expo-template

Why this Template?

I’m not big on large…

Photo by @sigmund.

Things can get… funky in React Native. Here’s how to start fresh and reset a React Native app cache.

There are a lot of things in play in a React Native app including:

  • NPM/Yarn
  • Cocoapods
  • Watchman
  • Metro bundler
  • React Native
  • iOS Build
  • Android Build

Here’s the easiest method…

How to Use React Native Clean Project to Clear Your React Native App

React Native Clean Project is a CLI plugin that will clear out all the things that could be causing you grief with your React Native app.

First, install…

Photo by Barth Bailey.

Fetching data from a remote source is a must in just about every app you’re going to build. Unfortunately, fetching data is rarely as simple as just fetching the data and rendering it. A few things to consider:

  • What do we do when we’re waiting for the data to load?
  • What if an error occurs?
  • How do I keep my data up to data?
  • What if my user has a poor/slow internet connection?


Photo by @donramxn.

Reanimated 2 is a hyper powerful library that all the cool kids use but has always been a bit of a blackbox to me… I saw the power of it but was overwhelmed by the API.

This post was originally published on React Native School. If you’re interested in hundreds of React Native tutorials and courses be sure to check it out!

Today I want to share with you what I’ve learned and we’ll create our first Reanimated 2 animation together — an image that changes sizes.

Let’s start with an app that renders a 100x100 image. …

Photo by @floriankrumm

Learn how to use the core TextInput component to capture user input via the keyboard.

Originally published at

If you’re coming into React Native development from a web background you may be intimidated by using a full blown IDE like Xcode. Today I’d like to give you a run down of how to use this super powerful tool.

You won’t need to use it often but, as they say, knowledge is power! Let’s get to it.

First let’s get a rundown of the main areas of Xcode.

I spend a lot of time working with Rfeact Native. My primary interface with my code is Visual Studio Code. The most common question(s) I get on my YouTube videos are always related to my editor…

“What theme is that?”

“How did you get it to autocomplete like that?”

Here are your answers…


  • Night Owl — Absolutely fantastic theme available just about everywhere (I also use it in iTerm) and with a light and dark mode. …

I use Spotify a lot. In the mobile app the home screen allows you to scroll both vertically (across different groups) and horizontally (within a group). Here’s how I do the same in React Native.

Below is a demo of what we’ll end up with. It allows you to render a section’s data either horizontally or vertically.

Starting Code

The following code allows you to render a standard list of sections (all vertical).

// App.jsimport { StatusBar } from 'expo-status-bar';
import React from 'react';
import {
} from 'react-native';

const ListItem =…

In this video I walk you through 3 different ways you approach writing tests in your React Native app when context is involved.

Spencer Carli

Student. Teacher. Pizza fiend. I write about React Native, Meteor, and more.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store