Building Scalable React Native Apps with Independent Bit Components

nitsan7701 year ago

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).

  • See the new Bit React Native component (in its remote Bit scope).
  • See the Expo project that consumes the component.

Step 1: Setting up the Project

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

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


You can also clone the repo from GitHub if you prefer, and then checkout to the pre-bit branch. Just make sure to run npm install to install the dependencies.

Step 2: Initializing a Bit Workspace

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

See command synopsis

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.

Step 3: Creating a React Native Env component

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

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


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"]

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:


The output should be similar to the following:

The following template(s) are available with the command bit create:

Example - bit create <template-name> <component-names...>

react-native-env (teambit.react/react-native-env)
react-native (a template for react-native components)
react-native-js (a react-native js component template)
react-native-env (set up your own custom react-native env using this template)

Step 4: Create a Bit React Native component

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


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:


If you cloned the repo from GitHub, you can find the env components and the the spinner in the post-bit branch.

Step 5: Consuming the Component

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} />

But the best part is that after you tag (release a version) and export the component to, 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:

See command synopsis

And then:

See command synopsis

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

Step 6: Running the App (Not a Bit App)

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

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"

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


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!