React Native Best Practices

1. Leverage TypeScript 

Take advantage of TypeScript for type safety and maintainability in React Native development. TypeScript is a statically typed extension of JavaScript. It makes type safety a requirement, meaning that the variables you are using are of the type you expect them to be.

This can be a great time-saver when it comes to debugging. You will not need to go through all your variables to check if they are of the right type. You can code at the double with its auto-completion functionality.

In addition, you can integrate it with common React Native libraries and third-party APIs. To learn this, let's see a simple function that computes the order price in a React Native application.

function calculateOrderPrice(order) {
return order.price + 1200;
}

This method functions, but it is still not clear. We can't be sure if the order object even has a price field, and if it does exist, we don't know its type. The app might crash when it tries to run if the field is missing or its value isn't a number.

This could happen, for example, when you try to show a UI element that uses the result. Let's see how TypeScript sets up the order structure to make sure the types are safe.

interface Order {
price: number;
name: string;
taxPercentage: number;
}
function calculateOrderPrice(order: Order) {
const { price, taxPercentage } = order;
const taxValue = price * taxPercentage;
return price + taxValue;
}

After that, TypeScript makes sure that the order matches the type { price: number name: string, taxPercentage: number }. Your code editor warns you about mistakes when you input a wrong object or misuse a property, preventing crashes.

Plus, autocomplete shows you the fields you can use, making it simpler to add things like name to a <Text> component. This clear and safe approach makes TypeScript a must-have for big growing React Native apps.

2. Functional Components over the Class Components

Functional and class are two important components of React Native. However, it's better to use functional components over class. The reason is they are uncomplicated, short and sweet, and faster than class components. In this way, you can write a code that can easily be read, written, and tested.

Plus, the performance improvement they provide is a plus. There is one more reason that class components are more tricky than functional components. Therefore, often have a longer and more involved learning curve.

For these reasons, functional components are preferred to class components in React Native.

However, you'll still require class components when working with old code written for class components.

Class Component Example:
import React, { Component } from 'react';
class ClassComponent extends Component {
constructor(props) {
super(props);
this.state = {
count: 0,
};
}
incrementCount = () => {
this.setState({ count: this.state.count + 1 });
};
render() {
return (
<View>
<Text style={styles.h1}>Class Component</Text>
<Text>Count: {this.state.count}</Text>
<Button title='Increment' onPress={this.incrementCount}/>
</View>
);
}
}
export default ClassComponent;

In this component class example, we're using the Component class to define a component. State is handled inside the constructor. The render method specifies the UI of the component.

Functional Component Example:

import React, { useState } from 'react';
const FunctionalComponent = () => {
const [count, setCount] = useState(0);
const incrementCount = () => {
setCount(count + 1);
};
return (
<View>
<Text style={styles.h1}>Functional Component</Text>
<Text>Count: {count}</Text>
<Button title='Increment' onPress={incrementCount}/>
</View>
);
};
export default FunctionalComponent;

This is an example of a functional component. It applies the useState hook to manage state using React. The component describes a simple JavaScript function that will return JSX to render the UI.

Function components are easy to write and quite manageable. In the long run, it means you will have less boilerplate code. Moreover, it goes hand in hand with the new React ecosystem.

Not only that, but they are quite easy to optimize and test. Using this will improve your development process and provide more readable code.

3. Import your dependencies in order

Imagine you have a single file with many imports. If the dependencies aren’t in order, it can be a lot of effort and time-consuming to find a specific file.

Keeping them in order is a very important practice that many developers overlook. It’s a must-have in standard practices and is essential for writing clean, manageable code.

Here's an example of how you can organize your imports:

External imports — react
Internal imports, like relative paths — ../button
In folder imports like ./styles.ts
The imports may be sorted alphabetically in every group
Every group must be divided by white space

import React from 'react';
import { TouchableOpacity, View } from 'react-native';
import { Button, Card } from '../components'
import { MainLayout } from '../layouts'
import { StyledCard } from './styles.ts'

To avoid such issues, You can use formatting tools like Eslint and Prettier to automate and enforce the correct import order.

4. Use Path Alias for long imports

Path aliases are a way to create short yet descriptive import paths. Many developers struggle with managing nested folders, and path aliases help reduce that effort. Here's an example to understand it better. For example, instead of writing a long import like this:

import { IconButton } from '../../components/buttons';
Using path alias we can shorten the import like this
import { CircleButton } from 'components/buttons';
OR
import { CircleButton } from 'buttons';

Here’s how you can set up path aliases in both TypeScript and React Native to create shorter and more meaningful import paths in your code.

Path Alias in TypeScript

1. Create or update the tsconfig.json file in your project if it doesn't exist already.

2. Set the baseUrl to . , which represents the root of the directory. This sets the starting point for all path aliases.

