Styling, Storage, and Navigation in React Native

Now that you know the general concepts behind React Native, it’s time to have a deeper look at the most common areas of React Native.

This chapter covers different areas, all of which are important when working with React Native. When creating a large app with React Native, you always have to have a good understanding of how the styling of your app works to create a beautiful product. Besides styling, there is another thing that decides if users will like your app from an aesthetic point of view – animation. However, this will be covered in Chapter 6, Working with Animations.

Another thing we will focus on in this chapter is how to store data locally on users’ devices. Every platform works differently. While Android and iOS are quite similar and you can get access to the device’s storage with huge capacity, this is completely different when working with the web, where capacity is very limited.

The...

Technical requirements

To be able to run the code in this chapter, you must set up the following:

• A working React Native environment (https://reactnative.dev/docs/environment-setup – React Native CLI Quickstart)
• While most of this chapter should also work on Windows, I recommend working on a Mac

Understanding how to style a React Native app

You can choose from different solutions to handle styling in your React Native app. But before we take a look at the most common ones, you must understand the underlying concepts. The first thing we’ll cover in this chapter is what all these solutions try to achieve.

Make styling maintainable

Styling is often handled very poorly when a project starts because it does not interfere with the business logic, so it isn’t likely to introduce bugs. So, most of the time, when thinking about the architecture of an application, most developers think of state management, data flow, component structure, and more, but not about styling. This always takes its toll when a project grows. It starts to take more and more time to keep a consistent design and making changes to your UI becomes a real pain.

Therefore, you should think about how to handle styling in your application right at the beginning. No matter what solution or library...

Using local storage solutions in React Native

Storing data locally is a very important task in mobile apps. Even nowadays, you cannot be sure that a mobile device is always connected to the internet. Because of this, it is best practice to create your app in such a way that it has as much functionality as possible, even without a connection to the internet. That said, you can see why storing data locally is important for React Native apps.

The most important criterion for differentiation for local storage solutions is if it is a secure or an unsecure storage solution. Since most apps store at least some information about the user, you should always think about which information you want to put in which store.

Important

Always use a secure storage solution to store sensitive information.

While it is important to store sensitive data in a secure store, most data, such as user progress, app content, and more, can be stored in a normal storage solution. Secure storage operations...

Understanding navigation in React Native

React Native does not come with a built-in navigation solution. That’s why we worked with a global state and simply switched components while navigating in our example app. While this works technically, it does not provide a great user experience.

Modern navigation solutions include performance optimization, animations, integration in global state management solutions, and much more. Before we dive deep into these solutions, let’s see what navigation looks like on different platforms.

Navigating different platforms

If you open any iOS or Android app, you’ll soon realize that navigation in an app is completely different from navigating the web in a browser. A browser navigates from page to page by replacing the old page with the new one. In addition to that, every page has a URL and can be accessed directly if it’s typed in the browser’s address bar.

In an iOS or Android app, navigation takes the...

Summary

Now that we’ve added a modern navigation library to our example project, it’s time to wrap up this chapter. First, you learned what you have to consider when you wish to style your application. You also learned about the most common solutions for styling React Native applications and learned which of them are suitable for sharing code with web projects.

Then, you learned how to store data locally in a React Native app. Finally, you learned how navigation is different between the web and mobile and how to use a modern navigation library to implement state-of-the-art navigation solutions in React Native apps.

In the next chapter, we’ll look at solutions for creating and maintaining a global app state and how to fetch data from external resources. While learning about this, we’ll fill the placeholder screen we created in this chapter with some cool functionality.