Common mistakes and some troubleshooting in React Native (Part 2)

Tram Ho

1. Can’t open the simulator on iOS.

If you encounter this problem with the following error code.

The first thing is you try to check if your Xcode has installed the simulator compatible with the default version and simulator of your Project. Here I am seeing that I cannot find the iPhone X device and I will enter.

To add a new virtual machine with the same name as the device not found

2. Expo should not be used for projects

You should not use Expo with your project. The reason is:

  • The whole process you do only cooperates with JS and does not perform fully detailed stages in the project production process.
  • You have no control over problems encountered directly on hardware devices and are not really proactive about this problem.
  • When you use Expo, you are adding a complex data package to your project, which slows down and increases application size.
  • Most importantly, the latest native iOS / Android modules that you definitely need to use at the moment will not be supported. You may use only those modules provided by the Expo SDK.
  • Sooner or later you’ll need to push the Expo app into a regular React Native app, so you shouldn’t waste your time with Expo and start the project properly.

3. Use ESLint.

Using a Linter in any project is a must, especially for a wild language like JavaScript. ESLint is a great extension, extremely easy to install, set up and use, so make sure to include it in your project from the start.

If you disagree with some rules, you can always disable them in the .eslintrc file, but there are some types of code quality control that will help you and your team in the long run.

4. Delete all logs from your release builds

There are many console.log statements that can slow down your application, especially if you are using logs libraries like redux-logger. Make sure to turn off all records (manual or script) when creating the release.

5. Use Flexbox

If you do not use Flexbox in React Native, it can lead to breaking the layout of the application and not provide the ability to reuse for components that you write.

Regardless of your design requirements, using flexbox is almost always the correct choice. For web-based people: The Flexbox in React Native works almost exactly like its CSS counterpart, the important difference being the default flexDirection column instead of row in React Native.

6. Name your Objects consistently

Should navigate your project to a consistent overall model, reuse and fast code is too common. And to remember all the common Components and Objects to reuse if you don’t name them consistently can be confusing. Therefore, you should have a fixed and consistent naming rule in the project to be able to work faster. For example :

If your submit button has a generic object, you should name it this style such as submitButton, saveButton, submitBtn or submit for other cases.

7. Use the correct ternary operator

Use the correct ternary operator

The ternary operator can help reduce the number of lines in your code but never nest them because the logic becomes difficult to read.

8. Do not abuse z-Index

Use z-Index when: For example, if you want to overlay <Text> on an <Image> , using z Index is the wrong way.

You should use the <ImageBackground> component instead.

You should not use many z-Index attributes because actually the source code has quite enough support for you already. And the inclusion of z-index makes your source even more confusing.

9. setState () asynchronous

This must be one of the most common errors in React Native.

Although changing the state of an element makes the view render again and you can see the information after the render, if you write something like setState ({username: ‘somevalue’}), Then try to read this.state.username in the next line of code so sometimes you won’t read the exact value.

Because setState () is an asynchronous operation.

Sử dụng await setState({ username })để tránh vấn đề này.

10. See you in the next post. 😍👍👍👍

Content collected and summarized from his experience. Thank you for reading.

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo