@minkyumdev/react-native-switch 1.0.1 → 1.0.3
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/LICENSE +1 -1
- package/README.md +67 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +21 -3
- package/dist/index.js.map +1 -1
- package/package.json +26 -4
- package/src/index.tsx +19 -3
package/LICENSE
CHANGED
package/README.md
CHANGED
|
@@ -1,6 +1,27 @@
|
|
|
1
1
|
# @minkyumdev/react-native-switch
|
|
2
2
|
|
|
3
|
-
A customizable
|
|
3
|
+
> A highly customizable, animated switch/toggle component for React Native with smooth animations, haptic feedback, and full TypeScript support. Perfect for iOS and Android apps.
|
|
4
|
+
|
|
5
|
+
[](https://www.npmjs.com/package/@minkyumdev/react-native-switch)
|
|
6
|
+
[](https://www.npmjs.com/package/@minkyumdev/react-native-switch)
|
|
7
|
+
[](https://opensource.org/licenses/MIT)
|
|
8
|
+
|
|
9
|
+
A production-ready, customizable React Native switch component built with `react-native-reanimated` for smooth 60fps animations. Ideal for settings screens, feature toggles, and any UI that requires a modern switch component.
|
|
10
|
+
|
|
11
|
+
## 🎬 Demo
|
|
12
|
+
|
|
13
|
+
<table>
|
|
14
|
+
<tr>
|
|
15
|
+
<td width="50%" align="center">
|
|
16
|
+
<strong>iOS</strong><br/>
|
|
17
|
+
<img src="./assets/ios.gif" width="100%" alt="iOS Demo" />
|
|
18
|
+
</td>
|
|
19
|
+
<td width="50%" align="center">
|
|
20
|
+
<strong>Android</strong><br/>
|
|
21
|
+
<img src="./assets/android.gif" width="100%" alt="Android Demo" />
|
|
22
|
+
</td>
|
|
23
|
+
</tr>
|
|
24
|
+
</table>
|
|
4
25
|
|
|
5
26
|
## Features
|
|
6
27
|
|
|
@@ -204,6 +225,51 @@ function MyComponent() {
|
|
|
204
225
|
|
|
205
226
|
MIT
|
|
206
227
|
|
|
228
|
+
## Why Choose This Library?
|
|
229
|
+
|
|
230
|
+
- ✅ **Smooth Animations**: Powered by `react-native-reanimated` for 60fps animations
|
|
231
|
+
- ✅ **Fully Customizable**: Control colors, sizes, thumb scale, and more
|
|
232
|
+
- ✅ **TypeScript Support**: Full type definitions included
|
|
233
|
+
- ✅ **Haptic Feedback**: Optional haptic feedback for better UX
|
|
234
|
+
- ✅ **Cross-Platform**: Works seamlessly on iOS and Android
|
|
235
|
+
- ✅ **Lightweight**: Minimal dependencies, optimized bundle size
|
|
236
|
+
- ✅ **Production Ready**: Used in real-world applications
|
|
237
|
+
|
|
238
|
+
## Common Use Cases
|
|
239
|
+
|
|
240
|
+
- Settings screens and preference toggles
|
|
241
|
+
- Feature flags and A/B testing switches
|
|
242
|
+
- Notification settings
|
|
243
|
+
- Dark mode toggles
|
|
244
|
+
- Privacy settings
|
|
245
|
+
- Any boolean state management UI
|
|
246
|
+
|
|
247
|
+
## Related Packages
|
|
248
|
+
|
|
249
|
+
Looking for other React Native components? Check out:
|
|
250
|
+
|
|
251
|
+
- [react-native-reanimated](https://github.com/software-mansion/react-native-reanimated) - Animation library
|
|
252
|
+
- [@mhpdev/react-native-haptics](https://github.com/mhevery/react-native-haptics) - Haptic feedback
|
|
253
|
+
|
|
207
254
|
## Contributing
|
|
208
255
|
|
|
209
256
|
Contributions are welcome! Please feel free to submit a Pull Request.
|
|
257
|
+
|
|
258
|
+
1. Fork the repository
|
|
259
|
+
2. Create your feature branch (`git checkout -b feature/AmazingFeature`)
|
|
260
|
+
3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)
|
|
261
|
+
4. Push to the branch (`git push origin feature/AmazingFeature`)
|
|
262
|
+
5. Open a Pull Request
|
|
263
|
+
|
|
264
|
+
## Support
|
|
265
|
+
|
|
266
|
+
If you find this library helpful, please consider:
|
|
267
|
+
|
|
268
|
+
- ⭐ Starring the repository
|
|
269
|
+
- 🐛 Reporting bugs
|
|
270
|
+
- 💡 Suggesting new features
|
|
271
|
+
- 📖 Improving documentation
|
|
272
|
+
|
|
273
|
+
## License
|
|
274
|
+
|
|
275
|
+
MIT © [minkyumdev](https://github.com/minkyumdev)
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAC/D,OAAO,EAAa,SAAS,EAAE,SAAS,EAAc,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAC/D,OAAO,EAAa,SAAS,EAAE,SAAS,EAAc,MAAM,cAAc,CAAC;AA+B3E,MAAM,WAAW,WAAW;IAC1B;;OAEG;IACH,KAAK,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAYD,eAAO,MAAM,yBAAyB,MAAM,CAAC;AAY7C;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAwJxC,CAAC"}
|
package/dist/index.js
CHANGED
|
@@ -1,8 +1,26 @@
|
|
|
1
1
|
import React, { useCallback, useEffect, useMemo } from 'react';
|
|
2
2
|
import { Pressable, PixelRatio } from 'react-native';
|
|
3
3
|
import Animated, { interpolateColor, useAnimatedStyle, useSharedValue, withTiming, } from 'react-native-reanimated';
|
|
4
|
-
import Haptics from '@mhpdev/react-native-haptics';
|
|
5
4
|
import { styles } from './style';
|
|
5
|
+
// Optional haptics support - gracefully handle when native module is not available
|
|
6
|
+
var triggerHaptic = null;
|
|
7
|
+
try {
|
|
8
|
+
// Try expo-haptics first (for Expo users)
|
|
9
|
+
var ExpoHaptics_1 = require('expo-haptics');
|
|
10
|
+
triggerHaptic = function () {
|
|
11
|
+
return ExpoHaptics_1.impactAsync(ExpoHaptics_1.ImpactFeedbackStyle.Light);
|
|
12
|
+
};
|
|
13
|
+
}
|
|
14
|
+
catch (_a) {
|
|
15
|
+
try {
|
|
16
|
+
// Fallback to @mhpdev/react-native-haptics (for React Native CLI users)
|
|
17
|
+
var Haptics_1 = require('@mhpdev/react-native-haptics').default;
|
|
18
|
+
triggerHaptic = function () { return Haptics_1.impact('soft'); };
|
|
19
|
+
}
|
|
20
|
+
catch (_b) {
|
|
21
|
+
// No haptics library available - haptic feedback will be disabled
|
|
22
|
+
}
|
|
23
|
+
}
|
|
6
24
|
// Helper function for pixel ratio
|
|
7
25
|
var pixelRatio = function (value) {
|
|
8
26
|
return PixelRatio.roundToNearestPixel(value);
|
|
@@ -74,8 +92,8 @@ export var Switch = React.memo(function (_a) {
|
|
|
74
92
|
var handlePress = useCallback(function () {
|
|
75
93
|
if (disabled)
|
|
76
94
|
return;
|
|
77
|
-
if (enableHaptics) {
|
|
78
|
-
|
|
95
|
+
if (enableHaptics && triggerHaptic) {
|
|
96
|
+
triggerHaptic();
|
|
79
97
|
}
|
|
80
98
|
var newValue = !value;
|
|
81
99
|
onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(newValue);
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAC/D,OAAO,EAAE,SAAS,EAAwB,UAAU,EAAE,MAAM,cAAc,CAAC;AAC3E,OAAO,QAAQ,EAAE,EACf,gBAAgB,EAChB,gBAAgB,EAChB,cAAc,EACd,UAAU,GACX,MAAM,yBAAyB,CAAC;AACjC,OAAO,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@minkyumdev/react-native-switch",
|
|
3
|
-
"version": "1.0.
|
|
4
|
-
"description": "A customizable switch component for React Native",
|
|
3
|
+
"version": "1.0.3",
|
|
4
|
+
"description": "A highly customizable, animated switch/toggle component for React Native with smooth animations, haptic feedback, and TypeScript support. Built with react-native-reanimated for optimal performance.",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
7
7
|
"files": [
|
|
@@ -12,10 +12,23 @@
|
|
|
12
12
|
],
|
|
13
13
|
"keywords": [
|
|
14
14
|
"react-native",
|
|
15
|
+
"react-native-switch",
|
|
15
16
|
"switch",
|
|
16
17
|
"toggle",
|
|
17
|
-
"
|
|
18
|
-
"
|
|
18
|
+
"toggle-switch",
|
|
19
|
+
"animated-switch",
|
|
20
|
+
"customizable-switch",
|
|
21
|
+
"react-native-toggle",
|
|
22
|
+
"react-native-component",
|
|
23
|
+
"ui",
|
|
24
|
+
"ui-component",
|
|
25
|
+
"mobile",
|
|
26
|
+
"ios",
|
|
27
|
+
"android",
|
|
28
|
+
"haptic-feedback",
|
|
29
|
+
"reanimated",
|
|
30
|
+
"typescript",
|
|
31
|
+
"expo"
|
|
19
32
|
],
|
|
20
33
|
"author": "",
|
|
21
34
|
"license": "MIT",
|
|
@@ -35,10 +48,19 @@
|
|
|
35
48
|
},
|
|
36
49
|
"peerDependencies": {
|
|
37
50
|
"@mhpdev/react-native-haptics": "*",
|
|
51
|
+
"expo-haptics": "*",
|
|
38
52
|
"react": ">=16.8.0",
|
|
39
53
|
"react-native": ">=0.60.0",
|
|
40
54
|
"react-native-reanimated": ">=2.0.0"
|
|
41
55
|
},
|
|
56
|
+
"peerDependenciesMeta": {
|
|
57
|
+
"@mhpdev/react-native-haptics": {
|
|
58
|
+
"optional": true
|
|
59
|
+
},
|
|
60
|
+
"expo-haptics": {
|
|
61
|
+
"optional": true
|
|
62
|
+
}
|
|
63
|
+
},
|
|
42
64
|
"dependencies": {},
|
|
43
65
|
"devDependencies": {
|
|
44
66
|
"@babel/core": "^7.25.2",
|
package/src/index.tsx
CHANGED
|
@@ -6,9 +6,25 @@ import Animated, {
|
|
|
6
6
|
useSharedValue,
|
|
7
7
|
withTiming,
|
|
8
8
|
} from 'react-native-reanimated';
|
|
9
|
-
import Haptics from '@mhpdev/react-native-haptics';
|
|
10
9
|
import { styles } from './style';
|
|
11
10
|
|
|
11
|
+
// Optional haptics support - gracefully handle when native module is not available
|
|
12
|
+
let triggerHaptic: (() => void) | null = null;
|
|
13
|
+
try {
|
|
14
|
+
// Try expo-haptics first (for Expo users)
|
|
15
|
+
const ExpoHaptics = require('expo-haptics');
|
|
16
|
+
triggerHaptic = () =>
|
|
17
|
+
ExpoHaptics.impactAsync(ExpoHaptics.ImpactFeedbackStyle.Light);
|
|
18
|
+
} catch {
|
|
19
|
+
try {
|
|
20
|
+
// Fallback to @mhpdev/react-native-haptics (for React Native CLI users)
|
|
21
|
+
const Haptics = require('@mhpdev/react-native-haptics').default;
|
|
22
|
+
triggerHaptic = () => Haptics.impact('soft');
|
|
23
|
+
} catch {
|
|
24
|
+
// No haptics library available - haptic feedback will be disabled
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
|
|
12
28
|
// Helper function for pixel ratio
|
|
13
29
|
const pixelRatio = (value: number): number => {
|
|
14
30
|
return PixelRatio.roundToNearestPixel(value);
|
|
@@ -180,8 +196,8 @@ export const Switch: React.FC<SwitchProps> = React.memo<SwitchProps>(
|
|
|
180
196
|
|
|
181
197
|
const handlePress = useCallback(() => {
|
|
182
198
|
if (disabled) return;
|
|
183
|
-
if (enableHaptics) {
|
|
184
|
-
|
|
199
|
+
if (enableHaptics && triggerHaptic) {
|
|
200
|
+
triggerHaptic();
|
|
185
201
|
}
|
|
186
202
|
const newValue = !value;
|
|
187
203
|
onValueChange?.(newValue);
|