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

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

• @testing-library/react-native
• @testing-library/jest-native
• Code from Video

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

• @testing-library/react-native
• @testing-library/jest-native
• Code from Video

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.

Tools

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

server.js

…

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.

Example

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…

In this video we’ll learn how to replace a state change for a liked/unliked stated with a lottie animation.

Lottie: https://github.com/lottie-react-native/lottie-react-native

Lottie File: https://lottiefiles.com/44921-like-animation

Code: https://github.com/ReactNativeSchool/lottie-like-animation

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