React Native Resources
Tags: reactnative, resources, react, javascript
Published: 2018-09-28 10:00:23

---
title: React Native Resources
published: true
description: Here is a list of useful React Native resources 
tags: reactnative, resources, react, JavaScript 

---

This is a list of resources that I have found helpful when building apps with React Native. Some of them are tutorials for beginners and some of them are helpful to troubleshoot on the way. I have written the dates of the articles, usually any articles written before 2017 are not relevant anymore, but some things from 2016 still made it through. I hope some of you will find it helpful as well. 

*Note: This is not a collection of random articles I have found on React-Native but a list of things that I have tested and used in my projects, so I can guarantee that most of it works in versions 0.53 to 0.57, which is the latest version now that I am writing this post.* 

All of these links are for projects done WITHOUT Expo. That is, with the ```react-native init``` command. I would say Expo is a good tool to start, but in the end you will have to get rid of it mostly if you are developing a more professional application that extends beyond learning purposes. 

I really recommend that you have a clear idea of the features that your app needs before starting to implement it (in an ideal world this is the way things are done) because some things will be hard to implement if you don't structure the project in an appropriate way. I have learned the hard lesson by trying to add deep links to my project at the very end. It will be a far more difficult task now than had I taken that into account since the beginning. 

Please let me know in the comments if you have other good free resources. Enjoy!

# General resources

