Getting Started with a New React Native App in 2023
How to develop composable and scalable React Native apps using Bit’s component-driven architecture.
Not too long ago, I took it upon myself to find the best ways to build software in 2023. And along this journey, I came across some fantastic techniques for building Angular, React.js, and Vue.js applications for modern software development. But, my journey seemed to have arisen solutions for web apps. I had completely forgotten about the mobile space and, more importantly, the cross-platform development space.
So, I took it upon myself to find a modernized approach to building React Native apps in 2023, and this article aims to deliver just that!
But first, a quick backstory — React Native
React Native is a cross-platform development framework developed by Meta that aims to simplify cross-platform application development by adopting a learn once, write anywhere model.
When React Native first came out, it took the software industry by storm as developers could now build iOS, Android, and Web applications in a single framework without maintaining independent codebases for each type of app.
With this type of development, the industry quickly switched from native development to a more cross-platform-based development model where most modern apps were designed and implemented using React Native. It ensures that the same codebase can be maintained for its iOS, Android, and Web counterparts.
Yet, it still was not enough…
However, this did not change the fact that React Native developers still had to develop and maintain their cross-platform applications as a single giant monolith. Though this works for small projects, it does not scale well for large apps.
Customers in 2023 want a faster time to market.
But, developing giant React Native monolithic apps will not help you implement apps that have a quicker time to market.
This is precisely where you need a better approach to building React Native apps.
Well, what’s the solution to this?
I’ve been a big fan of component-driven architectures for quite a while. It focuses on building applications in a distributed manner.
Each component is independently designed, developed, tested, and versioned.
This perfectly combines with frameworks like React Native — which already encourage developers to build “components” that wrap up UI elements.
Therefore, you can seamlessly adapt this component-driven architecture onto your React Native workflow and build distributed React Native components that are independently designed, developed, tested, and versioned to improve how you develop production-ready React Native apps significantly.
👉 Learn more about Bit components here:
A step further into component-driven architectures
A component-driven architecture aims to increase component reusability by decomposing large complex applications into simpler components. As discussed above, you’ve likely built many React Native apps through components.
However, in 2023, building components doesn’t cut it. You’re still trapped inside a giant monolith application, and you lose the ability to scale the app as you grow.
This is where Bit comes into play. Bit is a tool that helps developers build distributed component-driven applications and collaborate on components independent of a Git repo or any other development setup. It allows you to freely adopt architectural patterns such as the micro frontends pattern to improve your development productivity, reduce costs, and align it with your backend microservice.
As shown above, each component is located in a separate space isolated from the rest, ensuring independence. This approach allows you to design, develop, test, and version a single component in total isolation.
You no longer need access to your entire production application to change a single component! All you will need is access to your single component, which, once changed and versioned, will cycle back through its dependency tree and update all its dependents.
And, just like that, you’ve saved much time as you no longer need to wait for an app to compile after changing a component’s background colour!
👉 Learn more about Bit’s component-driven architecture here:
Okay, enough talk; let’s build a component-driven app with React Native
Step 01 — Pre-requisites
First, you must set up Bit in your local development environment before developing a modular React app.
If you’ve configured Bit, ensure you are on the latest version.
You can install Bit, or update it to its latest version by executing the command shown below:
npx @teambit/bvm installTo confirm the installation, run the command bit --version. You should see the output I've illustrated below:
Next, create an account on Bit and a scope to export the components you will build with me in this article!
Step 02 — Initializing the development environment
Next, you will need a development space to compose your components.
In Bit, this is known as a “Workspace”.
Therefore, you must create a workspace that can be used to develop your React Native components. This can be done with the command shown below.
bit new react-native demo-workspace --env teambit.react/react-native-env --default-scope my-org.my-scopeWhen you run this command, ensure that you provide your organization and scope name and replace the default “my-org.my-scope”. For my case, I provided my Bit username and the scope I created in step 01 — “
lakindu2002.demo-react-native".
The command above creates a new Bit workspace that will be configured to design and develop React Native components.
It uses the teambit.react/react-native-env environment to provide a runtime for the React Native components to run.
Next, run bit start and visit http://localhost:3000 to launch your local development environment to start building your React Native components. You will see the screenshot below.
Step 03 — Creating a React Native component
Now that your development server is running, you can build your React Native components! With Bit, creating a React Native component can be done in a straightforward command:
bit create react-native <<NAMESPACE>>/<<COMPONENT-NAME>>Think of a namespace as a subdirectory to store your components in.
So, if you were creating a button component, you’d write the command — bit create react-native design/button.
The design creates a namespace that is used to store all design components for your application. This namespace will help organize components and build composable design systems within your organization!
After you run the command, you’ll see the directory shown below.
At a single glance, it’s evident that this brings about several advantages for a developer:
- Bit enforces you to adopt Test Driven Development as it provides a test file (
spec.ts). This creates a shift left in software testing and ensures that developers are responsible for building bug-free components. - You’re provided with a documentation file (
.md). This helps keep your component documented to ensure maximum maintainability. - You can define compositions for your component through the
.composition.tsxfile to showcase the different variants you intend to support - You can adopt a good coding standard as you must think about components independently. You don’t write components thinking about its consumers. This helps you create more meaningful property names and callbacks that are relevant.
Step 04 — Developing a React Native component
Let’s start working on the Button component that we created in Step 03. Firstly, let’s define the test cases for the component! Open up your button.spec.ts file and include the code below.
import React from 'react';
import { render } from '@testing-library/react-native';
import { BasicButton } from './button.composition';
it('should render with the correct text', () => {
const { getByText } = render(<BasicButton />);
const rendered = getByText('Hello, World!');
expect(rendered).toBeTruthy();
});For simplicity, we’ve included one test case for the Button component. This test case ensures that the button (BasicButton) that's rendered on the DOM should have the label - "Hello, World!".
This implies that our Button component must accept a label property that helps define the Button label to be rendered in the DOM. Then, let's start designing the Button component.
Open up the button.tsx file and include the code shown below:
import { TouchableOpacity, Text, StyleSheet } from 'react-native';
export type ButtonProps = {
/**
* the label to be rendered on the button
* @default "Hello, World"
*/
label?: string
/**
* Callback function triggered when button is clicked
* @default undefined
*/
onClick?:()=>void;
};
const styles = StyleSheet.create({
button: {
backgroundColor: '#2196F3',
padding: 10,
borderRadius: 5,
alignItems: 'center',
},
label: {
color: 'white',
fontSize: 16,
},
});
export function Button({ onClick, label = 'Hello, World' }: ButtonProps) {
return (
<TouchableOpacity style={styles.button} onPress={onClick}>
<Text style={styles.label}>{label}</Text>
</TouchableOpacity>
);
}The code shown above defined a simple Button component for your React Native codebase.
It accepts two props.
label: To determine the label that the button will displayonClick: To determine the action the button will perform upon being clicked.
Finally, navigate to your compositions to help define an output for your Button. The compositions file helps define the several variations that your Button might have. Once again, to keep things simple, let’s define a single composition — BasicButton helps define a Basic outline of our Button component. Therefore, open the button.compositions.tsx file and include the code below.
import { Button } from './button';
export const BasicButton = () => (
<Button label="Hello, World!"
onClick={()=>console.log('Clicked')}
/>
);Finally, save your code and observe the development server to see your component being rendered in real time!
Step 05 — Versioning and exporting the component
After you’ve designed, built, and tested your independent React Native component, you can now ship it to remote storage — scope for future maintenance.
To do so, you must “tag” your components to version them and export them to the Bit Cloud.
You can version your component by running bit tag followed by a message. For example, your command could be bit tag -m "adding a property for the button name".
This command builds the component and executes its test cases. This ensures that you release only fully working code.
Finally, after you’ve tagged a new version of your component, you can ship it off to the component repository — Bit Cloud using the command bit export.
Well, this was promising…
Building cross-platforms have significantly evolved since React Native first came out.
Gone are the times when you tried to manage a single giant monolith platform, and out came the dawn of microfrontends and Bit — A modernized approach to building modular and distributed components that can be developed, tested, and versioned in isolation!
To explore the independent React Native component we built in this blog post, visit my Bit Cloud Scope.
I hope this article helps you build amazing React Native apps in 2023!
Thank you for reading.
Also, watch:
Build composable React Native apps with reusable components, just like Lego
Bit is an open-source toolchain for the development of composable software.
With Bit, you can develop any piece of software — a modern web app, a UI component, a backend service or a CLI script — as an independent, reusable and composable unit of software. Share any component across your applications to make it easier to collaborate and faster to build.
Join the 100,000+ developers building composable software together.
Get started with these tutorials:
