Since its first release in 2015, React Native has been gaining more and more popularity. Its community is growing, and a lots of people are starting to write mobile applications using RN - including some big players like Facebook & Instagram (obvious ones), Skype, Pinterest, Uber etc (find more here). We decided to gather the top resources dealing with React Native created by the vibrant community within the last few years and share them with you.
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)
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.
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.
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.
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):
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.
Below you can find some useful tools that can help you with React Native app development.
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:
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.