3. Add path aliases to the paths object. In this example, we have two path aliases defined:

// tsconfig.json
{
"extends": "expo/tsconfig.base",
"compilerOptions": {
"strict": true,
// Path alias config
"baseUrl": ".",
"paths": {
// This needs to be mirrored in babel.config.js
// Components is a directory with sub directories
"components/*": ["src/components/*"],
// We want to expose the exports of the buttons index file
"buttons": ["src/components/buttons/index"]
}
}
}
That will allow TypeScript to parse the following:
import { CircleButton } from "components/buttons"
import { CircleButton } from "buttons"

Path Alias in React Native

First, install the babel-plugin-module-resolver as a developer dependency

yarn add --dev babel-plugin-module-resolver
npm install babel-plugin-module-resolver --save-dev

Now, we can update the babel.config.js file to use the module-resolver plugin and point to our directories.

// babel.config.js
module.exports = function (api) {
api.cache(true)
return {
presets: ["babel-preset-expo"],
plugins: [
[
"module-resolver",
{
alias: {
// This needs to be mirrored in tsconfig.json
components: "./src/components",
buttons: "./src/components/buttons",
},
},
],
],
}
}

5. Use Responsive Style Properties

Responsiveness is when you create an app that adjusts to different screens, resolutions, and orientations. Apps are executed on different devices, ranging from tiny phones to huge tablets, on different platforms such as Android and iOS. Therefore, it's important to make your app responsive.

In development, CSS media queries are used to add responsive properties, but in React Native, you rely on JavaScript-based styling.

One effective way to achieve responsiveness is by using a library like react-native-normalize.

By choosing this library, you don't need to calculate the screen sizes manually. It does the heavy lifting to allow you to maximize your time on implementing complex features.

You could still use other methods and libraries as well. Dimensions is an API that gives you the device's screen width and height from which you can create dynamic styles. Alternatively, percentages will also work for units instead of fixed number pixels.

There are some other options as well, but out of those, if we recommend one, react-native-normalize is a good one in regard to being easy to use, and then you may refine it through Dimensions or use percentage-based layouts for complex designs. Thus, it would be an easy option to adapt a responsive design, which is very, very important.

6. Implement Crash Analytics Tools

Plugging these into your React Native app isn’t just nice-to-have; it’s a lifeline. Many times, uncaught JavaScript errors cause React Native apps to crash, and finding errors in a heap of code isn’t easy. Without a crash analytics tool, this process becomes even more difficult.

Below, we have listed some of those important tools that you may want to check out. Of course, there are more, and you might even have a favorite. Overall, a crash analytics tool is essential for effortless development.

1. Sentry

Sentry’s good for real-time crash tracking. It shows where your app exactly broke. It logs what the user did before the crash (e.g., tapped a button, switched screens) and bundles similar crashes into groups so you’re not chasing duplicates. For React Native, it’s gold because it bridges the JS-native gap, catching stuff like a bad FlatList render or a native plugin crash.

2. Firebase Crashlytics

Crashlytics is Google’s lean, mean crash-fighting machine, built for React Native with minimal setup. It flags both fatal crashes and non-fatal errors, tying them to device details and user impact. You’ll see trends, like if 80% of crashes hit Android 14 users and auto-groups errors by root cause. It’s perfect for React Native’s ecosystem since it plays nice with Firebase’s other tools (e.g., Analytics) and handles native crashes from dodgy third-party SDKs without breaking a sweat.

3. Instabug

Instabug provides detailed logs (stack traces, network calls, and even UI state). Plus, it lets users report issues with screenshots or recordings straight from the app..

Pick Sentry if you want deep diagnostics and team workflows, Crashlytics for a lightweight Firebase tie-in, or Instabug if user feedback’s your jam. 

7. Add Dependencies Wisely

Dependencies are external libraries or packages that serve a particular function and better organize the code while reducing the time to develop the code. It can quickly enhance the development process.

Yet, too many dependencies or old dependencies will negatively influence the performance of an app. So it is a balance - how much do you need to keep it all running smoothly?

You can use npm-check package to check the health of all the packages used in your project; it will check outdated dependencies and flag any outdated or unused ones. 

How to check outdated dependencies with npm-check

To ensure your dependencies are up to date and remove unused ones, you can use the npm-check package. It helps identify outdated, missing, or unused packages in your project.

1. Run this command to install npm check npm install -g npm-check

2. Run npm-check -u  to check outdated dependencies interactively

In this way, all outdated or not-used packages in your React Native application can be seen. With their list with you, you can remove or update according to your requirement. This helps to improve the performance, security, and compatibility of your app.

7. Dynamic Styling with JS

