react-native-tuto-showcase 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/README.md +29 -2
- package/package.json +5 -1
package/README.md
CHANGED
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
---
|
|
2
|
-
|
|
3
1
|
# 📘 **react-native-tuto-showcase**
|
|
4
2
|
|
|
5
3
|
### 🔦 A fully customizable Spotlight / Tutorial / Coachmark overlay for React Native
|
|
@@ -8,21 +6,49 @@ Perfect for onboarding flows, feature tours, highlighting UI elements, and guidi
|
|
|
8
6
|
|
|
9
7
|
---
|
|
10
8
|
|
|
9
|
+
# 📽 Demo
|
|
10
|
+
|
|
11
|
+
### **iOS Showcase**
|
|
12
|
+
|
|
13
|
+
<img
|
|
14
|
+
src="https://raw.githubusercontent.com/ahmedhegazydev/react-native-tuto-showcase/master/src/assets/SimulatorScreenRecording-iPhone16Pro-2025-11-24at14.14.46online-video-cutter.com-ezgif.com-video-to-gif-converter.gif"
|
|
15
|
+
width="350"
|
|
16
|
+
/>
|
|
17
|
+
|
|
18
|
+
---
|
|
19
|
+
|
|
20
|
+
### **Android Showcase**
|
|
21
|
+
|
|
22
|
+
<img
|
|
23
|
+
src="https://raw.githubusercontent.com/ahmedhegazydev/react-native-tuto-showcase/master/src/assets/ScreenRecording2025-12-02at7.52.23PMonline-video-cutter.com-ezgif.com-video-to-gif-converter.gif"
|
|
24
|
+
width="350"
|
|
25
|
+
/>
|
|
26
|
+
|
|
27
|
+
---
|
|
28
|
+
|
|
11
29
|
# ✨ Features
|
|
12
30
|
|
|
13
31
|
* 🎯 Highlight any UI element using **circle or rounded-rectangle spotlight**
|
|
32
|
+
|
|
14
33
|
* 📐 Auto-calculated spotlight position using `measureInWindow`
|
|
34
|
+
|
|
15
35
|
* 🔁 Show once / persistent keys using AsyncStorage
|
|
36
|
+
|
|
16
37
|
* 🎞 Lottie animation support above target
|
|
38
|
+
|
|
17
39
|
* 🕳 Multiple shapes per screen (multi-step tutorial)
|
|
40
|
+
|
|
18
41
|
* ✋ Gesture hints (swipe left/right, scroll)
|
|
42
|
+
|
|
19
43
|
* 🎨 Customizable:
|
|
20
44
|
|
|
21
45
|
* Overlay background color
|
|
22
46
|
* Button text, color, style
|
|
23
47
|
* Title & description
|
|
24
48
|
* Lottie size & position
|
|
49
|
+
|
|
25
50
|
* 📱 Works on both **iOS & Android**
|
|
51
|
+
|
|
26
52
|
* ⚡ Supports React Native 0.72+
|
|
27
53
|
|
|
28
54
|
---
|
|
@@ -234,3 +260,4 @@ import type { TutoShowcaseHandle } from 'react-native-tuto-showcase';
|
|
|
234
260
|
MIT © **Ahmed Mohamed Ali Ali Hegazy**
|
|
235
261
|
|
|
236
262
|
---
|
|
263
|
+
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-native-tuto-showcase",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.3",
|
|
4
4
|
"description": "Customizable tutorial / spotlight overlay for React Native (onboarding, feature tours, coachmarks).",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -8,6 +8,10 @@
|
|
|
8
8
|
"files": [
|
|
9
9
|
"dist"
|
|
10
10
|
],
|
|
11
|
+
"repository": {
|
|
12
|
+
"type": "git",
|
|
13
|
+
"url": "https://github.com/ahmedhegazydev/react-native-tuto-showcase.git"
|
|
14
|
+
},
|
|
11
15
|
"scripts": {
|
|
12
16
|
"build": "tsc"
|
|
13
17
|
},
|