A free collaborative list of awesome React Native resources. This list is a an attempt to create a comprehensive list of tutorials, blogs, videos and articels that cover as many topics as possible for React Native. I will update this list as I discover new posts and as new posts are suggested.
- Resources
- Other resourses
| Title | Description |
|---|---|
| React Native Website | The official React Native Docs and reference aka the good shit. Your primary reference for everything |
| React | The official React Docs. Use to learn React |
| Redux | Read this to learn Redux |
| Title | Description |
|---|---|
| React Native AMA | React Native team takes questions about React Native |
| React Native Roadmap | |
| React Native Product Pains | 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 | A list of community-built React Native contributions. |
| React Native 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 works similarly to this project |
| Reactiflux | |
| React Native Gallery |
| Title | Description |
|---|---|
| React Native Cheatsheet | React Native TidBits |
| React Native Styling Cheat Sheet | Cheatsheet for styling react antive components |
| Core Components Cheatsheet | Core Components Cheatsheet |
| React Native Styling Cheat Sheet | React Native Styling Cheat Sheet |
| Learning Path for React Native |
- Renaming a React Native Project
- Rename react-native app with just one command
- React Native Deployment to iPhone
| Title | Description |
|---|---|
| awesomereact.com | Bunch of really good videos to get you going with React |
| Awesome React Native | the original Awesome React Native List |
| React Native Express | Walkthrough tutorial for beginners |
| React Native Playground | React Native project site. Sometimes doesn't function properly |
| React Native Coach | List of Useful React Native Components to get you started |
-
React-Native case studies: https://belitsoft.com/react-native-development/migrating-react-native-top-20-case-studies-well-known-companies
-
housing.com's experience building RN app: https://medium.com/engineering-housing/how-we-built-our-react-native-app-3380a33811ac
-
Building the chainReact app: https://shift.infinite.red/making-the-react-native-conference-app-in-react-native-9afd36be3681
-
Series on building with React-Native: https://medium.com/building-with-react-native
-
How react-native works: http://www.discoversdk.com/blog/how-react-native-works
-
React-native inner working: http://www.geeksforgeeks.org/react-native-works/
-
React-native working under the hood: https://wetalkit.xyz/react-native-what-it-is-and-how-it-works-e2182d008f5e
-
Deep dive into react-native working: https://www.youtube.com/watch?v=7rDsRXj9-cU
-
React-native under the hood: https://www.youtube.com/watch?v=hDviGU-57lU
-
Architecture of React-native: https://www.youtube.com/watch?v=Ah2qNbI40vE
-
Under the hood of react-native: https://www.youtube.com/watch?v=8N4f4h6SThc
-
Shapes in React-Native: https://codedaily.io/tutorials/22/The-Shapes-of-React-Native
-
Flexbox basics: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
-
Themeing in React-Native: https://blog.benestudio.co/themes-in-react-native-16b4b0a33ed
-
Responsive UIs in react-native: https://hackernoon.com/responsive-uis-in-react-native-a406b5d6c36a
-
Fast and responsive UI tricks: https://medium.com/@adamjacobb/react-native-performance-building-a-fast-and-responsive-ui-62b5dcc8b8af
-
Build responsive UIs in react-native: https://medium.com/building-with-react-native/how-to-develop-responsive-uis-with-react-native-1x03-a448097c9503
-
Custom fonts in React-Native: https://medium.com/@ben.clayton/react-native-cross-platform-custom-fonts-3122cd4b75bd
-
Pixel pefect cloud images in react-native: https://blog.uncommon.is/pixel-perfect-cloud-images-in-react-native-55acbc377a72
-
Image layout: https://medium.com/the-react-native-log/tips-for-react-native-images-or-saying-goodbye-to-trial-and-error-b2baaf0a1a4d
-
Interactive Images: https://medium.com/@shubhnik/creating-instagram-medium-like-responsive-images-in-react-native-170a5126a5f
-
Image caching: https://hackernoon.com/image-caching-in-react-native-96d8df33ca84
-
Photo editing using Photoeditor sdk for react-native: https://blog.photoeditorsdk.com/photoeditor-sdk-react-native-15179c589a55
-
Progressive images and caching: https://medium.com/@wcandillon/smart-images-in-react-native-db0ef047dd8c
-
Five things to know about images in React-Native: https://hackernoon.com/5-things-to-know-about-images-react-native-69be41d2a9ee?source=twitterShare-695782484bda-1518748257
-
React-Native image performance: https://medium.com/@adamjacobb/react-native-performance-images-adf5843e120
-
Exploring animated API: https://medium.com/react-native-training/react-native-animations-using-the-animated-api-ebe8e0669fae
-
PanResponder + Animated API basics:
-
React-Native's LayoutAnimation: https://medium.com/@nemishah1212/messing-around-with-react-natives-layout-animation-4260d5022cab
-
Creating a drag and drop component in react-native: https://blog.reactnativecoach.com/creating-draggable-component-with-react-native-132d30c27cb0
-
Building Apple Music UI with pan animations: https://blog.expo.io/tutorial-apple-music-ui-pan-animation-f25dcf39d2b9
-
Android lock-pattern implementation using Animated API: https://medium.com/@audytanudjaja/android-pattern-lock-with-react-native-and-expo-c94c58a5d343
-
Smoother animations using native driver: https://facebook.github.io/react-native/blog/2017/02/14/using-native-driver-for-animated.html
-
https://medium.freecodecamp.org/bubble-animation-with-react-native-72674eab073a
-
https://medium.com/@narendrashetty/shared-element-transition-with-react-native-159f8bc37f50
-
Animating TextInputs: https://goshakkk.name/floating-label-input-rn-animated/
-
Adding Lottie animations in React-Native: https://medium.com/react-native-training/lottie-react-native-tutorial-162d91840720
-
Drag and drop tags in React-Native(Part-1): https://rationalappdev.com/drag-and-drop-tags-in-react-native-part-1-of-2/
-
Drag and drop tags in React-Native(Part-2): https://rationalappdev.com/drag-and-drop-tags-in-react-native-part-2-of-2/
-
ScrollView animations using Animated API: https://medium.com/dailyjs/how-i-linked-animated-headers-to-scroll-position-in-react-native-1a4906fca25b
-
Animating items of FlatList: https://hackernoon.com/how-to-animate-the-items-of-a-react-native-flatlist-32c8cbf7ea3d
-
Breaking down a counter animation n React-Native: https://medium.com/@Mz_Chi/breaking-down-a-counter-animation-in-react-native-1e4d6465b9fa
-
React-Native animations done right: https://medium.com/@7ynk3r/react-native-animations-done-right-d5249cc1ebbf
-
Experiments with high erformance animations in React-Native: https://engineering.salesforce.com/experiments-with-high-performance-animation-in-react-native-80a0cb7052b0
-
How to achieve great animation performance in React-Native: https://medium.com/building-with-react-native/animations-in-react-native-how-to-achieve-great-performance-and-tips-1x04-44fd43996428
-
react native animatable: https://github.com/oblador/react-native-animatable
-
Master React Native Animations: https://www.codedaily.io/courses/Master-React-Native-Animations
- Navigation in React Native: Examining and Understanding the Options
- 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 Navigation in the Facebook apps. Also talks about the future of NavigationExperimental
- Build your own javascript navigator for react native
-
React-Navigation integration with Redux with authentication flow: https://hackernoon.com/a-comprehensive-guide-for-integrating-react-navigation-with-redux-including-authentication-flow-cb7b90611adf
-
Deep linking with react-Navigation: https://medium.com/react-native-training/deep-linking-your-react-native-app-d87c39a1ad5e
-
Improving React-Navigation performance: https://novemberfive.co/blog/react-performance-navigation-animations/
-
React-Navigation drawer tutorial: https://shift.infinite.red/react-navigation-drawer-tutorial-a802fc3ee6dc
-
Configuring android drawer and status bar: https://blog.callstack.io/android-drawer-statusbar-done-right-for-react-native-7e85f01fc099
-
Custom transitions in React Navigation: https://medium.com/async-la/custom-transitions-in-react-navigation-2f759408a053
-
5 part series on React-Navigation: https://medium.com/async-la/a-stately-guide-to-react-navigation-with-redux-1f90c872f96e
- React Native Basics: Using react-native-router-flux Blog + Youtube series
- Tackling React Native navigation with React Native Router Flux and Redux
- Using React-Native-Router-Flux with Redux
- Introducting React Router Native
- Wix React Native Navigation
- react-native-animated-modal
- Swipeable cards navigation
- Ex-navigation Explainer
- Using Ex-Navigation in React Native
- lottie-react-native
- react-native-facebook-keyframes
- App Animations with Lottie by Airbnb
- How to Setup Push Notifications in React Native (iOS & Android)
- Triggering iOS 10 actionable push notifications via React Native
- How to Setup Push Notifications with React Native
- React Native Library for OneSignal Push Notifications Service
-
Geolocation with react-native-maps (2 parts): https://www.asher-scott.com/blog/post/2
-
Geolocation basics in react-native: https://hackernoon.com/react-native-basics-geolocation-adf3c0d10112
-
Building AR app with React-Native and Viro AR: https://blog.viromedia.com/how-to-build-an-interactive-ar-app-in-5-mins-w-react-native-viro-ar-e420147e1612
-
Building AR portals with React-Native and Viro AR: https://blog.viromedia.com/how-to-build-ar-portals-in-5-mins-w-react-native-viro-ar-b939850def94
-
Adding Snapchat like AR lenses in React-Native: https://blog.viromedia.com/add-snapchat-ar-lenses-to-any-app-w-react-native-viro-ar-9d4053769782
-
React-Native performance profiling: https://medium.com/@adamjacobb/react-native-performance-profiling-32dd00b93351
-
An article on react-native performance: https://medium.com/@talkol/performance-limitations-of-react-native-and-how-to-overcome-them-947630d7f440
-
Another article on react-native performance: https://medium.com/@talkol/performance-limitations-of-react-native-and-how-to-overcome-them-947630d7f440
-
https://hackernoon.com/5-ways-we-improved-our-react-native-app-2704d5098b20
-
Using InteractionManager: https://github.com/brentvatne/run-after-interactions-exp/blob/master/main.js
-
Debugging react-native performance: https://medium.com/@jondot/debugging-react-native-performance-snoopy-and-the-messagequeue-fe014cd047ac
-
Awesome techniques to debug react-native app: https://medium.com/reactnativeacademy/debugging-react-native-applications-6bff3f28c375
-
React-Native debugging using React-Native debugger: https://levelup.gitconnected.com/supercharge-your-react-native-development-with-react-native-debugger-7633882683a9
-
Extending react-native dev menu: https://medium.com/capriza-engineering/extending-react-natives-dev-menu-c084fc93717d
-
Debugging react-native and redux applications using react-native debugger: https://blog.reactnativecoach.com/debugging-react-native-and-redux-with-react-native-debugger-62f6ceef3033
-
Debugging the bridge: https://blog.callstack.io/reactnative-how-to-check-what-passes-through-your-bridge-e435571ffd85
- 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
- Testing the Bejeezus out of React Native Apps with AVA
- Test driving React Native applications
- Automated UI Testing with React Native on iOS
- 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
- React Native Functional Testing using Appium
- Graybox E2E tests and automation library for mobile
- Learning to test React Native with Jest — part 1
- Learning to test React Native with Jest — part 2
- Learning to test React Native with Jest — part 3
- Unit testing React Native with the new Jest (I) — Snapshots come into play! code
- Unit testing React Native with the new Jest (II) — Redux: Snapshots for your actions and reducers
- Using Jest Everywhere
- Using Jest with React Native and MobX
- How to use Jest with React Native
- Jest Docs React Native
- Testing React Native Componenets with Jest
- Unit Testing React Native Components: A Firsthand Guide
- React Testing Practices
- Testng React Applications with Jest
-
VSCode setup for React-Native: https://medium.com/react-native-training/vscode-for-react-native-526ec4a368ce
-
Visual Studio Mobile center + React-Native: https://medium.com/react-native-training/up-running-with-react-native-visual-studio-mobile-center-e3c95adbf650
-
Working with Typescript and react-native: https://medium.com/react-native-training/up-and-running-with-react-native-and-typescript-8d398e910a19
-
Beta testing a RN app: https://medium.com/komenco/beta-testing-your-react-native-android-application-with-crashlytics-483c7e66a423
-
Adding crashlytics: https://medium.com/delivery-com-engineering/add-crashlytics-to-your-react-native-ios-app-69a983a9062a
-
Updating react-native app: https://medium.com/react-native-training/updating-your-react-native-app-a724c996a76d
-
Understanding react-native deployments: https://medium.com/react-native-training/understanding-react-native-deployments-6e54157920b7
-
App deployment: https://pillow.codes/bitrise-codepush-react-native-ideal-mobile-ci-setup-6283b86146c
-
Continuous integration for react-native apps: https://stories.nevercode.io/setting-up-continuous-integration-for-react-native-with-nevercode-36f313a13357
-
Continuous integration forreact-native apps using Visual Studio App Center: https://medium.com/react-native-training/setup-continuous-integration-with-react-native-50ad2f6145f4
-
Using redux-offline for react-native and PWA for offline first architecture: https://hackernoon.com/introducing-redux-offline-offline-first-architecture-for-progressive-web-applications-and-react-68c5167ecfe0
-
Handling offline actions in react-native: https://medium.com/differential/handling-offline-actions-in-react-native-74949cbfabf2
-
Offline utilities: https://blog.callstack.io/your-react-native-offline-tool-belt-795abd5f0183
-
Offline first app with react-native and redux: http://rationalappdev.com/offline-first-apps-with-react-native-and-redux/
-
OAuth2 with React-Native: https://medium.com/@jtremback/oauth-2-with-react-native-c3c7c64cbb6d
-
Creating an authentication system and a persistent user session with react-native: http://www.theodo.fr/blog/2017/03/how-to-create-an-authentication-system-and-a-persistent-user-session-with-react-native/
-
React-Native authentication in depth ( AWS Mobile hub + AWS Amplify + Amazon Cognito ): https://medium.com/react-native-training/react-native-authentication-in-depth-8d8c2e4ad81b
-
React-Native authentication using Firebase: https://blog.invertase.io/getting-started-with-firebase-authentication-on-react-native-a1ed3d2d6d91
| Title | Description |
|---|---|
| Awesome React Components | List of React Native comonents and number of stars |
| reactscript.com | React Native Componets Website - lots and lots of components! |
| Libs, Articles and Tutorials | |
| react-native-grid-component | |
| react-sortable-tree | |
| React Native FoldView | |
| Sortable ListView | |
| react-native-sglistview | SGListView is a memory minded implementation of React Native's ListView |
| react-native-sortable-list | |
| react-native-utils | |
| react-native-app-link | Easily link to other apps with React Native. |
- Building an e-commerce search app in React-Native: https://hackernoon.com/building-an-e-commerce-search-app-with-react-native-2c87760a2315
- Communicating between react-native and webview: https://medium.com/capriza-engineering/communicating-between-react-native-and-the-webview-ac14b8b8b91a
- Tweeting in React-Native using linking: https://medium.com/@jordan_mohi/tweeting-with-react-native-and-linking-openurl-9c505d49bc3e
- Implementing native modules for ios in React-Native: https://medium.com/@shashank.shashi2/implementing-native-modules-for-ios-react-native-bcb76be696ea
- Add admob to react-native app: https://medium.com/@TarikHajji/add-admob-to-react-native-app-5b1e91be459
- React-Native quirks: https://codeburst.io/react-native-quirks-2fb1ae0bbf80
- Communicating to and from native UI components: https://medium.com/@john1jan/communicating-to-and-from-native-ui-components-in-react-native-android-b8abcfb2f9c8
- Sending events to Javascript from native module in React-Native: https://blog.callstack.io/sending-events-to-javascript-from-your-native-module-in-react-native-29244f890e04
- Handling deep linking in React-Native: https://medium.com/the-react-native-log/handle-deep-links-in-react-native-apps-b22055149b3a
- Using Expo, Gulp and Webpack to publish react components to npm: https://blog.expo.io/how-to-combine-expo-gulp-and-webpack-to-create-and-publish-react-components-to-npm-baec7b6bb443
- Turn any Javascript library into React-Native component: https://medium.com/react-native-training/turn-any-javascript-library-into-a-react-native-component-e8ab0c710f12