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

When things start to get weird/unexpected what do you do? Track down how to clear each one of those folders? Just clear one out?

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…

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?

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!

These…

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. …

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

Originally published at https://www.reactnativeschool.com.

Want to further level up as a React Native developer? Checkout React Native School! Numerous articles, classes, and a private community.

React Native Bootsplash

Originally published at https://www.reactnativeschool.com.

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…

Theme

• 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 {
  StyleSheet,
  Text,
  View,
  SectionList,
  SafeAreaView,
  Image,
} from 'react-native';

const ListItem =…