React Native Best Practices

If you are a react native developer beginner, or experience then you must be aware that code practices is a non-negotiable skill. As a developer, delivery of a project is a must but writing a scalable, and quality code will help you, and your team in future.

Before we move ahead, these practices can be work on React Native CLI, or Expo project. From 2024, as per RN team, Expo would be the official framework to build the react native projects.

In this blog, we will learn about code practices for react native projects. Remember a good project is a balance of:

1. scalable




2. consistency




3. maintainable




4. Readability

1. inline: Not a good approach for large scale projects at all.

<View style={{ backgroundColor: 'blue', padding: 10 }}>

  <Text style={{ color: 'white' }}>Hello</Text>

</View>

2. StyleSheet API: It is good but styles won't be reusable

import { StyleSheet, View, Text } from 'react-native';



const styles = StyleSheet.create({

  container: {

    backgroundColor: 'blue',

    padding: 10,

  },

  text: {

    color: 'white',

  },

});



const App = () => (

  <View style={styles.container}>

    <Text style={styles.text}>Hello</Text>

  </View>

);

3. Separate style: It is my prefer way of styling for large projects. Create a separate style.js and use that in the components you require.

/components

   ├── MyComponent.js

   ├── MyComponent.styles.js

/App.js

// MyComponent.styles.js

import { StyleSheet } from 'react-native';



export default StyleSheet.create({

  container: {

    flex: 1,

    justifyContent: 'center',

    alignItems: 'center',

    backgroundColor: '#f5f5f5',

  },

  title: {

    fontSize: 24,

    fontWeight: 'bold',

    color: '#333',

    marginBottom: 20,

  },

  button: {

    backgroundColor: '#007bff',

    paddingVertical: 10,

    paddingHorizontal: 20,

    borderRadius: 5,

  },

  buttonText: {

    color: '#fff',

    fontSize: 16,

    fontWeight: '600',

  },

});

// MyComponent.js

import React from 'react';

import { View, Text, Pressable } from 'react-native';

import styles from './MyComponent.styles';



const MyComponent = () => {

  return (

    <View style={styles.container}>

      <Text style={styles.title}>Hello from MyComponent</Text>

      <Pressable style={styles.button}>

        <Text style={styles.buttonText}>Click Me</Text>

      </Pressable>

    </View>

  );

};



export default MyComponent;

4. styled components: Another prefer way for large projects.

import styled from 'styled-components/native';



const Container = styled.View`

  background-color: blue;

  padding: 10px;

`;



const StyledText = styled.Text`

  color: white;

`;



const App = () => (

  <Container>

    <StyledText>Hello</StyledText>

  </Container>

);

5. native wind: NativeWind is a good way to style your app. After installing the native wind you can use the classes to style your app. By this you are delegating the styling work.

import React from 'react';

import { View, Text, Pressable } from 'react-native';

import { styled } from 'nativewind';



const App = () => {

  return (

    <View className="flex-1 justify-center items-center bg-gray-100">

      <Text className="text-2xl font-bold text-blue-500 mb-4">

        Welcome to NativeWind!

      </Text>

      <Pressable className="bg-blue-500 px-4 py-2 rounded">

        <Text className="text-white font-semibold">Press Me</Text>

      </Pressable>

    </View>

  );

};



export default App;

6. props

Props are used to communicate between components in React Native, allowing data to flow from parent components to child components. Just like styling, there are multiple ways to manage props. Consistency is key, so it's recommended to stick to one approach throughout your project.

Additionally, always destructure props for cleaner and more readable code. Destructuring not only improves readability but also makes it easier to spot which props a component is using.

const MyComponent = ({ title, subtitle }) => {

  return (

    <View>

      <Text>{title}</Text>

      <Text>{subtitle}</Text>

    </View>

  );

};

7. State management

Efficient state management ensures that the app remains performant and manageable as the codebase grows. In today's time we have a lot of options to pick the best state management.

a. Prefer local state over global state

b. Use Context API for simple state

c. Use a State Management Library for Complex State

d. Immutable State Updates

e. Prefer redux toolkit over redux

import { createSlice } from '@reduxjs/toolkit';



const booksSlice = createSlice({

  name: 'books',

  initialState: [],

  reducers: {

    addBook: (state, action) => {

      state.push(action.payload);

    },

    removeBook: (state, action) => {

      return state.filter(book => book.id !== action.payload);

    },

  },

});



export const { addBook, removeBook } = booksSlice.actions;

export default booksSlice.reducer;

8. Crash Analytics

To ensure your app's health and reduce crashes, it's important to implement crash analytics and error tracking:

a. Use Crash Analytics Tools: Implement services like - Firebase Crashlytics, or Sentry

b. Test your App's stability

Run automated tests and manual stress testing to catch edge-case crashes. Utilize services like TestFlight or Google Play Beta Testing.

You can track both native crashes (iOS/Android) and JavaScript errors. Use ErrorBoundary to catch JavaScript errors and log them to a crash analytics service.

c. Track JS and Native Errors

import React from 'react';

import * as Sentry from '@sentry/react-native';



class ErrorBoundary extends React.Component {

  componentDidCatch(error, errorInfo) {

    Sentry.captureException(error, { extra: errorInfo });

  }



  render() {

    if (this.state.hasError) {

      return <Text>Something went wrong.</Text>;

    }



    return this.props.children;

  }

}

9. Logging

Logging helps track app behaviour, debug issues, and gather analytics.

a. Use a Logging Framework

1. React Native Logger: An easy-to-use logger specifically designed for React Native.




2. Winston: A multi-transport logging library that can work with both React Native and Node.js.
   
   

import logger from 'react-native-logger';



logger.log('This is a debug log');

logger.warn('This is a warning log');

logger.error('This is an error log');

b. Differentiate Log Levels

1. Use appropriate log levels like debug, info, warn, and error.




2. In production, minimize logging verbosity by only allowing error and warn logs, while in development mode, use debug and info.

c. Remote Logging

Consider sending logs to a remote logging service such as:

1. Papertrail




2. Loggly




3. Firebase Analytics

d. Log Sensitive Information Carefully

Avoid logging sensitive user information like passwords, tokens, or personal data.

10. Testing

Testing for every project is crucial. As a developer, quality is the responsibility of the developer. In React native world there are:

1. Unit testing




2. Integration testing




3. End to End testing

Do spend time atleast on the end to end testing. There are many tools available for the testing.

Happy Learning!!