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

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.

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

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