+ [25 React Native Tutorials](https://codeburst.io/25-react-native-tutorials-5b613e3f46ac) *(Mar, 2018)*

+ [React Native Training @Medium](https://medium.com/react-native-training) *(ongoing)*

+ [React Native Coach @Medium](https://blog.reactnativecoach.com/) *(ongoing)*

+ [Awesome React Native](http://www.awesome-react-native.com/) *(ongoing)*


# How to build from scratch

+ How to build a news app in React Native *(Apr, 2018)*: [Link](https://medium.freecodecamp.org/create-a-news-app-using-react-native-ced249263627)

+ React Native Bootcamp *(Aug, 2018)* This 6 hour bootcamp by [Tyler McGinnies](https://TylerMcGinnis.com) will get you set up to start working with React Native, it includes how to set up Android and iOS and link libraries. [Bootcamp Video 1](https://www.youtube.com/watch?v=uO92uyrj7OQ) - [Bootcamp Video 2](https://www.youtube.com/watch?v=uqTe7r-ECzY) - [Bootcamp Video 3](https://www.youtube.com/watch?v=lH2VbX92lUA) - [Github repository](https://github.com/dabit3/react-native-bootcamp)

# React-Navigation

Some of these articles use the deprecated libraries, but are still useful if you just replace the navigator names. (createStackNavigator  instead of StackNavigator and so on...)

+ [How to properly navigate with React Navigation] (https://medium.com/@shovonroy/how-to-properly-navigate-with-react-navigation-e38fe3bf7381) *(Feb, 2018)* by Shovon

+ Adding badges to elements in react-navigation. [Link1](https://github.com/react-navigation/react-navigation/issues/1941) - [Link2](https://github.com/react-navigation/react-navigation/issues/766) - [Link3](https://github.com/yanqiw/react-native-icon-badge)

+ [Handle Tab changes in React Navigation v1](https://itnext.io/handle-tab-changes-in-react-navigation-3717180cddb) *(Feb, 2018)* by Andrei Pfeiffer

+ [Handle Tab changes in React Navigation v2](https://itnext.io/handle-tab-changes-in-react-navigation-v2-faeadc2f2ffe) *(Jul, 2018)* by Andrei Pfeiffer


# Using refs

+ [React Forms: Using Refs](https://css-tricks.com/react-forms-using-refs/) *(May, 2017)*

# Shapes & Animations

+ How to draw shapes with React Native's own version of CSS. [The Shapes of React Native](https://codedaily.io/tutorials/22/The-Shapes-of-React-Native)

+ [Lottie](https://github.com/react-community/lottie-react-native#basic-usage) is a wrapper around React Native that lets you export Adobe After Effects Animations to React Native. 

+ [Expanding and Collapsing Elements Using Animations in React Native](https://moduscreate.com/blog/expanding-and-collapsing-elements-using-animations-in-react-native/)

# How to add a SplashScreen to Android and iOS

+ [How to Add a Splash Screen to a React Native App (iOS and Android)](https://medium.com/handlebar-labs/how-to-add-a-splash-screen-to-a-react-native-app-ios-and-android-30a3cec835ae) by Spencer Carli *(Feb, 2018)*


# How to create carousel sliders

+ [How to create a ScrollView progress Indicator in React Native](https://skillflow.io/tutorials/7/how-to-create-a-scrollview-progress-indicator-in-react-native) by Michael Leung

+ [Custom Scrolling Carousel in React Native](https://medium.com/the-react-native-log/custom-scrolling-carousel-in-react-native-15ee129e7e68) by Mike Heavers *(May, 2017)*

+ [React Native Zoom Carousel](https://medium.com/@mheavers/react-native-zoom-carousel-3546f7e781e5) by Mike Heavers *(Jun, 2017)*

+ [Simple Carousel in React Native](https://blog.binoy.io/simple-carousel-in-react-native-ae71cac279de) by Binoy Patel *(Jul, 2017)*


# Pinch to zoom effect

+ [React Native Apply Pinch to Zoom Effect on Image iOS Android Example Tutorial](https://reactnativecode.com/apply-pinch-to-zoom-effect-on-image/) *(Feb, 2018)*


# Managing state with Context API

+ [Replacing Redux with the new React context API](https://medium.freecodecamp.org/replacing-redux-with-the-new-react-context-api-8f5d01a00e8c) *(Feb, 2018)*


# AsyncStorage

+ [Saving objects using AsyncStorage](https://medium.com/@luisbajana/saving-objects-using-asyncstorage-2d8696275667) *(Feb, 2018)* by Luis Bajaña


# Managing offline behaviour

+ [Offline Notice In React Native](https://medium.com/dailyjs/offline-notice-in-react-native-28a8d01e8cd0) *(Dec, 2017)* by Chiamaka Nwolisa

+ [Building Offline First React Native Apps](https://medium.com/differential/building-offline-first-react-native-apps-b958acac0009) *(Nov, 2016)* by Spencer Carli.

+ [Handling Offline Actions in React Native](https://medium.com/differential/handling-offline-actions-in-react-native-74949cbfabf2) *(Dec, 2016)* by Spencer Carli.

# Video

+ [Video Streaming in Your React Native App](https://hackernoon.com/video-streaming-in-your-react-native-app-feae1c6ae4e2) *(Aug 2018)* by Adhithi Ravichandran 


# Responsiveness && Adapting for Tablets

+ [Scaling React Native apps for Tablets](https://medium.com/react-native-training/scaling-react-native-apps-for-tablets-211de8399cf1) *(May, 2018)* by Akshay Kadam


# Placeholders

+ [Achieve skeleton loading with React](https://codeburst.io/achieve-skeleton-loading-with-react-a12404678030) *(Jun, 2017)*

+ [rn-placeholder](https://github.com/mfrachet/rn-placeholder) 

# Push Notifications

+ [How to set-up Push Notifications with OneSignal](https://medium.com/differential/react-native-push-notifications-with-onesignal-9db6a7d75e1e) *(Apr, 2018)* by Spencer Carli.

+ [How to set up React Native and OneSignal](https://blog.helpfulpeeps.com/setting-up-push-notifications-with-react-native-and-onesignal/) *(Apr, 2018)* by Endre Vegh.

# Deep Linking

+ [Deep Linking with React Native](http://ihor.burlachenko.com/deep-linking-with-react-native/) *(Feb, 2017)* by Ihor Burlachenko.

+ [Handle deep links in React Native apps](https://medium.com/the-react-native-log/handle-deep-links-in-react-native-apps-b22055149b3a) *(Jan, 2018)* by Artsiom Staratsitarau.

# Android configuration specifics:

+ [3 Things to Know About Android as React Native Developer] (https://desmart.com/blog/3-things-to-know-about-android-as-react-native-developer) *(March, 2018)* by Adam @ Desmart.
+ [Picking your compileSdkVersion, minSdkVersion, and targetSdkVersion](https://medium.com/androiddevelopers/picking-your-compilesdkversion-minsdkversion-targetsdkversion-a098a0341ebd) 2016 by Ian Lake.


# Fonts:

+ How to install custom fonts in iOS and Android *(Jun, 2017)*: [React Native Custom Fonts](https://medium.com/react-native-training/react-native-custom-fonts-ccc9aacf9e5e), by Dave Hudson.

+ Easiest Way to Load Your Custom Fonts in React Native  *(Jul, 2017)* [Link](https://medium.com/@fullsour/easiest-way-to-load-your-custom-fonts-in-react-native-d091fb380204), by Fullsour.

+ Ultimate guide to use custom fonts in react native *(Jan, 2019)*: [Custom Fonts](https://medium.com/@mehran.khan/ultimate-guide-to-use-custom-fonts-in-react-native-77fcdf859cf4), by Mehran Khan.