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 (Mar, 2018)
React Native Training @Medium (ongoing)
React Native Coach @Medium (ongoing)
Awesome React Native (ongoing)
How to build from scratch
How to build a news app in React Native (Apr, 2018): Link
React Native Bootcamp (Aug, 2018) This 6 hour bootcamp by Tyler McGinnies 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 - Bootcamp Video 2 - Bootcamp Video 3 - Github repository
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 (Feb, 2018) by Shovon
Adding badges to elements in react-navigation. Link1 - Link2 - Link3
Handle Tab changes in React Navigation v1 (Feb, 2018) by Andrei Pfeiffer
Handle Tab changes in React Navigation v2 (Jul, 2018) by Andrei Pfeiffer
Using refs
- 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
Lottie 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
How to add a SplashScreen to Android and iOS
- How to Add a Splash Screen to a React Native App (iOS and Android) by Spencer Carli (Feb, 2018)
How to create carousel sliders
How to create a ScrollView progress Indicator in React Native by Michael Leung
Custom Scrolling Carousel in React Native by Mike Heavers (May, 2017)
React Native Zoom Carousel by Mike Heavers (Jun, 2017)
Simple Carousel in React Native by Binoy Patel (Jul, 2017)
Pinch to zoom effect
Managing state with Context API
- Replacing Redux with the new React context API (Feb, 2018)
AsyncStorage
- Saving objects using AsyncStorage (Feb, 2018) by Luis Bajaña
Managing offline behaviour
Offline Notice In React Native (Dec, 2017) by Chiamaka Nwolisa
Building Offline First React Native Apps (Nov, 2016) by Spencer Carli.
Handling Offline Actions in React Native (Dec, 2016) by Spencer Carli.
Video
- Video Streaming in Your React Native App (Aug 2018) by Adhithi Ravichandran
Responsiveness && Adapting for Tablets
- Scaling React Native apps for Tablets (May, 2018) by Akshay Kadam
Placeholders
Achieve skeleton loading with React (Jun, 2017)
Push Notifications
How to set-up Push Notifications with OneSignal (Apr, 2018) by Spencer Carli.
How to set up React Native and OneSignal (Apr, 2018) by Endre Vegh.
Deep Linking
Deep Linking with React Native (Feb, 2017) by Ihor Burlachenko.
Handle deep links in React Native apps (Jan, 2018) by Artsiom Staratsitarau.
Android configuration specifics:
- 3 Things to Know About Android as React Native Developer (March, 2018) by Adam @ Desmart.
- Picking your compileSdkVersion, minSdkVersion, and targetSdkVersion 2016 by Ian Lake.
Fonts:
How to install custom fonts in iOS and Android (Jun, 2017): React Native Custom Fonts, by Dave Hudson.
Easiest Way to Load Your Custom Fonts in React Native (Jul, 2017) Link, by Fullsour.
Ultimate guide to use custom fonts in react native (Jan, 2019): Custom Fonts, by Mehran Khan.
Top comments (10)
Thank you. I'm starting a new project with react-native so these resources will be useful. Great!
Great! Check out specially the bootcamp if you are getting started. It solved a lot of doubts when setting up the Native Part with Android Studio and XCode.
Wow thank you, I'm watching it and it's awesome.
I have build a deep learning model of image classifier. I want to build an expo app which could take a photo and geolocation. this image should be predicted through deep learning model. And the result should be displayed on screen. I have no experience in app development and read documentation and watched videos but not able to get my answer. I will wait for your reply
Thank you very much for this plethora of React Native Resources. Many articles, tools, training videos, tutorials, package links, and books to learn React Native from. These resources will definitely help a React Native developer one way or the other. Recommended for beginners.
+1 thanks for the list!
Welcome! :)
Thank you for this list :)
Tremendous list
Thanks