@janiscommerce/ui-native 1.1.0 → 1.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +27 -9
- package/package.json +7 -5
package/README.md
CHANGED
|
@@ -29,38 +29,56 @@ You will need to add the following lines in the **android/app/build.gradle** fil
|
|
|
29
29
|
'../../node_modules/@janiscommerce/ui-native/dist/android/app/src/main/assets'
|
|
30
30
|
]
|
|
31
31
|
}
|
|
32
|
-
}
|
|
32
|
+
}
|
|
33
33
|
}
|
|
34
34
|
```
|
|
35
35
|
|
|
36
|
-
## SwipeUp component
|
|
36
|
+
## SwipeUp component installation
|
|
37
37
|
|
|
38
38
|
You will need to have the following dependencies pre-installed:
|
|
39
39
|
|
|
40
|
-
- **"@
|
|
41
|
-
- **"react-native-
|
|
42
|
-
|
|
40
|
+
- **"react-native-reanimated@2.17.0"**
|
|
41
|
+
- **"react-native-gesture-handler@2.9.0"**
|
|
42
|
+
|
|
43
|
+
### Step 1 - Install peer dependencies
|
|
43
44
|
|
|
44
45
|
```sh
|
|
45
|
-
npm i react-native-reanimated react-native-gesture-handler
|
|
46
|
+
npm i react-native-reanimated@2.17.0 react-native-gesture-handler@2.9.0
|
|
46
47
|
```
|
|
47
48
|
|
|
48
49
|
- gesture-handler will allow you to recognize the actions performed by the user.
|
|
49
50
|
|
|
50
51
|
- reanimated is responsible for displaying the animations in the bottom drawer.
|
|
51
52
|
|
|
52
|
-
|
|
53
|
+
### Step 2 - Add Reanimated's babel plugin
|
|
54
|
+
|
|
55
|
+
- Add `react-native-reanimated/plugin` plugin to your `babel.config.js`.
|
|
56
|
+
|
|
57
|
+
```js
|
|
58
|
+
module.exports = {
|
|
59
|
+
presets: [
|
|
60
|
+
... // don't add it here :)
|
|
61
|
+
],
|
|
62
|
+
plugins: [
|
|
63
|
+
...
|
|
64
|
+
'react-native-reanimated/plugin', // <= add it here :D
|
|
65
|
+
],
|
|
66
|
+
};
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
**IMPORTANT:** react-native-reanimated/plugin **has to be listed last**.
|
|
70
|
+
|
|
53
71
|
## Usage Example
|
|
54
72
|
|
|
55
73
|
A quick example of how to import a component and start using **@janiscommerce/ui-native**:
|
|
56
74
|
|
|
57
|
-
```
|
|
75
|
+
```js
|
|
58
76
|
import React from 'react';
|
|
59
77
|
import ReactDOM from 'react-dom';
|
|
60
78
|
import {Avatar} from '@janiscommerce/ui-native';
|
|
61
79
|
|
|
62
80
|
function App() {
|
|
63
|
-
|
|
81
|
+
return <Avatar size="sm" placeholder="Janis" bgColor="#2979FF" />;
|
|
64
82
|
}
|
|
65
83
|
|
|
66
84
|
ReactDOM.render(<App />, document.querySelector('#app'));
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@janiscommerce/ui-native",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.1",
|
|
4
4
|
"description": "components library for Janis app",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"typings": "dist/index.d.ts",
|
|
@@ -42,13 +42,14 @@
|
|
|
42
42
|
"homepage": "https://github.com/janis-commerce/ui-native#readme",
|
|
43
43
|
"peerDependencies": {
|
|
44
44
|
"react": ">=17.0.2 <=18.2.0",
|
|
45
|
-
"react-native": ">=0.67.5 <=0.71.7"
|
|
45
|
+
"react-native": ">=0.67.5 <=0.71.7",
|
|
46
|
+
"react-native-gesture-handler": ">=2.9.0 <=2.13.4",
|
|
47
|
+
"react-native-reanimated": "2.17.0"
|
|
46
48
|
},
|
|
47
49
|
"devDependencies": {
|
|
48
50
|
"@babel/core": "^7.12.9",
|
|
49
51
|
"@babel/preset-env": "^7.22.7",
|
|
50
52
|
"@babel/runtime": "^7.22.6",
|
|
51
|
-
"@gorhom/bottom-sheet": "^4.5.1",
|
|
52
53
|
"@react-native-community/eslint-config": "^2.0.0",
|
|
53
54
|
"@storybook/addon-actions": "^6.5.4",
|
|
54
55
|
"@storybook/addon-controls": "^6.5.4",
|
|
@@ -90,8 +91,6 @@
|
|
|
90
91
|
"react": "17.0.2",
|
|
91
92
|
"react-dom": "^17.0.2",
|
|
92
93
|
"react-native": "0.67.5",
|
|
93
|
-
"react-native-gesture-handler": "^2.9.0",
|
|
94
|
-
"react-native-reanimated": "^2.17.0",
|
|
95
94
|
"react-native-svg-transformer": "^1.0.0",
|
|
96
95
|
"react-test-renderer": "17.0.2",
|
|
97
96
|
"setup-env": "^2.0.0",
|
|
@@ -115,10 +114,13 @@
|
|
|
115
114
|
]
|
|
116
115
|
},
|
|
117
116
|
"dependencies": {
|
|
117
|
+
"@gorhom/bottom-sheet": "^4.5.1",
|
|
118
118
|
"@react-native-async-storage/async-storage": "^1.19.0",
|
|
119
119
|
"@react-native-community/datetimepicker": "^7.4.0",
|
|
120
120
|
"@react-native-community/slider": "^4.4.2",
|
|
121
121
|
"@storybook/cli": "^6.5.4",
|
|
122
|
+
"react-native-reanimated": "^2.17.0",
|
|
123
|
+
"react-native-gesture-handler": "^2.9.0",
|
|
122
124
|
"react-native-safe-area-context": "^4.6.4",
|
|
123
125
|
"react-native-svg": "12.1.1",
|
|
124
126
|
"react-native-vector-icons": "^9.2.0",
|