Create Android UI Library using Storybook
Publish your UI and maintain it easily with Storybook, but how can we conduct it in an Android app?
has been known as a great tool to create a UI library and publish with ease. In addition, Storybook can help us separate and isolate our UI from our app. We can easily maintain our UI in a separate repository and focus more on business use cases when developing our main app.
Storybook only officially supports JavaScript at the moment. Hence we, as mobile developers, especially Android developers, cannot publish our UI on Storybook yet. But, some people in the community have been working on a tool that extends the functionality of Storybook to create a UI library for native mobile platforms such as Android, IOS, or even a hybrid like Flutter and React Native called Storybook Native.
Storybook native uses a tool called Appetize.io to show our UI component in an emulator.
So, how to create our UI library using Storybook Native? Let’s begin to implement it.
Implementation
The first thing to do before we implement Storybook Native is to install Node and Yarn in our machine, see how to install Node and install Yarn on your machine.
After successfully installing Node we can start creating our UI library.
Let’s start with a simple activity and a text inside it.
Now let’s create another activity that shows our UI component. Let’s start with a simple Button
Finalize with the screen to show our component; let’s implement DeepLink to make our app respond with the link used by Storybook to open a specific screen containing a particular element.
Now our app is ready to be published to appetize.io
Next step, we can start implementing Storybook Native to our app. Run this script to install Storybook Native:
npm install @storybook/nativeCreate a JavaScript file named generate.js to generate stories to be published in Storybook Native.
To see complete tutorial on how to install Storybook, check the official github repo here:
Then, generate stories to show in the storybook by using this script:
node generate.jsThe above script will generate stories in ./stories with *.stories.jsx file extension.
Create a directory named .storybook contained main.js and preview.js (optional, only needed if you want to enable switching between devices)
Now, we can try to build our storybook by running this script:
yarn build-storybookThe above script will generate files inside ./storybook-static
To see if the Storybook has been successfully built. look into ./storybook-static and open index.html, it will show something like this:
That’s it. you have successfully created a Storybook for your Android UI.
If you have anything to discuss, please kindly write it in the comment section.
Thank you~
