Awesome
React Native Resources
This guide lists all the resources required to build React native apps, learn and stay up to date.
:books: Documentions:
-
Official React Native documentation The official react native documentation. Here you will find everything you need to get started with react native, all the information about its APIs and elements.
-
Official React Documentation Reading the react documentation helps when it comes to understanding react lifecycle and everything related to react because in the end react native is react.
-
Expo Expo is a bundle of tools created around React Native to help you start an app very fast. It provides you with a list of tools that simplify the creation and testing of React Native app. It equips you with the components of the user interface and services. Usually, they are available in third-party native React Native components[1]. Expo is great for starting with react native since it saves lots of time when it comes to configure, run and build apps.
:books: Guides:
-
The Ultimate Guide to React Native Optimization A must-read guide if you are familiar to React Native and are looking to improve the performance of your apps, learn more advanced topics and best practices. I consider this a game-changer in the RN world.
-
React Made Native Easy Guide I find this guide helpful because it gives examples of essential topics for React native applications such as linting, testing, folder structure, internationalization, etc. This guide gives you an overview of what you will deal with while building apps. It also gives you an idea of the best practices and the proper way to do things in react native.
-
A Definitive React-Native Guide for React Developers This guide gives you an overview of Expo and guides on how to build an app. It teaches you different techniques and several helpful pieces of information when it comes to building React native apps.
-
Tutorials Point Guide Here you can find lots of examples about react native core concepts and other useful resources.
:tv: Useful Youtube Channels
-
React Native School This channel provides different tutorials about a wide range of topics related to react native.
-
Evening kid A good channel to learn more about animations in react native. I think it is a good starting point when it comes to Reanimated, Moti, and Animated libraries.
-
Reactiive Mainly focusing on Reanimated Library. This channel gives you different well-explained tutorials on Reanimated, Moti, and Skia. I suggest starting with this channel after watching some of the videos from The Evening Kid.
-
Catalin Miron Wide range of tutorials on several topics but focusing more on Animated, Reanimated, Moti, and Skia recently. This channel is really informative with lots of examples and tutorials.
-
William Candillon William is one of the best developers when it comes to animations in react native. He is famous for his series "Can it be done in react native". His channels have a huge amount of tutorials and examples for Reanimated Library and now Skia. I suggest watching his tutorials after having some experience with the previous channels mentioned.
:eyes: Twitter Accounts To Follow
- React Native Official React Native Twitter account.
- React Native Radio A podcast about everything react native hosted by Infinite Red.
- William Candillon Maker of the “Can it be done in React Native?” YouTube series. He is currently working in Shopify.
- Evan Bacon One of the main people at Expo.
- React Native at Microsoft All things related to react native by teams across Microsoft.
- Fernando Rojo The author of Moti Library.
- Timothy Yung React Native Engineer at Meta.
- Kadi Kraman She is currently working at FormidableLabs and is an instructor on both egghead and Frontend Masters. Her courses are informative as she covers a wide range of advanced topics.
- Lorenzo Working at Microsoft and one of the big names in the react native space.
:boom: Icons
- React Native Vector Icons Perfect for quickly adding icons to your next project.
:art: UI Libraries
Several different UI libraries to use
- React Native Elements
- React Native Paper
- React Nativebase
- React Native UI Kitten
- React Native Materila Kit
:dancer: Animations
- Animated Default animation library from React Native
- Reanimated 2 Reanimated is a React Native library that allows for creating smooth animations and interactions that run on the UI thread.
- Moti Built on top of Reanimated, it makes creating animations much simpler.
- React Native Skia Skia is an open-source 2D graphics library that provides common APIs that work across a variety of hardware and software platforms. It serves as the graphics engine for Google Chrome and ChromeOS, Android, Flutter, and many other products.
:compass: Navigation
The most used navigation libraries to move to new screens and add header, tab bars, etc. React Navigation is the most used one.
:framed_picture: Images
- React Native Fast Image Useful for caching and loading images quicker. I would say it is a must when adding images to your app.
:sparkles: Linting and Styling
- ESLint For finding and fixing problems in your code.
- Prettier For styling and following a consistent coding style in your code.
- Husky For preventing adding unformatted code into your repository.
- Enforcing Consistent and Error Free Code in an Expo React Native Project with TypeScript A useful guide on how to add the above tools into your project.
:test_tube: Testing
Different testing libraries for react native.
:factory: CI/CD
Different CI/CD tools for React native apps.
:newspaper: Analytics, Performace, and Crash Reports
- Sentry Useful for collecting info about crashes and various performance data.
- React Native Firebase
- Segment
- Visual Studio App Center
:hammer_and_pick: Tools
- Shadow Generator GUI for creating shadows for both ios and Android.
- Convert web SVG to React Native SVG Excellent tool for converting web SVG to react native SVG
:globe_with_meridians: Internationalization
- i18next A popular internalization library
:scroll: Fast Performance Lists
When your list becomes bigger, these libraries help your list scroll smoothly and your list items load faster.
:chart: Graphs and Visualizations
Different chart libraries for react native.