Ever wanted to build your own React Native UI components and share them with the world? Here's how you can do it.
1) Scaffold your library
CallStack have built an amazing set of packages to help build React Native Libraries.
npx create-react-native-library super-simple-chat
This creates a boiler plate package called super-simple-chat with an example React Native app for you to test with.
Next, we automatically configure our project using react-native-builder-bob
$ cd super-simple-chat && yarn
$ npx react-native-builder-bob@latest init
$ yarn
2) Create your components
Open src/index.tsx to write and export your component. You will find a pre-existing multiply example.
Make a UI component
I copied a simplifiedmessage component from an article I wrote previously
Here's what my src/index.tsx looks like for me. It's probably more fun to write your own, though!
import React from 'react';
import { View, Text } from 'react-native';
export function MessageBubble(props: { text: string; isSender: boolean }) {
const { text, isSender } = props;
return (
<View
style={{
width: '65%',
marginVertical: 3,
marginHorizontal: 16,
paddingVertical: 10,
paddingHorizontal: 10,
flexDirection: 'row',
borderRadius: 5,
alignSelf: isSender ? 'flex-start' : 'flex-end',
backgroundColor: isSender ? '#fad1d0' : '#dfffc7',
}}
>
<Text
style={{
fontSize: 16,
width: '65%',
left: isSender ? 0 : 10,
}}
>
{text}
</Text>
</View>
);
}
3)Test your components in the example
So now let's test the components from our library in the example React Native app that comes with the boilerplate.
yarn example ios
Then, open up example/src/App.tsx and import your component, or copy mine:
import * as React from 'react';
import { StyleSheet, View } from 'react-native';
import { MessageBubble } from 'react-native-super-simple-chat';
export default function App() {
// generate an array of 10 messages in a human conversation. Each message is an object with a text property and a userID property.
const messages = [
{ text: 'Hi', userID: 1 },
{ text: 'Hi', userID: 2 },
{ text: 'How are you?', userID: 1 },
{ text: 'I am good, how are you?', userID: 2 },
{ text: 'Not bad', userID: 1 },
];
return (
<View style={styles.container}>
{messages.map((msg) => (
<MessageBubble text={msg.text} isSender={msg.userID === 1} />
))}
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
box: {
width: 60,
height: 60,
marginVertical: 20,
},
});
P.s. I used GitHub copilot for generating my conversation.
Check if it is working in your simulator, mine looks like this:
4) Update your README.md to match your code
It's important that our npm package has up to date instructions for our users.
I pasted in my example from App.tsx as an explainer.
import { MessageBubble } from 'react-native-super-simple-chat';
export default function App() {
const messages = [
{ text: 'Hi', userID: 1 },
{ text: 'Hi', userID: 2 },
{ text: 'How are you?', userID: 1 },
{ text: 'I am good, how are you?', userID: 2 },
{ text: 'Not bad', userID: 1 },
];
return (
<View style={styles.container}>
{messages.map((msg) => (
<MessageBubble text={msg.text} isSender={msg.userID === 1} />
))}
</View>
);
}
5) Push your repo up to GitHub
- Create a blank repo with the same name you have specified in your package.json when creating the library
- Get the web URL and then run these commands from your terminal (be sure to use your own URL).
$ git remote add origin https://github.com/jackbridger/react-native-super-simple-chat.git
$ git add .
$ git commit -m "chore: setting up npm"
$ git push origin HEAD
6) Publish to npm
1) Create an npm account here
2) Then login with npm in your terminal
npm login
You'll need to provide your login details as well as a one time code that they email you.
3) Now, we need to pack our library into a compressed file format (a tarball) by running:
npm pack
4) Finally we can publish our package
npm publish
And there we have it, our own npm package is live.
Bonus: improve your library
To publish a new version to npm, increment the package version in your package.json e.g. I patched it from 0.1.0 to 0.1.1
Then you can run the same process as before:
$ npm pack
$ npm publish
And your updates will come through!
If you like this article, I also host a podcast on developer tools.
Top comments (0)