Some stats and facts
By the year 2020, mobile apps are set to generate $188.9 billion in global revenues via app stores and in-app advertising (by Statista.com)
Cross-platform is rapidly growing and is estimated to increase from $25.19 billion in 2015 to $80.45 billion in 2020 (by MarketsAndMarkets.com)
Official React Native Documentation
The first resource that should be mentioned is the official React Native documentation. It is extensive, well written and it should be the first place that you visit during your travels through the React Native world :) The official React Native documentation is the best place to learn the basics and dive deeper into features. The documentation is always up-to-date, so if you want to check the newest version or know more about core concepts - here is the place you should start.
React Native styling cheat sheet
Another useful link is the React Native styling cheat sheet - React Native styling material from the official documentation in one handy document.
More about styling - if you go through the “Learn the Basics” chapter of the React Native documentation, you will find Flexbox mentioned there. Flexbox is a well-known CSS module, but CSS as a whole can’t be used with React Native apps - some CSS properties are emulated. In the flexbox system which React Native uses, we need to think in terms of two axes - the main axis and the cross axis. Flexbox is designed to provide a consistent layout on different screen sizes, so during mobile app development you probably will be using a lot of it. This article can help you get familiar with it. If you want to understand this system better - it’s the best place to start styling with Flexbox.
As probably you will choose the Redux architecture for your React Native app, it is good to get a better understating of its core concepts and how it works. And the best source would be their official documentation.
React Native Quick Start
Egghead.io is a set of tutorials that usually cover solutions to hard-to-find pain points (including advanced animations). Examples: “How to make a parallax effect” or “How to handle textinput with keyboard”. The tutorials are usually very short and specific - going through them and understanding the code written there could save you time you’d normally fighting with more advanced concepts.
React Native Development Tips & Tricks
More about saving time: would you like to avoid mistakes? Learn from someone else’s experience! The article 11 mistakes I’ve made during React Native / Redux app development introduces good practices with file/component structures and shows useful tips for React Native development.
The Complete React Native and Redux Course available on Udemy is a good supplement to the official docs for a complete beginner. Here’s what you will learn with this material (from the description of the course):
- creating real-world native apps using React Native,
- making truly reusable components that look great,
- understanding the terminology and concepts of Redux,
- Prototyping and deploying your own applications to the Apple and Google Play Stores,
- getting up to speed with React design principles and methodologies
- and more.
The React Native - The Practical Guide course can be a good choice if you want to learn all about the theory behind React Native, its core concepts, how to build responsive designs that work on different device screen sizes, how to animate React Native apps, how to navigate around, use maps and the camera - and much more. The course provides a good cross-section of React Native. The author of the course - Maximilian Schwarzmüller (Professional Web Developer and Instructor) - has a very good background in programming, and he knows a lot about app and web development. This course is very clear and understable.
Ready for more advanced concepts? In the React Native: Advanced Concepts course you’ll build three separate apps with increasing complexity. Each of them will profile different features of React Native. By putting each concept into a real app, you’ll get a better idea of when to use each unique and powerful feature. You'll learn the theory and practice of implementing complex Animation systems, how to navigate your users around using React-Navigation, how to send to your users automated push notifications, and much more.
- React Native talks from the Chain React conference give a lot of useful insights into the environment’s future
- React Native EU conference - here, you can find resources from the first community conference in Europe focused exclusively on React Native
Below you can find some useful tools that can help you with React Native app development.
- React Native Debugger - The standalone app based on the official debugger of React Native, which includes React Inspector / Redux DevTools.
- Reactotron - A desktop app for inspecting your React JS and React Native projects. For macOS, Linux, and Windows.
- Postman - for checking requests. Postman helps you be more efficient while working with APIs. Using Postman, you can construct complex HTTP requests quickly, organize them in collections, and share them with your co-workers.
- Zeplin / Sketch measure / Invision inspect - for checking/measuring designs.
- VSCode + React Native Tools extension for debugging - good code editor with an extension that is useful for developing React Native apps.
- Android Studio, XCode - IDEs for native Android and iOS development (respectively). While you can use any editor of your choice to develop your app, you will need to install Android Studio/XCode in order to set up the necessary tooling to build your React Native app for Android/iOS.
Best Open Source Resources
Open source software is an integral part of every app’s development. It provides great solutions for common problems, saving lots of development time. One of the values of the IT world is sharing knowledge and experience and helping each other, so here’s a list that you can make use of:
- React Native FastImage - An Image replacement that solves low performance issues related to caching images.
- NativeBase - Essential cross-platform UI components for React Native.
- React Native Elements - Cross-platform React Native UI toolkit.
- React Native Snap Carousel - Swiper component for React Native with previews, multiple layouts, parallax images, performant handling of huge numbers of items, and RTL support. Compatible with Android & iOS.
- React Native Vector Icons - Customizable icons for React Native with support for NavBar/TabBar/ToolbarAndroid, image sources, and full styling.
- Styled components - A tool for creating universal styled components like containers, buttons etc.
- Localizations - Integrates I18n.js with React Native (features: pluralization, date/time localization, number localization, locale fallback, asset pipeline support, and more).
- React Native Sentry - for tracking crashes (when using this library you will get a lot more information about the device experiencing crashes).
- Redux Form - HOCs (Higher Order Component) - a wrapper component for easier form handling in Redux.
- React Native Image Picker - A React Native module that allows you to use the native UI to select media from the device library or directly from the camera.
- React Native IAP - A React Native native module for in app purchases.
- React Native SVG - Easy to use React Native library to help you start working with SVG files.
- React Navigation - Routing and navigation for your React Native apps.
The resources mentioned in this post will provide you with a good understanding of React Native - its core concepts and the basic structure of a React Native app, good practices with file/component structures, the React Native debugger, as well as with useful tips for React Native development and more advanced topics.
If you’re interested in expanding your knowledge in the offline world make sure that you are up to date with our blog and the Netguru Code College initiative! During the Netguru Code College participants have the opportunity to work in small groups on their own React Native apps. Each group can count on our experienced developers who offer help, guide participants through the process of creating an app, and answer questions. After 2 days - 16 hours of coding - besides gaining new knowledge, experience and having a lot of fun - participants will have one RN application more in their Github portfolio.
The Netguru Code College is organised in our offices in Poland, with the React Native edition taking place in our HQ in Poznań, but we’re sure that you will find other interesting workshops and meetups in your city or near it. This kind of activity can give you a lot of knowledge - you interact with experienced people, you can learn faster, and sometimes get to know tips & tricks that you would spend much time finding on the internet, so it’s worth it to take part.
Have we missed something? Share your favorite resources in the comments!
The resource list was prepared by: Natalia Muryn, Daniel Idaszak, Utku Uysal, Marcin Kornek, Marek Lisik and Paweł Karniej.