Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/hayanisaid/react-native-developer-roadmap

📒 React Native is a cross-platform library to build mobile apps using React and JavaScript. This guide is to help you in your React Native journey. this repo contain a great the resources you need to work with React Native art,(Articles, Tutorials)
https://github.com/hayanisaid/react-native-developer-roadmap

react-native react-native-app react-native-content react-native-debugger react-native-developer-roadmap react-native-developer-tools react-native-navigation react-native-resources react-native-turorial react-navigation reactjs

Last synced: 2 days ago
JSON representation

📒 React Native is a cross-platform library to build mobile apps using React and JavaScript. This guide is to help you in your React Native journey. this repo contain a great the resources you need to work with React Native art,(Articles, Tutorials)

Awesome Lists containing this project

README 

        
#  📚 The React Native Developer Roadmap 📚






React Native is a cross-platform library to build mobile apps using React and JavaScript. This guide will help you on your React Native journey. This repo contains great resources you need to work with React Native (e.g. Articles, Tutorials, Blog Posts).



# 🟢 Intro to React Native



Here are some good resources that will introduce you to React Native and give you some insights about the React Native ecosystem.



- 📌 [Blueprint to becoming a React Native Developer](https://medium.com/differential/blueprint-to-becoming-a-react-native-developer-6cad2b894887#.t3uw4j4u8)

-  📌 [Getting started with React Native](https://www.sitepoint.com/getting-started-with-react-native/)

- 📌 [What you need to know to get started with React Native](https://www.freecodecamp.org/news/what-you-need-to-know-to-start-building-mobile-apps-in-react-native-dded951277b7/)



## 🔨 Setup the Environment for React Native



After you get an idea about React Native, it's now time to start setting up the ground to build things.



### 📱Setup iOS Environment



- 📌 [Setting up the environment development](https://reactnative.dev/docs/environment-setup)

- 📌 [How to setup development environment for React-Native on Mac](https://medium.com/@waqqas/how-to-setup-development-environment-for-react-native-on-mac-85fb216ba0ff)

- 📌 [React Native Environment setup](https://www.tutorialspoint.com/react_native/react_native_environment_setup.htm)

- 📌 [How to install React Native on MacOS](https://www.educative.io/edpresso/how-to-install-react-native-onmacos)

- 📌 [How to REALLY set up a React Native environment on Mac](https://dev.to/rob117/how-to-really-set-up-a-react-native-environment-on-mac-248h)



### 🤖 Setup Android Environment



- 📌 [Get started developing for Android using React Native](https://docs.microsoft.com/en-us/windows/dev-environment/javascript/react-native-for-android)

- 📌 [Android React Native Window Setup-How to Setup Android Environment for React Native App](https://kirtikau.medium.com/android-react-native-window-setup-how-to-setup-android-environment-for-react-native-app-588aaa13c3a6)

- 📌 [Android Setup](https://www.decoide.org/react-native/docs/android-setup.html)

- 📌 [React Native Environment set up on Mac OS with Xcode and Android Studio](https://medium.com/@pabasarajayawardhana/react-native-environment-set-up-on-mac-os-with-xcode-and-android-studio-324e64c8552e)



# ⚙️ Debugging



Here is some content to help learn how to debug a React Native app ⬇️.



- 📌 [Tools for debugging React Native](https://www.sitepoint.com/tools-for-debugging-react-native/)

- 📌[Debugging in React Native](https://reactnative.dev/docs/debugging)

- 📌[How To Debug React Native Apps Like A Pro? (Tools And Best Practices)](https://www.ideamotive.co/blog/how-to-debug-your-react-native-apps-like-a-pro)

- 📌 [Debugging in React Native: Flipper vs React Native Debugger vs Reactotron](https://www.fullstacklabs.co/blog/debugging-react-native-apps-flipper-vs-react-native-debugger-vs-reactotron)



## Debugging tools



 - [React Native Debugger](https://github.com/jhen0409/react-native-debugger)

 - [Flipper](https://fbflipper.com/)

 - [reactotron](https://github.com/infinitered/reactotron)



# 💅 Styling



Learn how to do styling in React Native with these resources below:



## 📖 Articles



- 📌 [Styling in React Native](https://blog.bitsrc.io/styling-in-react-native-c48caddfbe47)

- 📌 [React Native style docs](https://reactnative.dev/docs/style)

-  📌 [React Native styling tutorial with examples](https://blog.logrocket.com/react-native-styling-tutorial-with-examples/)

- 📌 [Demystifying Flexbox in React Native](https://blog.bitsrc.io/demystifying-flexbox-in-react-native-4b62979fa9ea)

- 📌 [Getting Started With React Native Flexbox Layout](https://programmingwithmosh.com/react-native/getting-started-with-react-native-flexbox-layout/)

- 📌 [A Mini-Course on React Native Flexbox](https://medium.com/the-react-native-log/a-mini-course-on-react-native-flexbox-2832a1ccc6)

- 📌 [Understanding Flexbox in React Native](https://blog.reactnativecoach.com/understanding-flex-in-react-native-b34dfb4b16d1)

- 📌 [Applying and Organizing Styles in React Native](https://freecontent.manning.com/applying-and-organizing-styles-in-react-native/)



## 📚 Styling libraries



- 📒 [react-native-extended-stylesheet](https://github.com/vitalets/react-native-extended-stylesheet)

- 📒 [styled-components](https://styled-components.com/docs/basics#react-native)

- 📒 [react-native-CSS](https://github.com/sabeurthabti/react-native-css)

- 📒 [react-native-tailwindcss](https://github.com/TVke/react-native-tailwindcss)



# 🖌 Building React native components and Layout



- 📌 [Easily Build Forms in React Native](https://medium.com/react-native-development/easily-build-forms-in-react-native-9006fcd2a73b)

- 📌 [Building React Native forms with UI components](https://blog.logrocket.com/build-better-forms-with-react-native-ui-components/)

- 📌 [How to create Custom Component in React native?](https://www.skcript.com/svr/how-to-create-custom-component-in-react-native/)

- 📌 [Custom Component in React Native](https://www.fastfwd.com/custom-component-in-react-native/)

- 📌[Create native UI component in React Native](https://medium.com/@yrezgui/create-native-ui-component-in-react-native-6f4b7fe4cc95)



# Navigation



- 📌 [Introducing React Navigation 5](https://saidhayani.medium.com/introducing-react-navigation-5-116accf6609c)

- 📌 [React Native navigation: React Navigation examples and tutorial](https://blog.logrocket.com/navigating-react-native-apps-using-react-navigation/)

- 📌 [How To Use Routing with React Navigation in React Native](https://www.digitalocean.com/community/tutorials/react-react-native-navigation)

- 📌 [Building a React Native App With Complex Navigation Using React Navigation](https://medium.com/@jan.hesters/building-a-react-native-app-with-complex-navigation-using-react-navigation-85a479308f52)



# 🔑 Authentication 






- 📌 [How to Add Authentication to React Native in Three Steps Using Firebase](https://www.freecodecamp.org/news/how-to-add-authentication-to-react-native-in-three-steps-using-firebase/)

- 📌 [Add Authentication to your React Native App](https://www.ory.sh/react-native-authentication-login-signup/)

- 📌 [Create a React Native App with Login in 10 Minutes](https://developer.okta.com/blog/2019/11/14/react-native-login)

- 📌 [React Native Authentication Flow, the Simplest and Most Efficient Way](https://levelup.gitconnected.com/react-native-authentication-flow-the-simplest-and-most-efficient-way-3aa13e80af61)

- 📌 [Adding Authentication to Your React Native App Using JSON Web Tokens](https://auth0.com/blog/adding-authentication-to-react-native-using-jwt/)

- 📌 [How to set up email authentication with React Native, react-navigation, and Firebase](https://blog.logrocket.com/how-to-set-up-email-authentication-with-react-native-react-navigation-and-firebase/)

- 📌 [Implementing secure passwordless authentication in React Native apps with Auth0](https://blog.logrocket.com/secure-passwordless-authentication-react-native-auth0/)



# 🪄 Animations



- 📌 [How to use Reanimated 2 (a beginners guide)](https://medium.com/react-native-school/how-to-use-reanimated-2-a-beginners-guide-b18b41dc74cc)

- 📌 [Making Animations In React Native— The Simplified Guide](https://blog.bitsrc.io/making-animations-in-react-native-the-simplified-guide-6580f961f6e8)

- 📌 [Top 5 Animation Libraries in React Native](https://blog.bitsrc.io/top-5-animation-libraries-in-react-native-d00ec8ddfc8d)

- 📌  [React-Native Animated Polyline](https://medium.com/@shayamthomas.official/react-native-animated-polyline-9c1d31b2bde7)

- 📌 [Implementing FoldView in React Native](https://commitocracy.com/implementing-foldview-in-react-native-e970011f98b8)

- 📌 [How Animations Work in React Native](https://www.freecodecamp.org/news/how-react-native-animations-work/)

- 📌 [The top 6 animation libraries in React Native](https://blog.logrocket.com/the-top-6-animation-libraries-in-react-native/)



## UI libraries for styling



- 📌 [How to build React Native UI app with Material UI](https://blog.codemagic.io/how-to-build-react-native-ui-app-with-material-ui/)

- 📌 [Top 5 Animation Libraries in React Native](https://blog.bitsrc.io/top-5-animation-libraries-in-react-native-d00ec8ddfc8d)

- 📌 [Comparing React Native UI libraries](https://blog.logrocket.com/comparing-react-native-ui-libraries/)



# Deployment and publishing to App Stores



- 📌 [How to Deploy a React Native IOS app on the App Store](https://readybytes.in/blog/how-to-deploy-a-react-native-ios-app-on-the-app-store)

- 📌 [Build an iOS App with React Native and Publish it to the App Store](https://developer.okta.com/blog/2019/04/05/react-native-ios-app-store)

- 📌 [Uploading Apps to the Apple App Store and Google Play](https://docs.expo.io/distribution/uploading-apps/)

-  📌 [Deploying React Native Apps to App Store and Play Market : Step-by-Step Guide](https://apiko.com/blog/deploying-react-native-apps-to-app-store-and-play-market/)

- 📌 [How to Deploy a React Native App for iOS and Android](https://instabug.com/blog/react-native-app-ios-android/)

- 📌 [How to build and upload a React Native app to the iOS App Store using Expo](https://www.soeasie.com/blog/how-to-build-and-upload-a-react-native-app-to-the-ios-app-store-using-expo)

- 📌 [How to Deploy a Create-React-Native-App to the AppStore](https://codeburst.io/how-to-deploy-a-create-react-native-app-to-the-appstore-229a8fa36fb1)



# 🔋 Performance



- 📌 [Optimize your React Native app performance](https://blog.logrocket.com/optimize-your-react-native-app-performance/)

- 📌 [How to improve the performance of a React Native app](https://blog.codemagic.io/improve-react-native-app-performance/)

- 📌 [Comparing the Performance between Native iOS (Swift) and React-Native](https://medium.com/the-react-native-log/comparing-the-performance-between-native-ios-swift-and-react-native-7b5490d363e2)



# 🪤 Build fun things and real projects with React Native



After getting your hands on React Native, it's time to build and practice what you've learned. Here are some fun projects to work on:



- 📌 [“Can it be done in React Native?” — a case for declarative gestures and animations](https://medium.com/@wcandillon/can-it-be-done-in-react-native-a-case-for-declarative-gestures-and-animations-823ae04f306b)

- 📌 [Can it be done in React Native? Revolut chart using D3](https://levelup.gitconnected.com/can-it-be-done-in-react-native-revolut-chart-using-d3-52cecfe93639)

- 📌 [Can this be done in React Native? Building the Chrome iOS TabBar](https://levelup.gitconnected.com/can-this-be-done-in-react-native-chrome-ios-tabbar-c76e5698dfb7)

- 📌[Building Serverless Mobile Applications with React Native & AWS](https://medium.com/react-native-training/building-serverless-mobile-applications-with-react-native-aws-740ecf719fce)



# React Native developers to follow



It's important that you always keep up-to-date with React Native news and learn new things to grow your skills. Here are some folks in the React Native community that will benefit you on your React Native journey:



- 🔸 [William Candillon](https://medium.com/@wcandillon)

- 🔸 [Aman Mittal](https://blog.logrocket.com/author/amanmittal/)

- 🔸 [Catalin Miron ](https://twitter.com/mironcatalin)

- 🔸 [Evan Bacon](https://twitter.com/Baconbrix)

- 🔸 [Satyajit Sahoo](https://twitter.com/satya164)

- 🔸 [Jonny Burger](https://github.com/JonnyBurger)

- 🔸 [Leo Natan](https://github.com/LeoNatan)

- 🔸 [Nicolas Charpentier](https://github.com/charpeni)

- 🔸 [Spencer Carli](https://github.com/spencercarli)

- 🔸 [Nader Dabit](https://github.com/dabit3)

- 🔸 [Eli White](https://github.com/TheSavior)

- 🔸 [Vadim Savin/notJustDev](https://github.com/notJust-dev)

- 🔸 [Marc Rousavy](https://github.com/mrousavy)

- 🔸 [Jamie Birch](https://github.com/shirakaba)



# 📚 Books



- 📒 [React Native in Action by Nader Dabit](https://www.manning.com/books/react-native-in-action)

- 📒 [LEARN REACT NATIVE](https://www.newline.co/fullstack-react-native/)



# Contributors



All contributions are welcome: editing, adding a resource, fixing grammar, etc..

1. Fork the repo 

2. Create your own branch

3. Submit a pull request ✅