# @touchblack/ui

> Design system for Touchblack Organization

Latest version **0.0.41** (published 2025-04-16) · 0 weekly downloads

## Install

```sh
npm install @touchblack/ui
pnpm add @touchblack/ui
yarn add @touchblack/ui
bun add @touchblack/ui
```

## Health

**Score 30/100 (F)** — status: maintenance-mode.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.41 |
| Published | 2025-04-16 |
| First published | 2024-04-24 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=18 |
| Dependencies | 21 |
| Unpacked size | 50.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Aman Kumar |
| Maintainers | aman_touchblack |
| Keywords | react-native, ios, android, design-system |

## Links

- npm: https://www.npmjs.com/package/@touchblack/ui
- Repository: https://github.com/TouchBlack/ui
- Homepage: https://github.com/TouchBlack/ui#readme
- Issues: https://github.com/TouchBlack/ui/issues
- npm.io page: https://npm.io/package/@touchblack/ui

## Dependencies (21)

- [react](https://npm.io/package/react.md) 19.0.0
- [react-dom](https://npm.io/package/react-dom.md) ^19.1.0
- [commitizen](https://npm.io/package/commitizen.md) ^4.3.1
- [react-native](https://npm.io/package/react-native.md) 0.79.1
- [react-hook-form](https://npm.io/package/react-hook-form.md) ^7.55.0
- [react-native-svg](https://npm.io/package/react-native-svg.md) ^15.11.2
- [@touchblack/icons](https://npm.io/package/@touchblack/icons.md) ^0.0.37
- [@gorhom/bottom-sheet](https://npm.io/package/@gorhom/bottom-sheet.md) ^5.1.2
- [react-native-tab-view](https://npm.io/package/react-native-tab-view.md) ^4.0.10
- [react-native-unistyles](https://npm.io/package/react-native-unistyles.md) ^2.31.0
- [react-native-pager-view](https://npm.io/package/react-native-pager-view.md) ^6.7.0
- [react-native-vector-icons](https://npm.io/package/react-native-vector-icons.md) ^10.2.0
- [react-native-actions-sheet](https://npm.io/package/react-native-actions-sheet.md) ^0.9.7
- [react-native-document-picker](https://npm.io/package/react-native-document-picker.md) ^9.3.1
- [react-native-gesture-handler](https://npm.io/package/react-native-gesture-handler.md) ^2.25.0
- [react-native-svg-transformer](https://npm.io/package/react-native-svg-transformer.md) ^1.5.0
- [react-native-table-component](https://npm.io/package/react-native-table-component.md) ^1.2.2
- [@react-native-community/slider](https://npm.io/package/@react-native-community/slider.md) ^4.5.6
- [@react-native-community/checkbox](https://npm.io/package/@react-native-community/checkbox.md) ^0.5.17
- [@react-native-community/datetimepicker](https://npm.io/package/@react-native-community/datetimepicker.md) ^8.3.0
- [@react-native-async-storage/async-storage](https://npm.io/package/@react-native-async-storage/async-storage.md) ^2.1.2

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 0.0.41 (latest) — 2025-04-16
- 0.0.40 — 2025-04-11
- 0.0.39 — 2025-04-11
- 0.0.38 — 2025-02-05
- 0.0.37 — 2024-12-11
- 0.0.36 — 2024-12-11
- 0.0.35 — 2024-11-28
- 0.0.34 — 2024-11-21
- 0.0.33 — 2024-08-08
- 0.0.32 — 2024-07-25
- 0.0.31 — 2024-07-25
- 0.0.30 — 2024-07-02
- 0.0.29 — 2024-07-01
- 0.0.28 — 2024-07-01
- 0.0.27 — 2024-06-30
- … 23 more at https://npm.io/package/@touchblack/ui/versions

## README

This is a new [**React Native**](https://reactnative.dev) project, bootstrapped using [`@react-native-community/cli`](https://github.com/react-native-community/cli).

# Getting Started

> **Note**: Make sure you have completed the [Set Up Your Environment](https://reactnative.dev/docs/set-up-your-environment) guide before proceeding.

## Step 1: Start Metro

First, you will need to run **Metro**, the JavaScript build tool for React Native.

To start the Metro dev server, run the following command from the root of your React Native project:

```sh
# Using npm
npm start

# OR using Yarn
yarn start
```

## Step 2: Build and run your app

With Metro running, open a new terminal window/pane from the root of your React Native project, and use one of the following commands to build and run your Android or iOS app:

### Android

```sh
# Using npm
npm run android

# OR using Yarn
yarn android
```

### iOS

For iOS, remember to install CocoaPods dependencies (this only needs to be run on first clone or after updating native deps).

The first time you create a new project, run the Ruby bundler to install CocoaPods itself:

```sh
bundle install
```

Then, and every time you update your native dependencies, run:

```sh
bundle exec pod install
```

For more information, please visit [CocoaPods Getting Started guide](https://guides.cocoapods.org/using/getting-started.html).

```sh
# Using npm
npm run ios

# OR using Yarn
yarn ios
```

If everything is set up correctly, you should see your new app running in the Android Emulator, iOS Simulator, or your connected device.

This is one way to run your app — you can also build it directly from Android Studio or Xcode.

## Step 3: Modify your app

Now that you have successfully run the app, let's make changes!

Open `App.tsx` in your text editor of choice and make some changes. When you save, your app will automatically update and reflect these changes — this is powered by [Fast Refresh](https://reactnative.dev/docs/fast-refresh).

When you want to forcefully reload, for example to reset the state of your app, you can perform a full reload:

- **Android**: Press the <kbd>R</kbd> key twice or select **"Reload"** from the **Dev Menu**, accessed via <kbd>Ctrl</kbd> + <kbd>M</kbd> (Windows/Linux) or <kbd>Cmd ⌘</kbd> + <kbd>M</kbd> (macOS).
- **iOS**: Press <kbd>R</kbd> in iOS Simulator.

## Congratulations! :tada:

You've successfully run and modified your React Native App. :partying_face:

### Now what?

- If you want to add this new React Native code to an existing application, check out the [Integration guide](https://reactnative.dev/docs/integration-with-existing-apps).
- If you're curious to learn more about React Native, check out the [docs](https://reactnative.dev/docs/getting-started).

# Troubleshooting

If you're having issues getting the above steps to work, see the [Troubleshooting](https://reactnative.dev/docs/troubleshooting) page.

# Learn More

To learn more about React Native, take a look at the following resources:

- [React Native Website](https://reactnative.dev) - learn more about React Native.
- [Getting Started](https://reactnative.dev/docs/environment-setup) - an **overview** of React Native and how setup your environment.
- [Learn the Basics](https://reactnative.dev/docs/getting-started) - a **guided tour** of the React Native **basics**.
- [Blog](https://reactnative.dev/blog) - read the latest official React Native **Blog** posts.
- [`@facebook/react-native`](https://github.com/facebook/react-native) - the Open Source; GitHub **repository** for React Native.

---
_Source: https://npm.io/package/@touchblack/ui · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._