Building Scalable React Native Apps with Independent Bit Components

In today's fast-paced world of mobile app development, React Native has emerged as a popular framework for building cross-platform applications. Its ability to write code once and deploy it on multiple platforms has made it a go-to choice for many developers. In this blog post, we will explore how to leverage Bit to enhance the scalability, maintainability, and reusability of your React Native projects. We'll walk through the process of setting up a React Native app with Bit, creating and consuming Bit components, and keeping them in sync across projects.

For simplicity, we'll be using Expo to create our React Native app. However, you can create and maintain Bit components in any React Native project (bare or managed).

To begin, let's create a new React Native project using Expo. Open your terminal and run the following command:

$npx create-expo-app my-app

Copied

This will create a new Expo project called "my-app" in the current directory.

Next, initialize a Bit workspace to maintain your Bit components. Navigate to the project directory and run the following command:

$bit init

Copied

This command initializes a Bit workspace. It generates a workspace.jsonc file that holds the configuration settings, and a .bitmap file that tracks Bit components in your workspace.

An env (component development environment) provides your components with the proper tooling, configurations and runtime environment.

Our env will extend Bit's default React Native env. Run the following to install the default React Native env in your workspace:

$npm i @teambit/react.react-native-env

Copied

To create a Custom React Native Env component, run the following command:

$bit create react-native-env envs/my-react-native-env --scope learnbit-react.react-native-expo --aspect teambit.react/react-native-env

Copied

We will not dive into the details of configuring a React Native Env component in this tutorial. However, you can learn more about it in React Native learning section.

Now that you have your own env component, you can use it to create React Native components. Add the following config in the workspace.jsonc file:

{
  "teambit.generator/generator": {
    // replace the env id with YOUR env id
    "envs": ["learnbit-react.react-native-expo/envs/my-react-native-env"]
  }
}

Copied

Make sure you use your org and scope name instead of learnbit-react.react-native-expo.

Run the following to list the component templates provided by your React Native env:

$bit templates

Copied

The output should be similar to the following:

Now, it's time to create a Bit component that can be consumed by your React Native app. Run the following command:

$bit create react-native ui/spinner --scope learnbit-react.react-native-expo

Copied

This command creates a new Bit component named "ui/spinner" from the React Native env.

It's a pretty simple spinner component that displays a loading indicator and the best part of it is that it spins forever.

You can have a look at the implementation of the component, its docs, tests and compositions in the code tab below:

Once the component is created, you can use it within your React Native app. Import the component into your desired screen or file and use it just like any other React Native component.

/* @filename: App.js */

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

/* this is the Bit component we created */
import { Spinner } from '@learnbit-react/react-native-expo.ui.spinner';

export default function App() {
  return (
    <View style={styles.container}>
      <Spinner size={200} />
    </View>
  );
}

Copied

But the best part is that after you tag (release a version) and export the component to bit.cloud, you can install it as a dependency in any other project or maintain it from any Bit workspace.

Lets tag and export the component to Bit. Run the following commands:

$bit tag --message "created env and spinner components"

Copied

And then:

$bit export

Copied

The components are now available on bit.cloud for anyone to consume (install as a dependency) or develop (import to a workspace and modify).

To run your React Native app without the Bit environment, you can use the standard Expo commands.

But before you do that, you need to install the dependencies. Run the following command:

$npm install

Copied

That will install all dependencies for your app but the component are not included in the apps package.json file.

To make sure your components are linked from the node_modules directory, and compiled, add the following to the "postinstall" script to your package.json file:

{
  "postinstall": "bit compile && bit link"
}

Copied

This script ensures that whenever you install dependencies for your project, Bit will link and compile your components, making them available for consumption.

Now you can run the app with the following command:

$npm start

Copied

By leveraging Bit in your React Native projects, you can achieve greater scalability and maintainability. The component-based approach allows you to build reusable components that can be easily shared and consumed across different projects. With Bit's synchronization capabilities, you can ensure that your components stay in sync and up-to-date. We can't wait to see the amazing components you'll build with Bit. Don't hesitate to reach out to us on Slack and share your experience with Bit.

Happy coding!