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…


  • 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 = ({ item…

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

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

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

In this tutorial we’ll cover how to upload an image from a React Native app to a remote server.

This is just a high level overview. If you want details (upload progress, setting up a server, multiple images, etc.) please check out our class on Uploading Images in React Native.

With that said, let’s get into it.


  • react-native-image-picker. Allows us to access the library of images or the camera.
  • Express + multer: Create a server that can accept image uploads. However you setup the backend the process will be extremely similar.

The Code

Explanation of code below.


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

Problem: You have a stack navigator inside a tab and, when going to a different tab, you want to reset the stack navigator inside the tab you just left.


import * as React from 'react'; import { View, Text, Button } from 'react-native'; import { NavigationContainer } from '@react-navigation/native'; import { createStackNavigator } from '@react-navigation/stack'; import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; import { CommonActions, StackActions } from '@react-navigation/native'; function HomeScreen({ navigation }) { return ( <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}> <Text>Home Screen</Text> <Button title="Details" onPress={() => navigation.push('Details')} /> </View> ); } function…

I’ve spent a lot of time primarily working on the frontend of mobile apps and in that time I’ve absolutely loved when I could work with a GraphQL API.

So, when I decided to start building a full stack open source trivia app for React Native School, I decided that I would be using a GraphQL API via Apollo Server.

But when I started looking at it and my desired hosting options I got confused…

What’s the difference between apollo-server, apollo-server-express, apollo-server-lamda, apollo-server-*?

The docs cover it but I didn’t find an answer immediately when I searched for the answer…

Spencer Carli

Student. Teacher. Pizza fiend. I write about React Native, Meteor, and more. http://learn.handlebarlabs.com

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