Adding Stories

Storybooks allows us to work on the UI without worrying about the business logic & without starting complex dev stacks. This project uses Storybooks for this reason. To get started with Storybook, please head over to the website to get the full picture. In this React Native project, Storybook is configured to use the React Native web addon

Storybook in droidconKe2022ReactNative

To work on the UI side of things with Storybooks in this project is quite easy as the project has been set up. Follow these steps to get started. Say you wanted to develop a component, we'll call it PrimaryButton.tsx:

import React from "react";
import { Button } from "react-native";

export default function PrimaryButton(): JSX.Element {
  function dummyOnPress() {
    console.log("Primary button pressed");
  }

  return <Button title="Press me" onPress={dummyOnPress} />;
}

Writing a story for it involves creating a file with the same name, with a slight difference, the extension we append should be .stories.tsx (instead of just .tsx). In this case, just beside PrimaryButton.tsx we will create PrimaryButton.stories.tsx with the following contents.

import React from "react";
import { ComponentStory, ComponentMeta } from "@storybook/react";
import PrimaryButton from "./PrimaryButton";

export default {
  title: "DroidconKe/Example/Button",
  component: PrimaryButton,
  parameters: {
    // More on Story layout: https://storybook.js.org/docs/react/configure/story-layout
    layout: "centered",
  },
} as ComponentMeta<typeof PrimaryButton>;

const Template: ComponentStory<typeof PrimaryButton> = (_) => <PrimaryButton />;

export const PrimaryButtonStory = Template.bind({});

At the root of the folder, we will run a command to start storybooks: npm run storybooks which will start a local server on http://localhost:6006. In most cases, the command will also open the url on your default browser automatically. You should see your button on the web browser in an interface that looks like this:

Thats all, feel free to be productive! If you have a question, or something is unclear, please email me at makunomark@gmail.com to help make this documentation better.