You will learn React Native.
If you write React Native tutorials, please add them here!
Index
- Official Documentation
- Community
- Cheat Sheets
- Docs
- Great Sites
- Overview of React Native
- Bridging into Native Codebases - iOS
- Bridging into Native Codebases - Android
- Navigation and Routing Overview
- Flexbox Model
- Styling
- Animation Overview and Examples
- SVG and D3
- Gestures
- Networking
- Basic React Native and Component Usage
- React Native APIs
- Custom Components and Cool Shit
- Map Views
- Project Setup
- App Structure
- App Launch
- Offline
- Testing
- Debugging
- Crash Reporting
- Chrome Dev Tools
- Versioning and Upgrading
- Configuration
- Optimizing and Performance
- Async and Middleware
- Storage and Persistence
- Local Files
- Dependencies and Frameworks
- Asset Management
- Javascript
- Javascript Core
- Responsive Layouts
- Push Notifications
- Migrating to React Native
- Opinions
- Reflections
- React
- React Fiber
- Redux
- mobX
- GraphQL
- Apollo React Native
- Relay
- Realm
- Flow
- Expo
- Typescript
- Bucklescript
- ReasonML
- Authentication
- Native APIs
- Webviews
- Deep Linking
- Known Bugs
- React Native on the Web
- React Native Windows Platform
- React Native tvOS
- React Native Amazon Fire
- Clojurescript
- Elm
- FSharp
- Golang
- AWS
- Starters
- Dev Tools
- VSCode
- Code Push
- Continuous Integration / Deployment / Delivery
- Installing SDKs
- Patents
- Talks
- Tutorials
- Video Tutorials
- Sample Apps
- Podcasts
- Jobs
- Books
Official Documentation
| Title | Type | Resource Rating | Description |
|---|---|---|---|
| React Native Website | Website | β β β β β | The official React Native Docs and reference aka the good shit. Your primary reference for everything |
| React | Website | β β β β β | The official React Docs. Use to learn React |
| Redux | Gitbook | β β β β β | Read this to learn Redux |
Community
| Title | Type | Resource Rating | Description |
|---|---|---|---|
| React Native AMA | React Native team takes questions about React Native | ||
| React Native Roadmap | |||
| React Native Product Pains | Website | If you have a problem with React Native, post it here. Good way to check out the biggest sentiments currently on React Native | |
| React Native in the Community | Github | A list of community-built React Native contributions. | |
| React Native Newsletter | Newsletter | ||
| Online meetups | |||
| StackOverflow | |||
| Discord | |||
| React Native Wiki | Has a roadmap section to show the future of react native development | ||
| Use React Native Website | Website | Website works similarly to this project | |
| Reactiflux | Website | ||
| React Native Gallery | Website |
Cheat Sheets
| Title | Type | Resource Rating | Description |
|---|---|---|---|
| Reach Native Styling Cheat Sheet | Github | β β β β | Cheatsheet for styling react antive components |
| React Native Cheatsheet | Github | β β β | React Native TidBits |
| Learning Path for React Native | Blog |
Docs
| Title | Type | Resource Rating | Description |
|---|---|---|---|
| Deco React Native Docs | Docs | ||
| Stack Overflow Docs |
Great Sites
| Title | Type | Resource Rating | Description |
|---|---|---|---|
| awesomereact.com | Website | β β β β β | Bunch of really good videos to get you going with React |
| Awesome React Native | Github | the original Awesome React Native List | |
| React Native Express | Website | β β β β β | Walkthrough tutorial for beginners |
| React Native Playground | Website | β β β β | React Native project site. Sometimes doesn't function properly |
| React Native Coach | Website | β β β | List of Useful React Native Components to get you started |
Overview of React Native
| Title | Type | Resource Rating | Description |
|---|---|---|---|
| React Native Overview | |||
| React Native Retrospective | |||
| Tadeu Zagallo: React Native Architecture Overview, slides | |||
| A tour of React Native | |||
| Pieter De Baets An introduction to React Native | |||
| Learn once write anywhere intro to React Native | |||
| React Native: an overview from a mobile and frontend developer | |||
| React Native - Native App Development for Web Developers | |||
| React Native for ReactJS Devs | |||
| React Native - Introductory Tutorial | |||
| React Symposium | |||
| A Tour of React Native part 1 part 2 | Blog | β β β β β | Overview of everything in react native and all the major technologies that you should be aware of |
| Why React Native Is Such A Big Deal | Youtube | Good vid to watch if you're totally new and have no time. Highlights then painpoints of native dev and the good points of RN dev | |
| React Native as an extension of Hybrid | Blog | Blog post about how building apps with React Native is a similar experience to building web apps | |
| From React web to native mobile: mapping out the unknown unknowns - Brent Vatne - Reactive 2015 | Youtube | β β β β β | Mobile is different from the web because... Higher Expectations + More Constraints + More APIS. Brent Vatne discusses the differences between mobile and web, why RN, animations with Animated, Navigation and navigation transitions with the Navigator API, the facebook app, fast and responsive animations, listview performance optimizations, interaction managers, rasterization, tracking down performance bottlenecks, using the built in react native performance profiler, memory leaks, connectivity, keyboards, status bars, multi-threading, execution states, and much more in this 1 hour talk |
Bridging into Native Codebases - iOS
Bridging into Native Codebases - Android
Navigation and Routing Overview
| Title | Type | Resource Rating | Description |
|---|---|---|---|
| Navigation in React Native: Examining and Understanding the Options | Slides | β β β β β | Really great talk highlighting most of the options for navigation in React Native |
| Routing and Navigation in React Native | |||
| Exploring Navigators in React Native | |||
| React NativeβββWhich Navigator should I use? | |||
| React Native NavigatorβββNavigating Like A Pro in React Native | |||
| Eric Vicenti - Native Navigation for Every Platform at ReactEurope 2016 | Youtube | Facebook dev talks about Navigation in the Facebook apps. Also talks about the future of NavigationExperimental | |
| Build your own javascript navigator for react native | Blog |
React Navigation
| Title | Type | Resource Rating | Description |
|---|---|---|---|
| React Navigation Homepaage | Website | ||
| React Navigation: An Overview of Transitioner and CardStack | Blog | ||
| React Navigation: Cross Fade and Android Default Transitions | Blog | ||
| Shared element transitions part 1, code | Blog | ||
| Shared element transitions part 2 | Blog | ||
| Getting Started with React Navigation | Video Tutorial | Nice quick video demo to understand the fundamentals of React Navigation | |
| Using React-Navigation in React Native | |||
| react-navigation with complete redux state management, tab-bar, and multiple navigators | Blog |
Navigation Experimental
| Title | Type | Resource Rating | Description |
|---|---|---|---|
| React Native Navigator Experimental | |||
| NavigationExperimental | |||
| NavigationExperimental | Github | NavigationExperimental Readme | |
| React Native Experimental Navigation with Redux | |||
| React Native Navigation using NavigationExperimental | Blog | ||
| React Native NavigationExperimental in Depth | Blog | ||
| NavigationExperimental Premier: A Simple Recipe | Blog | ||
| Exponent Talks: Adam on Unraveling Navigation | Youtube | ||
| React Native Meetup - Fernando Ruiz - Diving Into NavigationExperimental | Youtube | ||
| Eric Vicenti - Animating Navigation: Going off the deep end | Youtube |
React Native Router Flux
| Title | Type | Resource Rating | Description |
|---|---|---|---|
| React Native Basics: Using react-native-router-flux | Blog + Youtube series | ||
| Tackling React Native navigation with React Native Router Flux and Redux | Blog | ||
| Using React-Native-Router-Flux with Redux | Blog |
Other Navigation Options
| Title | Type | Resource Rating | Description |
|---|---|---|---|
| Introducting React Router Native | Blog | ||
| Wix React Native Navigation | BLog | Blog post for understanding the Wix React Native Navigation Library | |
| react-native-animated-modal | |||
| Swipeable cards navigation | uses Wix react-native-navigation | ||
| Ex-navigation Explainer | Gist | ||
| Using Ex-Navigation in React Native | Blog | ||
| lottie-react-native | Github | Lottie is a mobile library for Andorid and iOS that parses Adobe After Effects animations exported as json with bodymovin and renders them natively on mobile! | |
| react-native-facebook-keyframes | Github | ||
| App Animations with Lottie by Airbnb | Blog |
Flexbox Model
| Title | Type | Resource Rating | Description |
|---|---|---|---|
| Flexbox Froggy | Website / Game | Game makes learning flexbox easy | |
| React Native Flexbox Layout Patterns | Blog | ||
| Responsive Layouts | Github | ||
| React Native Flex Basics | Youtube | ||
| Mini course on React Native Flexbox github project | Blog + Github | β β β β β | Tutorial touches on every aspect of flexbox |
| React Native Layout System | |||
| Aligning Children using Flexbox in React Native | |||
| The ultimate flexbox cheatsheet | |||
| The complete guide to flexbox | |||
| Understanding React Native flexbox layout | |||
| Universal css-in-js media queries for React Native and React | Github | Adds media-query support to css-in-js in React Native and React. | |
| Common React Native App Layouts | Blog series | β β β β β | Really nice blog, has a few walkthroughs of common app layouts including a login page, a calendar page, and more coming |
| Yoga | Yoga, the high-performance layout library. What started as the flexbox implementation for RN is now its own formidable project. | ||
| React Native Flex Demo | Blog |
Styling
UI
| Title | Type | Resource Rating | Description |
|---|---|---|---|
| Component Kits for React Native | Blog | ||
| react-native-elements | Github | Cross Platform React Native UI Toolkit | |
| raect-native-display | Github | This module brings "Display: none" (css style) to turn on/off components from render. Using this module will improve your app performance and appearance with the enter/exit animations | |
| Nachos UI is a React Native component library | |||
| Carbon UI | Github | Universal Material Design components for React Native and React |
Animation Overview and Examples
| Title | Type | Resource Rating | Description |
|---|---|---|---|
| Splash Screen on Android | Blog | ||
| React Native Animations | Blog | a how-to guide on how to use animations in React Native | |
| 131 React Animation Examples | Website | ||
| React Native |
Video + Slides | β β β β | explanation of the various types of animations in react-native, an understanding of the underlying architecture, and how to achieve 60 FPS scrolling |
| Declarative Animations Library for React and React Native | Github | ||
| Animate Your React Native App | Blog | ||
| React Native Animations Done Right | Blog | ||
| React Native Animations by Emmett Harper | Video | Comparing CSS animations to React Native animations and understanding how they work the exact same way. Walkthrough of all of the animation types | |
| Building apps with physics-based animations | |||
| Implementing FoldView in React Native | Blog | Really informative. Good insight as to how to take advantage of matrix math in your React Native animations | |
| Practical Animation Examples in React Native | Blog | ||
| Linking Animations to Scroll Position in React Native | Blog | A tinder like animation, explained | |
| Native Animation Example | Github | A example of using the new native animations | |
| Practical Animation Examples in React Native , code | Blog | Create a news page, a button page, a progress bar, a spinning animation, and an expand animation | |
| Jason Brown Animation Videos | Egghead | ||
| Implementing a 3D Cube in React Native | Blog | ||
| React Native collapsible navbar | Blog |
Layout Animation
| Title | Type | Resource Rating | Description |
|---|---|---|---|
| React Nativeβs LayoutAnimation is Awesome | Blog | ||
| Simple and pretty LayoutAnimation | |||
| Simple React Native Animations | Blog |
Animated
| Title | Type | Resource Rating | Description |
|---|---|---|---|
| React Native Animations Using the Animated API | Blog | Getting up and running with React Native Animations | |
| React-native Animated API Basic Example | Blog | ||
| React Native Animated Video Tutorial Egghead | Video Series | ||
| React Rally: Animated -- React Performance Toolbox | Slides | ||
| React Motion and Animated | Blog | ||
| Support for Native Animations | Github | ||
| Playing with React Native Animations | Blog | ||
| Animations in React Native | Video | Gives understanding of differences between using the layout animation and the animated API. Also React Motion | |
| Spencer Ahrens - React Native: Building Fluid User Experiences at react-europe 2015, slides, code | Video + Slides + Code | β β β β β | Talk from when the Animated API was first introduced. Talk is about what the animated API can do, shown with a demo |
| The amazing animated API | Blog | ||
| Using Native Driver for Animated | React Native Blog |
Other Animations
| Title | Type | Resource Rating | Description |
|---|---|---|---|
| react-native-animatable | Github | Easy to use declarative transitions and a standard set of animations for React Native | |
| react-motion | Github | ||
| The CSS3 matrix() Transform for the Mathematically Challenged | Blog | In react native, there is no support for transform-origin. instead, you can take advantage of the matrix transformations. this is a guide to doing that | |
| Matrix 3D Syntax | |||
| Matrix 2D Transforms | |||
| A react-native wrapper for Facebook Keyframes | Github | A React Native wrapper for the Facebook Keyframes library. | |
| gl-react-native | Github | OpenGL bindings for React Native to implement complex effects over images and components, in the descriptive VDOM paradigm |
SVG and D3
| Title | Type | Resource Rating | Description |
|---|---|---|---|
| React Native ART and D3 | |||
| Using D3 With React Native | |||
| React Native - Morphing SVG Paths with React Art | |||
| An example application to show how to use D3 in a React Native application. | |||
| react-native-svg | SVG library for React Native | ||
| React Native and D3.js | |||
| gl-react-native | Github | OpenGL bindings for React Native to implement complex effects over images and components, in the descriptive VDOM paradigm http://projectseptemberinc.gitbooks.io/gl-react/content/ | |
| Cross-platform charting with React & React Native by Ken Wheeler at react-europe 2016 | Youtube | ||
| react-native-pathjs-charts | Github |
Gestures
| Title | Type | Resource Rating | Description |
|---|---|---|---|
| React Native - Maintain Touchable Items with a Parent PanResponder | |||
| react-native-gesture-handler | |||
| GETTING STARTED WITH THE PANRESPONDER IN REACT NATIVE, demo app | |||
| Living in an async world of React Native, slides | |||
| React-native Animated API with PanResponder | |||
| Gesture detection in React Native | Blog | ||
| react-native-gesture-recognizers | Github | React Native gesture recognizer decorators. Just decorate your component and easily respond to pans and swipes! Uses ES7 decorator syntax | |
| How to handle gestures with PanResponder | Blog |
Networking
| Title | Type | Resource Rating | Description |
|---|---|---|---|
| Making Network Requests | Video / written tutorial of how to make network requests | ||
| Interacting with APIs Using React Native Fetch | |||
| Make HTTP Requests In iOS With React Native |
Basic React Native and Component Usage
React Native APIs
| Title | Type | Resource Rating | Description |
|---|---|---|---|
| React Native Basics: Geolocation |
Custom Components and Cool Shit
| Title | Type | Resource Rating | Description |
|---|---|---|---|
| Awesome React Components | Github | β β β β | List of React Native comonents and number of stars |
| reactscript.com | Website | β β β β β | React Native Componets Website - lots and lots of components! |
| Libs, Articles and Tutorials | Github | ||
| react-native-grid-component | Github | ||
| react-sortable-tree | Github | ||
| React Native FoldView | Github | ||
| Sortable ListView | Github | ||
| react-native-sglistview | Github | SGListView is a memory minded implementation of React Native's ListView | |
| react-native-sortable-list | Github | ||
| react-native-utils | Github | ||
| react-native-app-link | Github | Easily link to other apps with React Native. |
Map Views
| Title | Type | Resource Rating | Description |
|---|---|---|---|
| Airbnb Map View | Github | β β β β β | Airbnb's mapview - will be merged into RN master for version 0.40 |
| Client Side marker clustering with React Native |
List Views
| Title | Type | Resource Rating | Description |
|---|---|---|---|
| React Nativeβs experimental new FlatList component | Blog |
Payments
| Title | Type | Resource Rating | Description |
|---|---|---|---|
| Credit Cards with Stripe and React Native |
App Structure
| Title | Type | Resource Rating | Description |
|---|---|---|---|
| React Native Code Reuse: Architecture that Works | |||
| A cure for relative requires in React Native | |||
| Organizing a React Native Project | Blog | ||
| How to structure your React Native application using Redux? | Blog |
App Launch
| Title | Type | Resource Rating | Description |
|---|---|---|---|
| ReactNative iOS Launch Screen No Flash | |||
| Launch Image in iOS | Blog |
Project Setup
| Title | Type | Resource Rating | Description |
|---|---|---|---|
| Renaming a React Native Project | Blog | ||
| Rename react-native app with just one command | Github | ||
| React Native Deployment to iPhone | Blog |
Offline
| Title | Type | Resource Rating | Description |
|---|---|---|---|
| Handling Offline Actions in React Native | Blog |
Testing with Jest
Testing
| Title | Type | Resource Rating | Description |
|---|---|---|---|
| Using Enzyme to Test Components in React Native | |||
| Testing React Native with Mocha and Enzyme | |||
| Unit Testing React Native With Mocha And Enzyme | |||
| Testing React Native | |||
| React Native on Simulator and on Device | Github | ||
| Testing the Bejeezus out of React Native Apps with AVA | |||
| Test driving React Native applications | |||
| Automated UI Testing with React Native on iOS | Blog | ||
| React Native Mock | Github | A fully mocked and test-friendly version of react native | |
| Testing React Native and Redux | |||
| carte-blanche | Github | An isolated development space with integrated fuzz testing for your components. See them individually, explore them in different states and quickly and confidently develop them. youtube video | |
| A fully mocked and test-friendly version of React Native | Github | ||
| React Native Functional Testing using Appium | Blog | ||
| Graybox E2E tests and automation library for mobile | Github | Wix's Detox library |
Debugging
| Title | Type | Resource Rating | Description |
|---|---|---|---|
| Deep Diving React Native Debugging | Blog | β β β β β | Beginners tutorial for debugging react native |
| Debugging React Native Applications | |||
| React Native Android App Memory Investigation | |||
| More Debugging with React Native | |||
| Debugging and Production - React Native at Microsoft | |||
| Nuclide Debugger | |||
| React Native Time Travel Debugging | Blog |
Crash Reporting
| Title | Type | Resource Rating | Description |
|---|---|---|---|
| How To: Crash Reporting with React-Native, Sentry and Fastlane | Blog | ||
| Add Crashlytics to your React Native iOS app |
Chrome Dev Tools
| Title | Type | Resource Rating | Description |
|---|---|---|---|
| Chrome Dev Tools Homepage | |||
| Debugging with Global Variables and the Chrome Console in React Native | |||
| Using the Chrome Debugger to Set Breakpoints in React Native | Video | ||
| React Native Debugging Using Chrome | Blog | ||
| Debug the DOM in Chrome with the Devtools Elements Panel | Egghead | ||
| Debug JavaScript in Chrome with DevTool Sources | Egghead | ||
| Debug HTTP with Chrome DevTools Network Panel | Egghead | ||
| Become a Javascript Console Power-User | Youtube | ||
| React-Knosul | Github | Render React components to Chrome in console.log() | |
| Release The Pain from Running and Debugging React Native App on a real iOS Device | Blog | ||
| Show network requests such as fetch, WebSocket etc. in chrome dev tools |
Versioning and Upgrading
| Title | Resource Rating | Type | Description |
|---|---|---|---|
| Easier Upgrades thanks to Git | Blog | ||
| Versioning React Native apps | |||
| Easier React Native upgrades with rn-diff | Blog | ||
| rn-diff | Github | Easier React Native upgrades by clearly expose changes from a version to another | |
| How to upgrade React-Native Modules in a backwards compatible manner | Blog | ||
| React Native 0.40 Upgrading iOS Native Modules | Blog | ||
| React Native git upgrade video | Youtube |
Configuration
| Title | Resource Rating | Type | Description |
|---|---|---|---|
| Managing Configuration in React Native | Blog | ||
| react-native-config | Github | Module to expose config variables to your javascript code in React Native, supporting both iOS and Android |
Optimizing and Performance
| Title | Type | Resource Rating | Description |
|---|---|---|---|
| React.js Conf 2016 - Tadeu Zagallo - Optimising React Native: Tools and Tips | Youtube | β β β β β | Talks about the React Native build process |
| Introduction to React Native Performance, code | Slides + Code | β β β β | React Native holds great promise in terms of excellent developer experience with Javascript and code reuse between platforms. The big question isβββdo these benefits come at the price of performance? How well can React Native hold its own against purely native implementations? |
| Performance Limitations of React Native and How to Overcome Them, writeup | Slides + Blog | β β β β | |
| Recycling Rows For High Performance React Native List Views | |||
| Building a custom listview | |||
| React Native Scheduling | |||
| React Nativeβs JavaScript Execution Contexts | |||
| Breaking up Heavy Processing in React Native | |||
| Under The Hood of React Native - Martin Konicek - Reactive 2015, slides | Youtube + Slides | ||
| JavaScript, React Native and Performance at react-europe 2016, slides | Youtube + slides | ||
| Alexander Kotliarskyi - React Native: Under the Hood - YGLF2015, slides | Youtube + Slides | β β β β β | Nice quick overview of the performance optimizations React Native makes behind the scences via async calls and batch updates |
| Dive into React Native performance | |||
| React Native Internals: A Wider Picture (Part 1: MessageQueue & JS Thread) | |||
| Debugging React Native Performance: Snoopy and the MessageQueue | Blog | ||
| React Internals | Slides | Even though this is pretty much only about react, it is too good of a presentation to ignore. Goes into the concepts behind state, reconciliation, syntheticevent, and react fiber | |
| Optimizing React Native: Dynamic Gif Scrolling | Blog | ||
| React Performance | Slides | ||
| Tempted to abandom React Native for Native Android | Discussion | ||
| I made React Native fast, you can too | Blog | Discuesses overdraw problems on Android and how you can track them down and eliminate them with GPU Prfiling tools in Android Studio |
Async and Middleware
| Title | Type | Resource Rating | Description |
|---|---|---|---|
| React Native Meets Async Functions | |||
| ES7 Async / await with React Native | |||
| Using redux-saga To Simplify Your Growing React Native Codebase | Blog | ||
| F8 2015 - React Native & Relay: Bringing Modern Web Techniques to Mobile | Youtube | ||
| react-native-background-job | Blog | Schedule background jobs in React Native that run your JavaScript when your app is in the background/killed. | |
| Async Await with React Lifecycle methods | Blog | ||
| react-native-workers | Github | ||
| React Resolver | Github | Async-rendering & data-fetching for universal React applications |
Storage and Persistence
| Title | Type | Resource Rating | Description |
|---|---|---|---|
| Tackling React Native Storage | Blog | Good overview of the differences between Realm and AsyncStorage |
Local Files
| Title | Type | Resource Rating | Description |
|---|---|---|---|
| react-native-fetch-blob | Github | A project committed to make file acess and data transfer easier, efficient for React Native developers. | |
| Image Caching in React Native | Blog | Caching images with react native fetch blob | |
| Working with Local Data | Medium |
Dependencies and Frameworks
| Title | Type | Resource Rating | Description |
|---|---|---|---|
| How to create a React Native project using Yarn | |||
| Beginnerβs Guide to Using CocoaPods with React Native | |||
| React Native modulesβββFrameworks | Blog |
Asset Management
| Title | Type | Resource Rating | Description |
|---|---|---|---|
| Add fonts on React Native | Blog | ||
| How to add and remove custom fonts in React Native | Blog | ||
| react-natove-vector-icons | Github | ||
| Resource Handling in React-Native | Blog | ||
| fontFamily in React Native | |||
| Tips for React Native Images (or saying goodbye to trial and error) | Blog | ||
| Change your React Native app icons in a single command line | Blog |
Javascript
| Title | Type | Resource Rating | Description |
|---|---|---|---|
| Using ES2016 Decorators in React Native | Blog | ||
| How To Use ES6 Arrow Functions With React Native | |||
| ES7 Decorators | Blog | Post discusses using ES7 decorators for higher order components | |
| 6 Ways to Bind JavaScriptβs this Keyword in React, ES6 & ES7 | |||
| Goodbye ../../../ Removing relative paths when importing | Blog | ||
| fat Arrow vS Autobind VS bind();Bind();Bind();Bind();Bind()? |
Javascript Core
| Title | Type | Resource Rating | Description |
|---|---|---|---|
| NSHipster - JavascriptCore |
Responsive Layouts
| Title | Type | Resource Rating | Description |
|---|---|---|---|
| react-native-responsive-image | Responsive image component for React Native |
Push Notifications
Migrating to React Native
| Title | Type | Resource Rating | Description |
|---|---|---|---|
| Migrating to React Native | Blog |
Opinions
| Title | Type | Resource Rating | Description |
|---|---|---|---|
| What Sucks About React Native | |||
| Six months with React Native | |||
| AN IOS DEVELOPERβS PERSPECTIVE ON REACT NATIVE | Blog | ||
| React Native Hater has a Bitchfit |
Reflections
| Title | Type | Resource Rating | Description |
|---|---|---|---|
| What we learned after using React Native for a year | Blog | Good look at what worked and what didn't work in React Native from this company | |
| 10 LESSONS LEARNED BUILDING THE DELIVERY.COM APP FOR ANDROID | Slides | β β β β | Some good tips from the Delivery.com team. Comes with code samples |
| React Native in Production | Slides | ||
| What I learned from building my first React Native App | Blog | ||
| Lessons learned from working with React Native | Blog | ||
| What I learned from building my first React Native App | Blog | ||
| React Native at Walmart Labs | |||
| Task Rabbit | Youtube | ||
| React Native at Airbnb | Video | β β β β | Leland Richardson talks about how Airbnb uses React Native and how their repository structure, as well as Continuous Integration |
| React Native at Airbnb and Test Butler at LinkedIn | Youtube | β β β | See how Airbnb is using React Native in iOS and Android |
| Tal Kol: Building a React Native App for 80 Million Users, slides) | Youtube + Slides | β β β β | Talk about using React Native at a large scale at Wix.com, and how it transformed their work process |
| Bas de Vries: iOS vs React Native: insights from an iOS developer, slides | Youtube + slides | β β | |
| Mike Grabowski: Building a Fully-Fledged Media Player in React Native β ReactNext 2016 | |||
| React Native at Instagram | Blog | ||
| Retrospective: Swift at Artsy | Blog | β β β β β | Swift compared to React Native after 1 year of use at Artsy |
| Artsy React Native Series | Series of blog posts regarding the Artsy team's transition to React Native |
React
| Title | Type | Resource Rating | Description |
|---|---|---|---|
| React Lifecycle methods diagram | |||
| Awesome React Components | Github | A sorted and categorized list of React Components | |
| Sharing Components Between React and React Native | Blog | ||
| From ReactJS to React-Native, what are the main differences between both? | Blog | ||
| React Core Notes | |||
| React FAQ | Github | ||
| ReactJS in Patterns | Github | ||
| Converting a React App to React Native |
React Fiber
| Title | Type | Resource Rating | Description |
|---|---|---|---|
| ReactNative fiber renderer | Github | ||
| React Native Fiber Resources | |||
| React Fiber Architecture | Hacker News | ||
| A glimpse into more obscure Fiber features (NOT a real/public API yet but it works) | |||
| React Fiber Slides | Slides |
Redux
| Title | Type | Resource Rating | Description |
|---|---|---|---|
| Awesome Redux / React Native | |||
| React Redux Links | Github | Resource to get started with React and Redux | |
| React Native with Redux, video class code | |||
| Using React (-Native) with Redux and Redux-Saga. A new proposal? | |||
| Introduction to React Native & Redux | |||
| RN-NavigationExperimental-Redux-Example | |||
| react-native-redux | Github | Just a starter code to use redux and react-native with Login | |
| To persist or not to persist | Blog | Storing (and cleaning!) navigation state with Redux and React Native | |
| A guide to React Native with Redux and Immutable.js | Blog | ||
| Easy forms in React Native with Redux-Form | Blog | ||
| Redux 4 Ways | Implementations of Thunk vs Saga vs Observable vs Redux Promise Middleware in 10 minutes. |
MobX
| Title | Type | Resource Rating | Description |
|---|---|---|---|
| React Native MobX Project | Make your app reactive with MobX and react-native-router-flux | ||
| React Native with MobXβββGetting Started, code | |||
| A React-Native app to remote control Google Play Music Desktop | |||
| Build an Imgur App with React Native and MobX |
GraphQL
| Title | Type | Resource Rating | Description |
|---|---|---|---|
| Using GraphQL Inside a React Native App | Blog | ||
| React Native with Apollo | Blog | 2 part blog post | |
| Amazing React Native apps with Apollo React | Blog | ||
| Learn Apollo: Build GraphQL Apps with React, React Native or Exponent | Blog |
Apollo React Native
| Title | Type | Resource Rating | Description |
|---|---|---|---|
| Integrating with React Native | Docs | ||
| Amazing React Native apps with Apollo React | Blog | ||
| react-native-feed | News feed built with react-native, apollo-client and graphql & powered by postgraphql | ||
| Apollo on React Native Radio | Blog | The top 5 questions and answers | |
| React Native with Apolloβ Part 1, Apollo Server | Blog | ||
| Tales of a React Native Beginner: Why GraphQL |
Relay
| Title | Type | Resource Rating | Description |
|---|---|---|---|
| React Native and Relay | |||
| ExNavRelay | Github | Example of integrating ex-navigation with Relay | |
| react-native-relay-example | Github | React Native with Relay example | |
| Using React Native with Relay | Blog |
Realm
| Title | Type | Resource Rating | Description |
|---|---|---|---|
| Building An Image Browsing App With Realm, Imgur API, and React Native |
Flow
| Title | Type | Resource Rating | Description |
|---|---|---|---|
| Getting Started with React Native and Flow | Blog | ||
| Adding Flow to your Redux Application | Blog |
Typescript
Bucklescript
| Title | Type | Resource Rating | Description |
|---|---|---|---|
| BuckleScript bindings for React Native | Github |
ReasonML
| Title | Type | Resource Rating | Description |
|---|---|---|---|
| ReasonML Docs | |||
| What does Reason and React Native look like? | Github | ||
| A First Reason React app for Javascript developers | Blog |
Expo
| Title | Type | Resource Rating | Description |
|---|---|---|---|
| Exponent -> Expo | Blog | ||
| Exponent Repository | Github | ||
| Awesome Exponent | Github | ||
| Curated list of awesome react native components on exponent | |||
| Introduction to Exponent | |||
| Exponent explained in 2 minutes | Youtube | ||
| Coding Apps with React Native at Exponent | |||
| Exponent Talks: Brent's "Introduction to Exponent" | Youtube | At our first user community meetup, Brent gives an intro to Exponent and a quick tour of basics like building a feature and pushing updates. | |
| Using React Native UI toolkits with Exponent | |||
| Hello Exponent: A Hands-On Tutorial | Youtube | ||
| AMA With the Exponent Team | |||
| "Exponent" with Brent Vatne | Youtube |
Authentication
| Title | Type | Resource Rating | Description |
|---|---|---|---|
| react-native-google-signin | Google Signin for your react native applications | ||
| Authenticate React Native - iOS with Firebase API | |||
| The Essential Boilerplate to Authenticate Users on your React-Native app | Blog |
Native APIs
| Title | Type | Resource Rating | Description |
|---|---|---|---|
| Making React Native apps accessible | |||
| Use The iOS Camera In Your React Native Mobile App | |||
| react-native-itunes | Github | Access your iTunes library (iOS only) | |
| react-native-motion-manager | Github | CMMotionManager wrapper for react-native, exposing Accelerometer, Gyroscope, and Magnetometer. | |
| Reacting to React Native for native WebRTC apps | Blog | ||
| Using SpriteKit inside a React Native app | Blog | ||
| Sharing content with React Native | Blog | Using your native device's sharing API |
Webviews
| Title | Type | Resource Rating | Description |
|---|---|---|---|
| WebGL in React Native | |||
| react-native-webview-crosswalk | |||
| React Native and THREE.js (WebGL library) integration | Github |
Deep Linking
| Deep Links in React Native v0.22 [Part 1βββAndroid] | Blog | | | | react-native-deep-linking | Github | | Simple route-matching library to handle deep links |
Known Bugs
| Title | Type | Resource Rating | Description |
|---|---|---|---|
| How to fix the initial white flash in your React Native app | Blog | ||
| Thoughts on React Native from an Android engineer's perspective | Blog | Highlights some problems with React Native and Gradle | |
| React Native blank white screen issue (solved) | Blog | ||
| Easy upgrades, relying on Git | Blog | ||
| Hard React Native Problems | Github issues | ||
| React Nativeβββa gotcha with fetch() | Blog | ||
| "Congratulations, you have a lot of code!" Remedying Androidβs method limit - Part 1 | Blog |
React Native on the Web
| Title | Type | Resource Rating | Description |
|---|---|---|---|
| React Native Web | Github | ||
| React Native Web setup for android and web with live reload on both! | Blog |
React Native Windows Platform
| Title | Type | Resource Rating | Description |
|---|---|---|---|
| Native Development for Windows | Blog |
React Native tvOS
| Title | Type | Resource Rating | Description |
|---|---|---|---|
| react-native-tvos-controller | Github | TvOS remote controller module for react native. | |
| React Native & Apple TV today | Blog |
React Native Amazon Fire
| Title | Type | Resource Rating | Description |
|---|---|---|---|
| React Native running on Amazon Fire TV Stick | |||
| Amazon Fire TV Stick App In React Native | Blog |
Clojurescript
| Title | Type | Resource Rating | Description |
|---|---|---|---|
| ClojureScript + React Native | |||
| Mobile Apps with Clojurescript | Youtube |
Elm
| Title | Type | Resource Rating | Description |
|---|---|---|---|
| Elm Native UI | Github |
FSharp
| Title | Type | Resource Rating | Description |
|---|---|---|---|
| Fable React Bindings | Github |
Golang
| Title | Type | Resource Rating | Description |
|---|---|---|---|
| React Native: Why and How to Build Your Native Code in Go | Blog |
AWS
| Title | Type | Resource Rating | Description |
|---|---|---|---|
| AWS SDK for React Native | Github | ||
| Go Serverless With React Native and Amazon Web Services | Blog | ||
| AWS re:Invent 2016: Native, Hybrid and Web patterns with Serverless and AWS Mobile services (MBL404) | Youtube |
Starters
| Title | Type | Resource Rating | Description |
|---|---|---|---|
| Awesome React Boilerplates | |||
| Pepperoni - a React Native Blurprint |
Dev Tools
| Title | Type | Resource Rating | Description |
|---|---|---|---|
| React Native Dev Tools | |||
| Reactotron | A CLI and OS X app for inspecting your React JS and React Native apps. | ||
| Linting React Native | Blog | ||
| Solving a Tooling Problem For React Native, slides | |||
| Remote Redux DevTools monitor on React Native Debugger | Github | ||
| RN Diff | Github | Easier React Native upgrades by clearly expose changes from a version to another. |
|
| Getting ESLint Right in React Native | Blog | ||
| react-native-extended-cli | Github | rnx (short for React Native Extended CLI) is a tool you can install via npm and use as a CLI instead of using the react-native CLI. It supports everything the built-in CLI supports plus a bunch of handy tools that will save you time and stress. | |
| React Native Storybook | Github | With React Native Storybook you can design and develop individual React Native components without running your app. | |
| adb-auto-restarter | Github | ADB service auto restarting shell. really helpful if you are as lazy as i am and don't want to restart your adb service manually when it stops detecting your android phone. | |
| react-native-touch-visualizer | Github | Visualize touches and drags on React Native apps. |
VSCode
| Title | Type | Resource Rating | Description |
|---|---|---|---|
| React Native VSCode | Youtube | ||
| VS Codeβββhow to create snippets to speed up your React Native development | Blog | ||
| VSCode React Snippets | Github | List of all the react snippets for VSCode |
CodePush
| Title | Type | Resource Rating | Description |
|---|---|---|---|
| React Native + CodePush |
Continuous Integration / Deployment / Delivery
Installing SDKs
| Title | Type | Resource Rating | Description |
|---|---|---|---|
| Installing the Facebook SDK | Blog |
Patents
Talks
| Title | Type | Resource Rating | Description |
|---|---|---|---|
| Awesome React Native Talks | Github | β β β β | Nice, curated list of talks |
| Writing Cross-Platform Apps with React Native | |||
| No Xcode Java Swift or Objc - How far JS Gets you | |||
| React Native: Are we there yet?, slides | |||
| React Bratislava Meetup Nov 18 2016 | Youtube | ||
| Write-once, run WebRTC anywhere with React Native (Kranky Geek WebRTC 2016) | Youtube | Emil walks through his experience using React Native with WebRTC. |
Tutorials
| React Native Cube Transition | Github + Blog | | React Native module for iOS that rotates components on a cube, similar to Instagram Stories. | | Build A Clock in React NativeβββPart 1 Build A Clock in React NativeβββPart 2 Youtube | Blog | | | | Snowfall effect in React Native | Blog | | | | Building infinite scroll in React Native | Blog | | | | React Native ScrollView animated header | Blog | | | | Ripple effect in React Native | Blog | | Hereβs a tutorial how to make ripple effect for Material Designβs Icon Button using the Animated API | | Simple React Native forms with react-native-clean-form and Immutable.js | | | | | Toolbar animation in React Native | | | | | Building a simple camera app clone for iOS with React Native | Blog | | |
Video Tutorials
| Title | Type | Resource Rating | Description |
|---|---|---|---|
| Introduction to React Native - Building a React Native app from scratch | |||
| Introduction to React Native | A basic introduction to getting started with React Native. This screencast shows how to get setup, development workflow, and building the first cut at a ListView to show some images and meta data for Hearthstone cards. | ||
| React Native Quickly | |||
| React Native Beginner | |||
| Daily Drip | Video Classes | ||
| React Native TODO App | Egghead | With Jason Brown |
Sample Apps
| Title | Type | Resource Rating | Description |
|---|---|---|---|
| React-Native-Apps | Github | β β β β β | Curated list of open source React Native Apps |
| Awesome React Native Open Source Apps | Part of the Awesome React Native Repo is a section of open source apps | ||
| Interesting React-Native projects to learn from |
Podcasts
| Title | Type | Resource Rating | Description |
|---|---|---|---|
| React Native Radio |
Jobs
| Title | Type | Resource Rating | Description |
|---|---|---|---|
| React Jobs | |||
| reactnativejobs.io |
Companies using React Native
| Title | Type | Resource Rating | Description |
|---|---|---|---|
| Tesla |
Books
| Title | Type | Resource Rating | Description |
|---|---|---|---|
| React Native Quickly Online Book | Online Book | β β β | Short book to get you familiar with the basics of React Native |
| Learning React Native: Building Native Mobile Apps with JavaScript | Book | β β β β | Good book to get started with react native |
| React Native in Action | MEAP | ||
| React Native Animation Book | Gitbook | β β β β β | The best resource for learning animations in react native |
| React Native Cookbook | |||
| Fullstack React Native | The up-to-date, in-depth, complete guide to React Native |
Weex
| Title | Type | Resource Rating | Description |
|---|---|---|---|
| Weex Homepage | |||
| If you like React Native & Vue, you will like Weex | Blog | ||
| A simple tutorial for Weex | Blog |