# thingstage-react-native-components

> ## 使用須知

Latest version **0.0.10** (published 2023-06-17) · 0 weekly downloads

## Install

```sh
npm install thingstage-react-native-components
pnpm add thingstage-react-native-components
yarn add thingstage-react-native-components
bun add thingstage-react-native-components
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.10 |
| Published | 2023-06-17 |
| First published | 2023-03-30 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 222.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | trunkstudio |

## Links

- npm: https://www.npmjs.com/package/thingstage-react-native-components
- npm.io page: https://npm.io/package/thingstage-react-native-components

## Recent versions

- 0.0.10 (latest) — 2023-06-17
- 0.0.9 — 2023-06-01
- 0.0.8 — 2023-04-17
- 0.0.7 — 2023-04-07
- 0.0.5 — 2023-04-05
- 0.0.2 — 2023-03-30
- 0.0.1 — 2023-03-30

## README

# ＲＮ元件庫開發

## 使用須知

安裝套件

```
npm install thingstage-react-native-components
```

須將套件納入 tailwind 編譯範圍內才能使樣式運作

```javascript
// tailwind.config.js

module.exports = {
  content: [
    // ...
    './node_modules/thingstage-react-native-components/src/**/*.{js,jsx,ts,tsx}', // 增加套件
  ],
  //...
};
```

將 `KitchenSinkProvider` 加到專案根節點

```javascript
import React from 'react';
import App from '.src/App';
import KitchenSinkProvider from 'thingstage-react-native-components/src/KitchenSinkProvider';

const Entrypoint: React.FC = () => {
  return (
    <KitchenSinkProvider>
      <App />
    </KitchenSinkProvider>
  );
};

export default Entrypoint;
```

## 開發須知

基於 `Nativewind` 的運作原理，如果是自定義元件，需要自帶 `style` 參數並使用才能使 className 運作。

Ref: https://www.nativewind.dev/guides/custom-components

## Storybook

進入 storybook 目錄進行安裝

```bash
cd storybook

yarn
#or
npm install
```

### 安裝故障排除

安裝前會自動將根目錄的套件打包並使用該打包好的套件安裝

如果有更新套件，視情況可能需要清除套件工具的暫存才有辦法正確更新套件

```bash
yarn cache clean thingstage-react-native-components

#or

npm cache clean thingstage-react-native-components
```

甚至可能發生 lock 衝突，或許需要清除 storybook 的 lock 後再安裝

```bash
rm -rf yarn.lock
#or
rm -rf package-lock.json
```

## 運行 Storybook

在 storybook 目錄下開起 bundle server

```
yarn start
```

執行 Android

```
yarn android
```

執行 iOS

```
yarn ios
```

---
_Source: https://npm.io/package/thingstage-react-native-components · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._