Skip to content

Commit 904fc78

Browse files
author
Aswin Lakshmanan
committed
feat(upgrade): add react-native-reanimated
Add react-native-reanimated package to project and update readme with relevant information. Changes made: - Added react-native-reanimated package - Added example for custom hook usage - Updated readme This commit follows the conventional commit format.
1 parent 64f897d commit 904fc78

10 files changed

+232
-157
lines changed

‎README.md

+53-73
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,60 @@
1-
# 🆕 React Native Vertical Slider 🎚
1+
# :control_knobs: rn-vertical-slider
22

3-
#### **(rn-vertical-slider)**
3+
A highly customizable vertical slider component for React Native using React Native Gesture Handler and Reanimated. Support this project with a ★ on [**Github**](https://github.com/sacmii/rn-vertical-slider).
44

5-
###### A vertical Slider for React Native written entirely in javascript. Support this project with a ★ on [**Github**](https://github.com/sacmii/rn-vertical-slider).
5+
<img src="https://user-images.githubusercontent.com/12546974/219866420-4796142d-396f-4b31-996a-89f570f7a863.gif" alt="Alt text" width="250">
66

7-
## ✨Features
7+
## :inbox_tray: Installation
88

9-
- 📝 Completely written in Typescript
10-
- 🔗 No Native linking required
9+
You can install this package using either Yarn or NPM.
1110

12-
![Example1](https://user-images.githubusercontent.com/12546974/82729464-63a73d00-9d15-11ea-99dc-e432e61d8398.gif) ![Example2](https://user-images.githubusercontent.com/12546974/82730380-b0dadd00-9d1c-11ea-889d-03249c6b5f76.gif)
11+
### <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/db/Npm-logo.svg/1200px-Npm-logo.svg.png" alt="Alt text" width="50">
1312

14-
## 🏁 Getting Started
15-
16-
- To add this slider to your project :
17-
18-
```
13+
```bash
1914
npm install rn-vertical-slider
2015
```
2116

22-
## 🎨 Usage
23-
24-
- A basic example of slider
17+
### <img src="https://raw.githubusercontent.com/yarnpkg/assets/master/yarn-kitten-full.png" alt="Alt text" width="50">
2518

19+
```bash
20+
yarn add rn-vertical-slider
2621
```
27-
<VerticalSlider
28-
value={1}
29-
disabled={false}
30-
min={0}
31-
max={100}
32-
onChange={(value: number) => {
33-
console.log("CHANGE", value);
34-
}}
35-
onComplete={(value: number) => {
36-
console.log("COMPLETE", value);
37-
}}
38-
width={50}
39-
height={300}
40-
step={1}
41-
borderRadius={5}
42-
minimumTrackTintColor={"gray"}
43-
maximumTrackTintColor={"tomato"}
44-
showBallIndicator
45-
ballIndicatorColor={"gray"}
46-
ballIndicatorTextColor={"white"}
47-
/>
22+
23+
## :bulb: Usage
24+
25+
```bash
26+
import VerticalSlider from 'rn-vertical-slider';
27+
28+
function App() {
29+
const [value, setValue] = useState(0);
30+
return (
31+
<VerticalSlider
32+
value={value}
33+
onChange={(value) => setValue(value)}
34+
height={200}
35+
width={40}
36+
step={1}
37+
min={0}
38+
max={100}
39+
borderRadius={5}
40+
minimumTrackTintColor="#2979FF"
41+
maximumTrackTintColor="#D1D1D6"
42+
showBallIndicator
43+
ballIndicatorColor="#2979FF"
44+
ballIndicatorTextColor="#fff"
45+
ballIndicatorWidth={80}
46+
ballIndicatorHeight={40}
47+
/>
48+
);
49+
}
4850
```
4951

50-
## 🎛 Props
52+
<img src="https://user-images.githubusercontent.com/12546974/219865670-04781857-d2eb-48b5-a14d-104d73bdc928.gif" alt="Alt text" width="250">
53+
54+
## :book: Props
5155

5256
| Property | Type | Default | Description |
53-
| :--------------------- | :------- | :-------- | :-------------------------------------------------------------------------------------------- |
57+
|:-----------------------|:---------|:----------|:----------------------------------------------------------------------------------------------|
5458
| value | number | 0 | Value of the slider. |
5559
| disabled | bool | false | Enable or disable slider. |
5660
| min | number | 0 | Minimum value for slider. |
@@ -69,48 +73,24 @@ npm install rn-vertical-slider
6973
| ballIndicatorHeight | number | 48 | Diameter of Indicator. [Width of Indicator : If renderIndicator present] |
7074
| ballIndicatorPosition | number | -50 | Horizontal position of Indicator with respect to current selected value. |
7175
| ballIndicatorTextColor | string | '#fff' | Indicator text color. |
72-
| animationDuration | number | 0 | Animation Duration |
7376
| showBackgroundShadow | boolean | 0 | Display shadow on Indicator (If available) and Slider |
7477
| shadowProps | object | see below | Shadow Configuration for Slider |
75-
| renderIndicator | boolean | 0 | Render a custom slider indicator |
78+
| renderIndicator | boolean | 0 | Render a custom slider indicator
7679

77-
- #### shadowProps
80+
## :art: Demo
7881

79-
shadowProps define the shadow properties for slider (Indicator Component if shown)
80-
Default Props :
82+
You can try the [example app](https://github.com/sacmii/rn-vertical-slider/tree/master/example) by cloning this repo and running the following commands:
8183

84+
```sh
85+
cd example
86+
yarn install
87+
npx expo start
8288
```
83-
{
84-
shadowOffsetWidth = 0,
85-
shadowOffsetHeight = 1,
86-
shadowOpacity = 0.22,
87-
shadowRadius = 2.22,
88-
elevation = 3,
89-
shadowColor = '#000',
90-
}
91-
```
92-
93-
- #### renderIndicator
94-
95-
renderIndicator is used when you want to use custom indicator for the slider. _ballIndicatorHeight_, _ballIndicatorWidth_ will define the height and width of the component.
96-
97-
- ##### Custom renderIndicator
98-
99-
![Custom Indicator](https://user-images.githubusercontent.com/12546974/82730062-89831080-9d1a-11ea-8f41-b37d02b79a69.gif)
100-
101-
## 📌 Extras
102-
103-
- _[Gradient Slider](https://github.com/sacmii/rn-vertical-slider-gradient)_ Slider with linear gradient
104-
- **Github** ★'s are more additcting than Coffee 🤩
105-
106-
## ☀️ License
107-
108-
This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details
10989

110-
## 🚧 Contributing
90+
## :handshake: Contributing
11191

112-
See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
92+
Contributions are welcome! Feel free to open an issue or submit a pull request if you find a bug or have a feature request. See the [contributing guide](https://github.com/sacmii/rn-vertical-slider/blob/master/CONTRIBUTING) to learn how to contribute to the repository and the development workflow.
11393

114-
## License
94+
## :scroll: License
11595

116-
MIT
96+
This project is licensed under the [MIT License](https://github.com/sacmii/rn-vertical-slider/blob/master/LICENSE).

‎babel.config.js

+1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
module.exports = {
22
presets: ['module:metro-react-native-babel-preset'],
3+
plugins: ['react-native-reanimated/plugin'],
34
};

‎example/babel.config.js

+1
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ module.exports = function (api) {
77
return {
88
presets: ['babel-preset-expo'],
99
plugins: [
10+
['react-native-reanimated/plugin'],
1011
[
1112
'module-resolver',
1213
{

‎example/package.json

+5-4
Original file line numberDiff line numberDiff line change
@@ -12,15 +12,16 @@
1212
"expo": "~47.0.12",
1313
"expo-status-bar": "~1.4.2",
1414
"react": "18.1.0",
15-
"react-native": "0.70.5",
1615
"react-dom": "18.1.0",
16+
"react-native": "0.70.5",
17+
"react-native-reanimated": "~2.12.0",
1718
"react-native-web": "~0.18.9"
1819
},
1920
"devDependencies": {
2021
"@babel/core": "^7.12.9",
21-
"babel-plugin-module-resolver": "^4.1.0",
2222
"@expo/webpack-config": "^0.17.2",
23-
"babel-loader": "^8.1.0"
23+
"babel-loader": "^8.1.0",
24+
"babel-plugin-module-resolver": "^4.1.0"
2425
},
2526
"private": true
26-
}
27+
}

‎example/src/App.tsx

+37-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,36 @@
11
import * as React from 'react';
22
import { StyleSheet, View } from 'react-native';
3+
import Animated from 'react-native-reanimated';
34
import RnVerticalSlider from 'rn-vertical-slider';
5+
import { Ionicons } from '@expo/vector-icons';
6+
7+
const renderIcon = (newVal: number) => {
8+
// eslint-disable-next-line react-hooks/rules-of-hooks
9+
const iconProps = React.useMemo(() => {
10+
let styles = {
11+
name: '',
12+
size: 30,
13+
color: '#FFFBF5',
14+
};
15+
if (newVal > 75) {
16+
styles.name = 'heart-circle-outline';
17+
} else if (newVal > 50) {
18+
styles.name = 'help-circle-outline';
19+
} else {
20+
styles.name = 'heart-dislike-circle-outline';
21+
}
22+
return styles;
23+
// eslint-disable-next-line react-hooks/exhaustive-deps
24+
}, [newVal]);
25+
return (
26+
<View>
27+
<Animated.Text>
28+
{/* @ts-ignore */}
29+
<Ionicons {...iconProps} />
30+
</Animated.Text>
31+
</View>
32+
);
33+
};
434

535
const App: React.FC = () => {
636
const [value, setValue] = React.useState(1);
@@ -18,10 +48,15 @@ const App: React.FC = () => {
1848
width={50}
1949
height={300}
2050
step={1}
51+
showBackgroundShadow={false}
2152
borderRadius={5}
22-
minimumTrackTintColor={'gray'}
23-
maximumTrackTintColor={'tomato'}
53+
maximumTrackTintColor="#18122B"
54+
minimumTrackTintColor="#635985"
2455
showBallIndicator
56+
renderIndicator={renderIcon}
57+
ballIndicatorWidth={50}
58+
ballIndicatorHeight={50}
59+
ballIndicatorPosition={0}
2560
ballIndicatorColor={'gray'}
2661
ballIndicatorTextColor={'white'}
2762
/>

‎example/yarn.lock

+36-1
Original file line numberDiff line numberDiff line change
@@ -774,6 +774,13 @@
774774
dependencies:
775775
"@babel/helper-plugin-utils" "^7.18.6"
776776

777+
"@babel/plugin-transform-object-assign@^7.16.7":
778+
version "7.18.6"
779+
resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-assign/-/plugin-transform-object-assign-7.18.6.tgz#7830b4b6f83e1374a5afb9f6111bcfaea872cdd2"
780+
integrity sha512-mQisZ3JfqWh2gVXvfqYCAAyRs6+7oev+myBsTwW5RnPhYXOTuCEw2oe3YgxlXMViXUS53lG8koulI7mJ+8JE+A==
781+
dependencies:
782+
"@babel/helper-plugin-utils" "^7.18.6"
783+
777784
"@babel/plugin-transform-object-super@^7.0.0", "@babel/plugin-transform-object-super@^7.18.6":
778785
version "7.18.6"
779786
resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.18.6.tgz#fb3c6ccdd15939b6ff7939944b51971ddc35912c"
@@ -1016,7 +1023,7 @@
10161023
"@babel/types" "^7.4.4"
10171024
esutils "^2.0.2"
10181025

1019-
"@babel/preset-typescript@^7.13.0":
1026+
"@babel/preset-typescript@^7.13.0", "@babel/preset-typescript@^7.16.7":
10201027
version "7.18.6"
10211028
resolved "https://registry.yarnpkg.com/@babel/preset-typescript/-/preset-typescript-7.18.6.tgz#ce64be3e63eddc44240c6358daefac17b3186399"
10221029
integrity sha512-s9ik86kXBAnD760aybBucdpnLsAt0jK1xqJn2juOn9lkOvSHV60os5hxoVJsPzMQxvnUJFAlkont2DvvaYEBtQ==
@@ -1843,6 +1850,11 @@
18431850
resolved "https://registry.yarnpkg.com/@types/html-minifier-terser/-/html-minifier-terser-5.1.2.tgz#693b316ad323ea97eed6b38ed1a3cc02b1672b57"
18441851
integrity sha512-h4lTMgMJctJybDp8CQrxTUiiYmedihHWkjnF/8Pxseu2S6Nlfcy8kwboQ8yejh456rP2yWoEVm1sS/FVsfM48w==
18451852

1853+
"@types/invariant@^2.2.35":
1854+
version "2.2.35"
1855+
resolved "https://registry.yarnpkg.com/@types/invariant/-/invariant-2.2.35.tgz#cd3ebf581a6557452735688d8daba6cf0bd5a3be"
1856+
integrity sha512-DxX1V9P8zdJPYQat1gHyY0xj3efl8gnMVjiM9iCY6y27lj+PoQWkgjt8jDqmovPqULkKVpKRg8J36iQiA+EtEg==
1857+
18461858
"@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0":
18471859
version "2.0.4"
18481860
resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.4.tgz#8467d4b3c087805d63580480890791277ce35c44"
@@ -6323,6 +6335,11 @@ lodash.debounce@^4.0.8:
63236335
resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
63246336
integrity sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==
63256337

6338+
lodash.isequal@^4.5.0:
6339+
version "4.5.0"
6340+
resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0"
6341+
integrity sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==
6342+
63266343
lodash.memoize@^4.1.2:
63276344
version "4.1.2"
63286345
resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
@@ -8414,6 +8431,19 @@ react-native-gradle-plugin@^0.70.3:
84148431
resolved "https://registry.yarnpkg.com/react-native-gradle-plugin/-/react-native-gradle-plugin-0.70.3.tgz#cbcf0619cbfbddaa9128701aa2d7b4145f9c4fc8"
84158432
integrity sha512-oOanj84fJEXUg9FoEAQomA8ISG+DVIrTZ3qF7m69VQUJyOGYyDZmPqKcjvRku4KXlEH6hWO9i4ACLzNBh8gC0A==
84168433

8434+
react-native-reanimated@~2.12.0:
8435+
version "2.12.0"
8436+
resolved "https://registry.yarnpkg.com/react-native-reanimated/-/react-native-reanimated-2.12.0.tgz#5821eecfb1769b1617a67a2d4dec12fdeedb2b6e"
8437+
integrity sha512-nrlPyw+Hx9u4iJhZk9PoTvDo/QmVAd+bo7OK9Tv3hveNEF9++5oig/g3Uv9V93shy9avTYGsUprUvAEt/xdzeQ==
8438+
dependencies:
8439+
"@babel/plugin-transform-object-assign" "^7.16.7"
8440+
"@babel/preset-typescript" "^7.16.7"
8441+
"@types/invariant" "^2.2.35"
8442+
invariant "^2.2.4"
8443+
lodash.isequal "^4.5.0"
8444+
setimmediate "^1.0.5"
8445+
string-hash-64 "^1.0.3"
8446+
84178447
react-native-web@~0.18.9:
84188448
version "0.18.12"
84198449
resolved "https://registry.yarnpkg.com/react-native-web/-/react-native-web-0.18.12.tgz#d4bb3a783ece2514ba0508d7805b09c0a98f5a8e"
@@ -9350,6 +9380,11 @@ stream-shift@^1.0.0:
93509380
resolved "https://registry.yarnpkg.com/stream-shift/-/stream-shift-1.0.1.tgz#d7088281559ab2778424279b0877da3c392d5a3d"
93519381
integrity sha512-AiisoFqQ0vbGcZgQPY1cdP2I76glaVA/RauYR4G4thNFgkTqr90yXTo4LYX60Jl+sIlPNHHdGSwo01AvbKUSVQ==
93529382

9383+
string-hash-64@^1.0.3:
9384+
version "1.0.3"
9385+
resolved "https://registry.yarnpkg.com/string-hash-64/-/string-hash-64-1.0.3.tgz#0deb56df58678640db5c479ccbbb597aaa0de322"
9386+
integrity sha512-D5OKWKvDhyVWWn2x5Y9b+37NUllks34q1dCDhk/vYcso9fmhs+Tl3KR/gE4v5UNj2UA35cnX4KdVVGkG1deKqw==
9387+
93539388
string-width@^3.0.0, string-width@^3.1.0:
93549389
version "3.1.0"
93559390
resolved "https://registry.yarnpkg.com/string-width/-/string-width-3.1.0.tgz#22767be21b62af1081574306f69ac51b62203961"

‎package.json

+4-2
Original file line numberDiff line numberDiff line change
@@ -56,8 +56,8 @@
5656
"registry": "https://registry.npmjs.org/"
5757
},
5858
"devDependencies": {
59+
"@commitlint/config-conventional": "^17.4.4",
5960
"@evilmartians/lefthook": "^1.2.2",
60-
"@commitlint/config-conventional": "^17.0.2",
6161
"@react-native-community/eslint-config": "^3.0.2",
6262
"@release-it/conventional-changelog": "^5.0.0",
6363
"@types/jest": "^28.1.2",
@@ -74,6 +74,7 @@
7474
"react": "18.1.0",
7575
"react-native": "0.70.5",
7676
"react-native-builder-bob": "^0.20.0",
77+
"react-native-reanimated": "^2.14.4",
7778
"release-it": "^15.0.0",
7879
"typescript": "^4.5.2"
7980
},
@@ -82,7 +83,8 @@
8283
},
8384
"peerDependencies": {
8485
"react": "*",
85-
"react-native": "*"
86+
"react-native": "*",
87+
"react-native-reanimated": "*"
8688
},
8789
"engines": {
8890
"node": ">= 16.0.0"

0 commit comments

Comments
 (0)