# `@preply/ds-rn-lib`

> DS component library for React Native

## Using the Design System in a React Native app?

Follow the instructions in [@preply/ds-workspace](../../README.md).

**tl;dr:**

```tsx
import { RootProvider } from '@preply/ds-rn-root';
import { Text } from '@preply/ds-rn-lib';

export const App: FC = () => (
  <RootProvider theme="tokyo-ui">
    <Text>Hello!</Text>
  </RootProvider>
);
```

### Specific for React Native:

#### Install the packages

`yarn add @preply/ds-rn-lib @preply/ds-rn-root`

#### Add `RootProvider`

It should wrap the whole app as in the example above and will use the default theme. You can also override the theme by passing it as prop:

`<AppProvider theme="tokyo-ui">`

## Contributing

Reach out to [#design-system-public](https://preply.slack.com/archives/C024EAEHP6V) if you think you can help and keep an eye on [DS Confluence](https://preply.atlassian.net/wiki/spaces/DS/overview) for more docs, guides, work in progress, decisions, the works.

## Development

You probably want to execute `yarn dev` in the root, as per instructions in [@preply/ds-workspace](../../README.md).

For quicker - and more focused - feedback, you can also directly use the scripts in this package directory, but make sure you have first executed `yarn build` in root, or that you have the root `yarn dev` script running in the background.

## Tooling

Details about tools and configurations in [@preply/ds-workspace](../../README.md).

### Dev dependencies

We only list the dependencies used directly in tests (`metro-react-native-babel-preset`) and some in which we need a specific version to avoid version mismatch and the tests crashing (`react`, `react-native`, `react-test-renderer`)

**Do NOT add dependencies on** linting, testing, building tools unless:

- you need to require some resource in a doc file or a test.
- you need to add a very specific plugin to this package only and you want to signal the dependency loudly.