@janiscommerce/ui-native
Version:
components library for Janis app
88 lines (61 loc) • 2.22 kB
Markdown
# @janiscommerce/ui-native
Library components for Janis Apps
[](https://github.com/janis-commerce/ui-native/actions/workflows/coverage-status.yml)
[](https://badge.fury.io/js/%40janiscommerce%2Fui-native)
## Installation
The minimum required versions for using the package are **react: 17.0.2** and **react-native: 0.67.5**.
```sh
npm install @janiscommerce/ui-native
```
## Icons Installation
You will need to add the following lines in the **android/app/build.gradle** file:
```sh
android {
...
sourceSets {
main {
assets.srcDirs += [
'src/main/assets',
'../../node_modules/@janiscommerce/ui-native/dist/android/app/src/main/assets'
]
}
}
}
```
## SwipeUp component installation
You will need to have the following dependencies pre-installed:
- **"react-native-reanimated@2.17.0"**
- **"react-native-gesture-handler@2.9.0"**
### Step 1 - Install peer dependencies
```sh
npm i react-native-reanimated@2.17.0 react-native-gesture-handler@2.9.0
```
- gesture-handler will allow you to recognize the actions performed by the user.
- reanimated is responsible for displaying the animations in the bottom drawer.
### Step 2 - Add Reanimated's babel plugin
- Add `react-native-reanimated/plugin` plugin to your `babel.config.js`.
```js
module.exports = {
presets: [
... // don't add it here :)
],
plugins: [
...
'react-native-reanimated/plugin', // <= add it here :D
],
};
```
**IMPORTANT:** react-native-reanimated/plugin **has to be listed last**.
## Usage Example
A quick example of how to import a component and start using **@janiscommerce/ui-native**:
```js
import React from 'react';
import ReactDOM from 'react-dom';
import {Avatar} from '@janiscommerce/ui-native';
function App() {
return <Avatar size="sm" placeholder="Janis" bgColor="#2979FF" />;
}
ReactDOM.render(<App />, document.querySelector('#app'));
```
[Documentation](https://janis-commerce.github.io/ui-native)