The React Native Roadmap and Guide for Beginners
Loading...
Loading...
Congratulations for completing this resource! Mark it as completed to track your progress.
React Native - a framework used to build amazing Android and iOS native mobile applications using the library you already know all about - .
React Native is a library that allows you to build native mobile apps using & . This differs from frameworks like Cordova, where you use HTML to create the UI, which will then just be displayed within the device’s integrated mobile browser ().
React Native has built-in components compiled to native UI components, while your code is executed through a virtual machine. This makes React Native more performant than Cordova.
Here are the Prerequisites before learning React Native:
If you are a complete beginner with no idea about programming, you must first learn JavaScript and understand working with it before learning React or React Native. Without essential concepts of JavaScript, you’ll understand nothing.
Start learning the basics of JavaScript at first, and once you are comfortable with that, then move to learn some advanced concepts of JavaScript.
Things you should consider learning →
Learn React.js. It’s not officially mandatory to learn React.js before learning React Native, but a solid knowledge of React.js concepts will give you a big advantage in learning React Native.
So, I highly recommend learning React.js first before learning React Native. You don't have to master React.js; you’re good to go with the concepts.
Concepts you should know in React.js →
If you haven’t learned yet, I suggest watching my React crash course video.
You should at least know the primary use of the terminal. In , you’ll work with CLI tools such as or . I highly recommend learning how to use the terminal. Also, it will be beneficial for you in the long run.
One more reason to learn the terminal is using , which does not have a GUI. Every package must be installed manually via the command in a terminal window. This may seem annoying to non-shell users, but it actually offers much more control.
If you prefer videos over reading and want to learn the latest features in-depth, check out our FREE React Native crash course on YouTube.
It goes beyond this guide and will help you understand all the concepts better.
Now that you have completed the prerequisites, you can finally start learning React Native.
You’ll have two options to set up a React Native environment:
So, which one should you choose? Let’s see what React Native recommends.
React Native recommends using the if you are already familiar with Mobile App Development. However, if you are new to mobile app development and want to get the project quickly set up, is recommended.
Expo is built on top of the and provides many built-in APIs and tools which will take your good time to set up in the .
But why do we have if Expo is that useful? Many native APIs are not yet supported in Expo, like Bluetooth and more. Not all iOS and Android APIs are available.
Read more about Expo Limitations .
Still, I’d strongly suggest that you use as it’ll be more than enough for almost all of your projects.
You can add styling to your component using props. You add props to your element. It accepts an object of properties.
If you have a large codebase or want to set many properties to your elements, writing our styling rules directly inside props will make our code more complex. For that reason, React Native gives us another way to write concise code using the method.
You can use with React Native to write your styles in React Native as you write regular CSS.
Styled-components is a library built for React and React Native developers. It allows you to use component-level styles in your applications.
Styled-components leverage a mixture of JavaScript and CSS using a technique called CSS-in-JS.
allows you to use Tailwind CSS to style your components in React Native. Styled components can be shared between all React Native platforms, using the best style engine for that platform; CSS StyleSheet on web and StyleSheet.create for native. Its goals are to provide a consistent styling experience across all platforms, improving Developer UX, component performance, and code maintainability.
React Native uses for layout, which makes it easy to arrange UI elements within a container. It’s a crucial concept to learn for building your UI efficiently without relying on external libraries.
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Hello, Flexbox!</Text>
</View>In this example, the ensures the takes up the full screen, and and center the text both vertically and horizontally.
When your app has multiple screens, you’ll need navigation to switch between them. is an easy-to-use library for managing screen transitions and routing.
<Button title="Go to Next Screen" onPress={() => navigation.navigate('NextScreen')} />Here, the function triggers navigation to a screen named . makes it easy to manage transitions.
Users interact with mobile apps mainly through touch. They can use a combination of gestures, such as tapping on a button, scrolling a list, or zooming on a map.
React Native provides components to handle all sorts of common gestures and a comprehensive to allow for more advanced gesture recognition.
There are three touchable components: , , and . Among them, is the most widely used one.
<TouchableOpacity onPress={() => alert('Button Pressed!')}>
<Text>Press Me</Text>
</TouchableOpacity>If you’re building an app, it’s almost a guarantee that you’ll have to make at least one form. You’ll probably build , , and similar. We need a better way of working with forms that are easy to write, maintainable, and, more importantly, developer-friendly.
Developers in the community build some excellent libraries that make it possible to create complex forms quickly. You can consider the following options:
If the application you’re working on is a bigger application, you need a better strategy for managing the state and sharing it across components. To implement a better plan, you’ll need to use a state management library.
A state management library is simply a way to engender communication and sharing of data across components. You can consider learning the following options:
Animations are essential for a good user experience. In React Native, you have plenty of options to work with energy and explore your creativity.
They are mainly used to interact with users’ actions, keeping the user more engaged with your app. Animations can quickly become one of the key factors that users love engaging with on your mobile app.
Some excellent animation libraries are:
Almost everywhere, you will need to authenticate users in your application. Authentication allows us to secure our apps or limit access for non-user members.
Authentication can also be used, for example, to restrict access to a paid service or specific service. So it’s helpful to learn how to implement Authentication in React Native apps.
Quality unit testing is super important if you want your application to be more stable. You can consider using these tools:
You finally made a app, and you want your friends and family to be able to use it, or maybe you even want to make a few dollars off it! Publishing your application on the app store and play store takes a bit of time, but I’d still recommend that you learn how to do that.
In the meantime, there’s a much better solution. You can have your application online and accessible to everyone in a matter of minutes!
The only thing you need to do is run the command:
After running it, your terminal will immediately give you a link that you can share with your friends and potential employers to showcase your app or even help you land a job.
These tools make CSS easier by allowing features like variables and nested styles, helping you organize your code better.
TypeScript adds safety to your JavaScript by catching mistakes early and making your code clearer with defined data types.
ESLint helps you write cleaner, more consistent code by checking for common errors and enforcing best practices.
There’s always more to learn in web/app development—so keep exploring!
But hey, learning doesn't have to stop here. React Native is a constantly evolving framework, and there’s always more to explore and master. Remember, React Native is all about building great apps, and the more you practice and experiment, the better you’ll become.
There's always something new to learn, so continue exploring, building, and sharing your knowledge with the community.
To take your skills even further, check out our course below, where we walk you through building a fully functional app from start to finish. It’s a great way to apply what you’ve learned and gain hands-on experience.
Happy coding, and keep building! 🚀
