Recommendations for creating applications on React Native. Part 1
Good afternoon, Khabrovsk residents. Today we are sharing with you a translation of an article whose translation was prepared specifically for the first run of the ReactJS / React Native-Developer course. Enjoy reading.
If you are new to the React Native world, then you know that it has some pitfalls that you would like to avoid. In some cases, you will have to make a choice in advance without having the slightest idea how or what it will affect.
Below I have compiled a list of the best practical tips from my personal experience that I hope will be useful to you :)
Expo is a free open source tool for React Native. It is possible that this is the best set of tools for creating applications on React Native, however, it also has its limitations.
Use Expo:
Do not use Expo:
In general, I think Expo is a great tool, and I use Expo Snack myself to share React Native code. However, at the moment it can only be useful for creating certain types of applications.
Organizing an application on React Native is no different from organizing an application on React. Therefore, if you are familiar with this, then just adhere to the same logic. However, if this is not the case, then the logic outlined below will come in handy:
- Inside it I have up to three folders with fonts, icons and images.
- Here you will place all shared React components. Usually these are the components that we call “dummy” because they do not have state logic and can be easily reused inside the application.
- These are our application screens, those with which we move from one to another. React components are also stored here, the ones we call containers, because they store their own state.
- Parts that do not have a corresponding view (JCX) are stored there. Typical examples are the colors module (contains all the application colors) and the utils module (contains utility functions that can be reused).
- Here are the functions that wrap API calls.
- The translation is stored here for users with different languages and locales.
All applications require a certain type of configuration, so I usually create a file called
and store it there. If there are too many lines in the configuration file, you can create a separate
folder and split it into several files.
If you have a state management library, you will also need folders for its components. In the case of Redux, 2 or more folders are used, one for
and one for
. If you do not use external packages and prefer to use the React Context API, you can create your own providers, which can be placed in the modules folder or in the new
folder.
Unfortunately, RN does not yet have a complete solution or at least a worthy replacement for the old Navigator component, so now we will focus on how the community solves this problem. Therefore, if you are going to create a project and want to know which navigation library to use, this section is just for you.
In general, there are two types of navigation libraries: JavaScript navigators and Native navigators. The first ones are written in JavaScript, while the Native libraries are written in native modules according to the platform (Android, iOS) and connected to JavaScript modules to be forwarded to the code. The former are much easier to set up, while the latter are much more efficient. Take the time to figure out which type suits you best, and then choose from that many libraries of that type.
Spencer Carly has done a great job and developed the current Navigation options in the React Native world, you can read his article on this topic. The most popular solutions now are React Navigation , as a JavaScript solution, and React Native Navigation , as a Native solution.
React Native CSS is written in JavaScript. Here we have no choice. Personally, instead of using the StyleSheet.create method and CSS code in pure JavaScript, I use the Styled Components library. Styled Components make CSS clear again and make JSX more semantic.
I recently wrote an article about why I prefer to use Styled Components in React Native applications, you can read it to better understand the topic.
Most likely, you are developing an application for more than one device and screen size. Now there are two approaches to design and application development.
You can opt for a different UX / UI depending on the screen size. For most types of applications, this is probably the best option, but it requires a lot of effort, because you need to come up with and implement several screen options. Screen sizes can be determined using the Dimensions API . On the other hand, you can use a third-party package that out of the box provides some tools, such as the React Native Responsive UI .
Or you can use the same UI / UX, which will scale proportionally for all screen sizes. This is the best option if, for example, you are developing a game. Again, you can use a third-party package, for example, React Native Responsive Screen .
Animation is crucial for mobile applications, but React Native's performance is poor.
To protect against errors, you need to test the animation on the device, since the emulator does not provide the correct feedback. You also need to use
(with true) wherever possible, as this will help achieve better performance.
If you want more tips on how to achieve better performance, take a look at my previous article .
That's all. Learn more about the course here .
If you are new to the React Native world, then you know that it has some pitfalls that you would like to avoid. In some cases, you will have to make a choice in advance without having the slightest idea how or what it will affect.
Below I have compiled a list of the best practical tips from my personal experience that I hope will be useful to you :)
Use Expo-Kit only if you really know what you are doing.
Expo is a free open source tool for React Native. It is possible that this is the best set of tools for creating applications on React Native, however, it also has its limitations.
Use Expo:
- If you just want to create a sandbox and not create a repository for your application. Just create a new application using the create-react-native-app package.
- If you conducted a study before creating the application, and realized that all its needs can be covered by the solutions that Expo offers.
- If you do not have a Mac OS computer, but you still want to create iPhone applications. This is the only alternative for creating IPA executables.
Do not use Expo:
- If you are new to React Native and you think this is the only way to build an application. First of all, check if it meets your requirements.
- If you plan to use third-party RN packages with native user modules. Expo does not support this functionality, in which case you will need to extract the (eject) Expo-Kit . In my opinion, if you are going to initially extract any set of tools, you should not use it at all. The extraction procedure will complicate the creation of the application, compared to if you did not use it at all.
In general, I think Expo is a great tool, and I use Expo Snack myself to share React Native code. However, at the moment it can only be useful for creating certain types of applications.
How to structure folders and files of your application
Organizing an application on React Native is no different from organizing an application on React. Therefore, if you are familiar with this, then just adhere to the same logic. However, if this is not the case, then the logic outlined below will come in handy:
- Add the folder to the root and name it “app”;
- Create folders inside the “app”:
assets
- Inside it I have up to three folders with fonts, icons and images.
components
- Here you will place all shared React components. Usually these are the components that we call “dummy” because they do not have state logic and can be easily reused inside the application.
views
- These are our application screens, those with which we move from one to another. React components are also stored here, the ones we call containers, because they store their own state.
modules
- Parts that do not have a corresponding view (JCX) are stored there. Typical examples are the colors module (contains all the application colors) and the utils module (contains utility functions that can be reused).
services
- Here are the functions that wrap API calls.
i18n
- The translation is stored here for users with different languages and locales.
All applications require a certain type of configuration, so I usually create a file called
config.js
and store it there. If there are too many lines in the configuration file, you can create a separate
config
folder and split it into several files.
If you have a state management library, you will also need folders for its components. In the case of Redux, 2 or more folders are used, one for
actions
and one for
reducers
. If you do not use external packages and prefer to use the React Context API, you can create your own providers, which can be placed in the modules folder or in the new
providers
folder.
We select the navigation library according to your needs
Unfortunately, RN does not yet have a complete solution or at least a worthy replacement for the old Navigator component, so now we will focus on how the community solves this problem. Therefore, if you are going to create a project and want to know which navigation library to use, this section is just for you.
In general, there are two types of navigation libraries: JavaScript navigators and Native navigators. The first ones are written in JavaScript, while the Native libraries are written in native modules according to the platform (Android, iOS) and connected to JavaScript modules to be forwarded to the code. The former are much easier to set up, while the latter are much more efficient. Take the time to figure out which type suits you best, and then choose from that many libraries of that type.
Spencer Carly has done a great job and developed the current Navigation options in the React Native world, you can read his article on this topic. The most popular solutions now are React Navigation , as a JavaScript solution, and React Native Navigation , as a Native solution.
For convenience, use the CSS-in-JS wrapper library
React Native CSS is written in JavaScript. Here we have no choice. Personally, instead of using the StyleSheet.create method and CSS code in pure JavaScript, I use the Styled Components library. Styled Components make CSS clear again and make JSX more semantic.
I recently wrote an article about why I prefer to use Styled Components in React Native applications, you can read it to better understand the topic.
Decide in advance how you want your application to scale on different devices with different screen sizes.
Most likely, you are developing an application for more than one device and screen size. Now there are two approaches to design and application development.
You can opt for a different UX / UI depending on the screen size. For most types of applications, this is probably the best option, but it requires a lot of effort, because you need to come up with and implement several screen options. Screen sizes can be determined using the Dimensions API . On the other hand, you can use a third-party package that out of the box provides some tools, such as the React Native Responsive UI .
Or you can use the same UI / UX, which will scale proportionally for all screen sizes. This is the best option if, for example, you are developing a game. Again, you can use a third-party package, for example, React Native Responsive Screen .
Disclaimer: I am the creator of the React Native Responsive Screen package.
Be careful with animation
Animation is crucial for mobile applications, but React Native's performance is poor.
To protect against errors, you need to test the animation on the device, since the emulator does not provide the correct feedback. You also need to use
useNativeDriver
(with true) wherever possible, as this will help achieve better performance.
If you want more tips on how to achieve better performance, take a look at my previous article .
Also remember
- React Native has no DOM elements. Instead, we work with native elements.
- About CSS:
- Not all features are supported, at least not yet. To learn more, check out the documentation: View Style properties, Image Style properties, Text Style properties.
- Shorthand properties do not always work well, so it’s better to use specific ones (such as margin-bottom, margin-top, margin-left, margin-right instead of margin).
- Not all properties support percentages. For example, the following: margin, border-width and border-radius. If someone tries to use percentage values, either RN will ignore them, or the application will crash in principle.
- RN supports flex out of the box. Examine it and use when appropriate. This is the best CSS ally!
That's all. Learn more about the course here .
All Articles