Android and iOS take care of fonts, layouts, and navigation in different ways, so it's good to ensure that your app functions well on both platforms without big changes.

React apps are dynamic, as they can change based on real-time adjustments. For instance, when a button is clicked, an element can change right away.

Now, static styles can't achieve this feature at all. However, with dynamic styling, you can create components that are dynamic and adapt based on user actions or data changes.

If you are willing to create dynamically styled components, there are multiple approaches you can take.

1. You would be able to put CSS within your JavaScript using tagged template literals in case you opt for styled-components.

2. Following this method, you're able to manage styles within components, and dynamic styling is enabled with ease. Since styles are written within JavaScript, you can use variables and conditional statements to alter styles due to state changes and user interactions.

3. The advantages of adopting styled-components are as follows:

4. Write CSS in JavaScript directly through tagged template literals.

5. Encapsulate and manage styles within components.

6. Employ variables, conditions, and props for dynamic styling.

7. Scope styles to prevent conflicts.

8. Enhance code readability and maintainability.

8. Cross-Platform Compatibility

Android and iOS have different approaches to things like navigation, layouts, and fonts, so you need to ensure your app runs effectively on both platforms with minimum alteration.

In some cases, you may require platform-specific code for specific functionality. You can employ:

Platform.select in order to use varying styles or logic depending on the platform.

react-native-device-info to identify the device and change behavior based on that.

For styling, don't use fixed pixels; opt for percentage units or libraries like react-native-normalize to have layouts that are consistent across screen sizes.

Android also adheres to Material Design, whereas iOS has a flat design aesthetic. Using a library like react-navigation helps to have a seamless flow in both.

To make sure that everything works as expected, test your app on emulators and real devices, and utilize crash analysis tools like Sentry or Firebase to detect platform-specific bugs early.

9. CI/CD Setup

CI/CD, or Continuous Integration and Continuous Deployment, are techniques that enable developers to develop software more efficiently and reliably.

Whenever you modify the codebase, CI/CD pipelines run tests and build your application to ensure that all checks are green before deploying the recent changes. This avoids bugs and makes sure that your application is always up-to-date.

By having the CI/CD pipeline set up in Github/Gitlab/Bitbucket and having EAS Build and EAS Submit part of the CI/CD pipeline, you can save a significant amount of development time.

By doing so, you can build automatically whenever code is merged into the master branch or initiate the pipeline once code is pushed to the master branch.

This is how it goes.

EAS Build builds your React Native codebase on Expo public servers into production builds for iOS and Android. It also signs the build—a digital sign-off by a developer that code for an app hasn't been modified since the last time it was submitted, which Expo handles programmatically.

EAS Submit, on the other hand, allows developers to submit their app to the Play Store or App Store with ease once it's built

10. Leverage Expo CLI

Expo is a widely used framework for developing native Android, iOS, and Web apps with JavaScript and TypeScript. It makes development easier by taking care of much of the setup and configuration for you.

Typically, iOS app development needs Xcode, and Android app development needs Android Studio, but with Expo, you don't have to install or set up these tools to begin development.

Rather than creating an emulator or installing manual builds, you can utilize Expo Go, an application that allows you to execute your project directly on a physical device. Here's how:

Scan the QR code produced by Expo's development server with the Expo Go app.

Your app will be loaded on your device without requiring a full build process.

By utilizing it, you can streamline the development process by delegating much of the underlying setup and configuration to Expo.

Expo has a number of key features:

1. Expo Go

2. Over-the-Air (OTA) Updates

3. Managed Workflow

4. Prebuilt APIs

5. Cross-Platform Support

6. EAS Build & Submit

12. Use Expo Snack for Rapid Prototyping

Use Expo Snack whenever you require rapid prototyping and team collaboration. It is an online editor that allows you to write and test React Native code within your browser with no setup. You can develop interactive demos, try out components, and debug isolated bugs without having to run a full development environment.

Expo Snack also makes it simple to share your work. You can create a shareable link to send your project to coworkers or test it on a real device in an instant. Whether you are testing out new ideas or debugging a particular issue, Expo Snack facilitates accelerated development and collaboration.

13. Expo Router

React Native uses Expo Router, a file-based router, to make navigation a much easier task. The router avoids the chore of manually creating all of the routes, organizing the files, and setting up the paths for navigating between screens. Expo Router lets you create the routes automatically, saving you time and streamlining the navigation.

React Navigation provides the features and functionality that make cross-platform app building more effective. It does this by supporting a common set for both React Native and the web. It also includes deeplinking to help users navigate more efficiently, as they are not constantly starting from the app's entry point, which makes the app even better.

14. Smart Testing Strategies

Solid testing strategies are crucial because they make the application development process smoother and more efficient. You might already be familiar with some smart testing strategies. Let’s explore the various testing methods available for React Native applications.

