react-native-component-library-template

KO | EN

gitlite — search

#javascript #hacktoberfest #golang #android #machine-learning #deep-learning #macos #cli #kubernetes #awesome-list #vue #pytorch #openai #mcp

react-native-component-library-template

(★ 13)

Template for creating React Native components using Storybook and Expo

react-native-component-library-template 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Restyle UI

React Native component library built with Shopify's Restyle library to allow for **theming** and **utility style props**.

```
<Box backgroundColor="primary" mt={2} p={3}>
  <Text color="textInverted" fontFamily="Roboto, sans-serif">
    Branded box with white text inside
  </Text>
</Box>
```

> This is setup as Storybook with Expo, instead of Expo with Storybook.

## Getting Started

1. `yarn` - Install dependencies
1. `yarn web` - Run Storybook

### Running on Native Devices

1. `yarn start` - Start Expo in browser (should open a new tab)
1. Wait for app to bundle. This may take 30+ seconds.
1. Use QR code from Expo to open app on testing device (or press `i` to open simulator if available)

### 📁 File Structure

```
Storybook with Expo CLI
├── stories
│   ├── index.js ➡️ Native story imports
│   └── Example.stories.js ➡️ A Storybook page to render
├── assets ➡️ All static assets for your project
├── App.tsx ➡️ Entry Point for universal Expo apps
├── app.config.js ➡️ Expo config file
└── babel.config.js ➡️ Babel config (should be using `babel-preset-expo`)
```

### Adding Storybook Stories

1. Create a file alongside your component named `ComponentName.stories.tsx`.
2. We use CSF story format (lets us export stories to test in other context):

```js
import React from "react";
import { storiesOf } from "@storybook/react-native";
// Import your component
import Text from "./Text";

// Define your component and it's name
export default {
  title: "Text",
  component: Text,
};

// Stories
export const Basic = () => <Text>What's up</Text>;
export const Colored = () => <Text color="red">What's up</Text>;

// This is necessary to make it show in Expo
// Add all stories to RN/Expo storybook
storiesOf("Text", module).add("Basic", Basic).add("Colored", Colored);
```

3. You should be able to see it in Storybook web if you spin it up `expo web`. But to see it native, you need to import the story directly in `stories/index.js`.

Done! You should see your new component stories in Storybook web and native.

### Semantic Release

This project is setup with semantic-release to automatically handle versioning based on git commits and branching. It also is setup with Commitzen's CLI (`yarn commit`), which walks you through crafting a "conventional commit".

1. Create a branch for your work: `git checkout -b name-here`
1. Do some cool code jutsu.
1. `git add` your changed files.
1. `yarn commit` to run the CLI

You'll be able to pick from things like a feature, bug fix, or CI update. And add your commit message, as well as a longer detailed message.

After creating this branch, create a pull request (PR) on Github. Once approved, it will be moved to a release branch (like `next`), and eventually merged into master.

When merged into master, the CI (CircleCI in our case) will run semantic-release, which checks commits since last release.

## 📝 Notes

- [Storybook React Native](https://storybook.js.org/docs/guides/guide-react-native/)

react-native-component-library-template

react-native-component-library-template 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

react-native-component-library-template

react-native-component-library-template 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README