Image for post
Image for post

So you want to learn React Native? Here’s 12 exercises to that will help you do that.

The post is inspired by a free self-paced workshop I’ve created. If you’re interested in guided instructions, solutions, and extra exercises check it out!

Exercise 1: Hello, World!

The classic starter project. Render a square with a background color. Inside of the square render the text “Hello, world”.

Helpful Links

Image for post
Image for post

Exercise 2: Capturing Taps

An app isn’t much if a user can’t interact with it. The most basic form of interaction is capturing a user’s tap (or press) on a screen. …


Image for post
Image for post

v0.59 of React Native is a big deal. It…

  1. Adds support of hooks
  2. Is a big push towards the “Lean Core” initiative
  3. Improves developer tooling

With that, I wanted to spend some time walking through how to upgrade (it’s easy!), how to upgrade in the future, and handling changes.

This post was originally published at React Native School. If you’re interested in learning more about React Native be sure to visit! New articles weekly!

How to Upgrade

React Native is putting its foot down on what the proper way to upgrade React Native is and I’m happy to see the community unifying around one solution. …


Image for post
Image for post
A random image for effect.

Nothing beats getting real feedback from your users — but how should you go about capturing that feedback? In this tutorial we’ll discuss when you should prompt them, how you should prompt them, and what tools you can use to capture that feedback.

This tutorial was originally published on React Native School. Give it a visit if you want to see 75+ React Native tutorials!

I’ve got a pet peeve — when apps ask for feedback/a review at bad times/in bad ways:

  • When I first open the app
  • In the middle of an important action (like checking out)
  • They hijack my screen and don’t let me do anything unless I do their feedback thing

Thanks to Instabug for sponsoring this lesson! If you’re looking for an all-in-one solution to capture user feedback, bug reports, crash reports, and more check them out! …


Image for post
Image for post

Crashes are going to happen. We can try to minimize them but they’ll still happen. When they happen in production what can we do about them? In this tutorial we’ll learn how to detect crashes in React Native and what to do about them.

In this lesson we learn how to handle errors in production. I would suggest checking out react-native-exception-handler as a way to get started with capture errors in all runtimes of React Native.

If you’re ready to go one step further I highly suggest taking a look at Instabug. Instabug provides a platform and tooling to capture and analyze errors in your React Native app, in addition to other things (like capturing user feedback). …


Take a first look at how you can use React Hooks to simplify your animation logic in React Native.

Note: At the time of recording/writing React Native 0.59 is in RC status. As such, to try it out you’ll need to specify your React Native version react-native init MyProject --version react-native@next

Second Note: Hooks are new and I’m new to them too. I may have misspoken multiple times through the video — my apologies! I’m learning them too ;)

This post was originally published on React Native School. For the most up to date article & resources please visit me there! …


A new free class at React Native School

Image for post
Image for post

👋

This month at React Native School is all about debugging your React Native apps!

I’ve just released a new 12 lesson class to help you debug your app, whether the bug is happening in development or production.

We cover:

  • Tools
  • Strategies
  • Techniques
  • Tips
  • Tactics

I’m also happy to say that this course is 100% free forever! Thanks to Instabug for making this possible.

Instabug provides tooling for you to capture in-app feedback, bug reports, crash reports, and error reporting! It’s been a great tool to work with and provides some immensely valuable insights into your production applications.

In the class we’ll actually look into using Instabug to handle some of our production debugging needs. …


It can be pretty easy to write code — but how do you organize it?

I’ve worked with dozens of developers working with React Native and have seen a variety of ways of organizing code. From putting everything into one file to files that have less than 10 lines on average.

In this tutorial I want to give you a balanced approach. A way to organize your code so it’s easy to work with and maintain but not a burden to manage/stick to.

Overall Project Structure

We’re just covering the UI components in this tutorial but I want to give an overall look at how my React Native projects are typically structured. …


Learn how to upload images in your React Native apps to create better user experiences.

Image for post
Image for post

Images add another dimension to a mobile app. User-generated images amplify that.

If you’re building a React Native app, how do you give your users the ability to upload images? React Native has polyfills for many web APIs — to do image uploading we’ll be using the fetch API.

Setup

Before we can actually start uploading images, we’ll to create two projects:

  1. A React Native app
  2. A basic node server (so we have somewhere to upload the photo to)

React Native App

Note: This tutorial assumes you already have React Native installed on your machine.

We‘ll be doing a few things here:

  1. Creating a directory for both of our apps to live…


Image for post
Image for post

Internet connection speeds are variable, especially when you’re working with mobile devices. As developers we often forget that many of our users are running our apps on less powerful devices and with slower internet connections than we are. Go out into the mountains and try to access your app and see how it performs.

One of the more expensive things in an app is the remote images you’re loading. They’re going to take time to load, especially if they’re large images.

Today we’ll build a component that allows us to:

  1. Pass a full size image to display (just like a normal Image


Build an Instagram style animated heart when liking a picture

When you like a picture on Instagram a heart quickly scales and fades in over the image you liked — how would we go about accomplishing the same in React Native? In this quick tutorial we’ll cover exactly that.

Image for post
Image for post

Getting Started

This tutorial builds on top of a previous tutorial in which we implement a double tap component.

To get started, create a new project with Create React Native App.

create-react-native-app AnimatedImageOverlay
cd AnimatedImageOverlay

Next, download the following zip file, unzip it, and place it in your new React Native project. Make sure to name the directory src.

Starting zip

Then update App.js to…

About

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