14.1. Static Analysis

Static analysis involves examining the code before it’s run to identify potential errors, ensure adherence to coding standards, and enhance overall code quality. For a platform like React Native, which relies on JavaScript—a dynamically typed language—issues such as undefined variables or type mismatches can be subtle and difficult to detect. Static analysis helps catch these problems early, preventing them from escalating into larger issues later.

Tools such as ESLint and TypeScript are widely used for static analysis in React Native projects. They analyze the code without executing the application.

Using static analysis makes your project more effective and reliable. In React Native projects, it optimizes resource utilization, adding to the overall reliability of the application. It is particularly important in bigger projects, where the codebase is large and ensuring consistency manually becomes a difficult task. Static analysis catches errors early on, thereby:

1. Prevents common mistakes,

2. Fosters team alignment on coding standards,

3. Reduces the time spent on debugging.

14.2. Unit Testing

Unit testing is all about checking separate functions or units in isolation, making sure that the app's underlying logic is working as it should. In React Native, this is essential for testing utility (e.g., calculations) or independent UI components (e.g., the behavior of a button), ensuring confidence in separate units of functionality.

Custom tools such as Jest allow a developer to write tests that run particular bits of logic or render components without the device or emulator. These tests specify the expected results for specific inputs and can monitor a component's shape over time to catch unintentional changes. It is quick and occurs in an environment that is controlled and separates out the dependencies.

Unit testing is a staple of React Native development because it is easy and fast. It verifies fundamental functionality early, decreases regression risks, and enables modular design. Through assurance that individual components behave as desired, it provides a solid groundwork for additional testing layers, aligning with strong development practices.

14.3. Component Testing

Component testing tests React Native components individually but in an environment more like the app's runtime environment than unit testing. It makes sure that components will render properly and react to user input correctly, filling the gap between logic validation and actual use.

Tools Utilities such as Enzyme or React Testing Library mimic interactions (e.g., taps or input changes) and check the output or behavior that follows. Unlike unit tests, this can sometimes mean rendering components with mocked props or state, simulating how they'd behave in the app while still keeping them isolated from other components or external systems.

This test is most important in React Native for UI behavior and interaction correctness verification. It detects rendering errors or event-handling bugs that unit tests would not catch, making components behave reliably in a standalone manner. Implementing this improves code quality and user experience and is, therefore, a pragmatic step towards creating reliable interfaces.

14.4. Integration Testing

Since complex systems can break in a multitude of ways, we conduct integration testing in our app to make sure that integration points don't fail, especially in complex systems where this is a common risk. This ensures that all the separate components, like navigation, state management, and the UI, work together properly. It also validates all the functionality.

These tests combine several components, often with mocked external dependencies (e.g., APIs), to simulate interactions. They are more intricate and slower than unit or component tests as they evaluate workflows across boundaries, such as data passing between a form and a display component. Tools vary, but Jest with additional utilities is frequently adapted for this purpose.

14.5. End-to-End (E2E) Testing

This is the most complete method of testing a React Native application. You can simulate any possible user actions, including integration with external services, APIs, databases, and performance differences across devices. Developers use Detox and Appium quite a lot because they are able to emulate user interactions on actual devices in order to conduct more precise tests.

Additional Tips

1. Use a consistent code style. This makes your code easier to read.

2. Write comments to explain complex logic. This helps other developers (and your future self) understand your code. 

3. Code Reviews and Pair Programming

4. Write code that is easy to read and understand. This makes it easier to maintain and update your app.

5. Use environment variables or a secrets management solution. This keeps your API keys out of your source control.

6. Use regular expressions to validate email addresses and phone numbers. Remove or escape special characters from user inputs.

7. Use react-native-keychain to store data in the device's keychain or keystore. This is more secure than storing data in plain text.

8. Use console.log statements to print values to the console. Step through your code with the debugger to find issues.

9. React Native Debugger and Flipper are great debugging tools. They let you inspect your code and variables.

10. Unit tests check individual parts of your code. Jest is a popular testing framework. React Native Testing Library helps you test components.

11. An HOC can add authentication logic to multiple components. This avoids repeating the same code in each component.

Conclusion

Following these React Native best practices might feel like a lot. But these are worth it. Your apps will run better, be easier to maintain, and more secure.  For developers, it is most important to master these practices since without them, it is challenging to write scalable code. Yet, they are not the only best practices, there are newer practices emerging continuously. With increasing demand for React Native, it can help developers take their app development skills to an even better level.

Brilworks is a top React Native development company. We have made contributions to frameworks and assisted companies in resolving intricate performance issues. Our experts develop high-quality applications with innovative solutions.

Making your app fast and responsive is super important. Slow apps can frustrate users. They might even stop using your app.