React Native is the number one framework for building cross-platform mobile applications. It has numerous powerful features, seamless integration, and a huge and active community to sway your choice if you’re still unsure whether to use it.
Overall, React Native is all about productivity and focusing on your project instead of the framework itself. The ten tips below can help you work with this technology even more effectively and increase the quality of your work.
- Create and Organize Constants
In most cases, your project contains configuration variables for colors, navigation bar parameters (read here), page size for API calls, side menu width, and so on. Create constants for all these values and keep them named and organized in a separate file so that you can find and edit them easily. Also, it’s a good idea to create a separate file to hold all your message strings, in case you need to translate the app into a different language in the future.
- Distinguish Between “Smart” and “Dumb” Components
“Smart” components in your app are generally responsible for the functional portion of the application. They do the necessary computing, data fetching, distributing data to other components, and other operations concerned with how things work. “Dumb” components define how the app looks. It’s a good practice to organize your smart and dumb components appropriately by their purpose to make them easier to reuse.
- Use Flexbox
Use Flexbox layout module instead of absolute element positioning. Unlike the latter, Flexbox provides a consistent and stable layout on all screen sizes, and it’s significantly easier to reuse pieces of code when you utilize Flexbox.
- Keep Sensitive Data out of the App
Your project contains a lot of information that you should avoid storing locally. This includes project IDs, domains, API keys, clients’ personal data, and other pieces of information that could be damaging if exploited. Keep this data on a protected server rather than in your project.
- Develop a Crash Reporting Mechanism
First of all, make sure that you have a crash reporting mechanism in place. Crashlytics, Bugsnag, and numerous other tools for monitoring crash cases work seamlessly with React Native apps. Also, set up a system that will automatically track and log cases of failed usage. You can either code the logic yourself or use one of the already available tools like Amplitude. The mechanism will let you know when crash reports are inconsistent with the actual issue; for instance, when a user inputs their email address on the login screen instead of their username and flags it as a bug when they can’t enter the system. You can use this information both to avoid trying to fix working things and to make your app more intuitive and convenient.
- Use a Linter
A linter is a tool that analyzes your source code and highlights potential bugs, stylistic inconsistencies, problematic areas, and programming errors. It’s an incredibly useful tool to avoid checking everything manually and risking missing a critical error. In React Native, ESLint is the best option to use as a linter. It is easy to install and configure, and you can disable the rules that you disagree with in the configuration file before using the extension.
- Keep an Eye out for External Libraries
You can increase both the speed and effectiveness of your coding by using external libraries instead of writing each new piece of functionality from scratch. However, be sure to check whether the library you’re planning to use is still properly maintained, updated, and has good ratings.
- Consider Backwards Compatibility
You will certainly provide updates for your app when you introduce new functionality, remove some features, or implement another crucial change to the logic and architecture. Users, however, tend to linger with updating, either to wait the possible bugs out or simply due to negligence. Make sure that your app doesn’t crash or show unexpected behavior when it is not updated right away.
- Use the “Don’t Repeat Yourself” Principle
The Don’t Repeat Yourself principle suggests that you should always try to refactor your code into reusable pieces whenever you write the same logic twice. Even when it’s not the exact same piece of code, consider abstracting it. This will make your project cleaner and more modular, and you will spend significantly less time coding slight variations of the chunk of code that you already have.
- Maintain Consistent Folder Structuring
The best way to structure folders in a React Native app is to keep all UI files in views folder and all state-related files in redux folder. You can further structure the files in these folders by their function (for instance, components, actions, containers, and so on). Regardless of what approach you choose, focus on keeping the structuring consistent.
