Awesome

react-native-learning-resources

Collection of some awesome resources for react-native :sparkles:

Experiences/Case studies

• 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

• https://blog.cloudboost.io/experience-building-first-react-native-app-from-hello-world-to-app-store-73781393af73

• Building the chainReact app: https://shift.infinite.red/making-the-react-native-conference-app-in-react-native-9afd36be3681

• https://blog.uptech.team/how-we-build-apps-on-react-native-part-2-7-things-you-should-know-to-save-your-development-time-944533f81c03

• Series on building with React-Native: https://medium.com/building-with-react-native

React-Native architecture

• How react-native works: http://www.discoversdk.com/blog/how-react-native-works

• React-native 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

Layout / UI

• 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

Images

• 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

Animations

• Exploring animated API: https://medium.com/react-native-training/react-native-animations-using-the-animated-api-ebe8e0669fae

• PanResponder + Animated API basics:

  • https://mindthecode.com/getting-started-with-the-panresponder-in-react-native/

  • https://github.com/shubhnik/react-native-animation1

  • https://github.com/shubhnik/react-native-animation2

  • https://github.com/shubhnik/react-native-animation3

• https://medium.com/oberonamsterdam/what-the-react-native-docs-forgot-to-tell-you-about-animations-c21d67abf14d

• https://medium.com/the-react-native-log/building-a-facebook-paper-like-ui-with-react-native-4a753623d343

• 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

• https://medium.com/@audytanudjaja/react-native-ui-challenge-building-instagram-zoom-draggable-photo-9127413b1d29

• 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

Navigation

• 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

Push Notifications

• https://apiko.com/blog/react-native-push-notifications/?utm_source=sharing-sources-f&utm_medium=react-native-push-notifications&utm_content=sharing-sources-f&utm_campaign=blog

Geolocation/Maps

• 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

AR/VR

• 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

Storage

• https://medium.com/@bosung90/tackling-react-native-storage-part-1-d27b2bfa480f

Performance

• 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

Debugging

• https://medium.com/research-engineering-at-simply-technologies/react-native-debugging-like-a-god-9610ac2ffd12

• 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

Testing

• Gray box end to end testing using detox: https://hackernoon.com/detox-gray-box-end-to-end-testing-framework-for-mobile-apps-196ccd9564ce

• e2e tests in Reaact-Native: https://blog.callstack.io/time-to-detox-e8ba22f2c048

• Jest for testing react-native (4 parts): https://medium.com/react-native-training/learning-to-test-react-native-with-jest-part-1-f782c4e30101

• Graybox E2E Tests using Detox: https://www.youtube.com/watch?v=GgFFeI70PWw

• e2e testing in React-Native: https://blog.home.ht/how-to-do-end-to-end-testing-on-react-native-with-detox-2b7f404e7713

• Testing in React-Native (Part-1): https://medium.com/localz-engineering/react-native-testing-part-1-eea89402a588

Tooling/Analytics

• 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

Deployment

• 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

Offline functionality

• 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/

Authentication

• 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

Misc

• 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