🎯 React Native Spotlight Guide

🎥 Demo

✨ Features

• 🎨 Four spotlight shapes: rectangle, circle, oval, and custom
• 🌈 Fully customizable styles
• 📱 Native performance for iOS and Android
• 🔄 Forward/backward navigation support
• 🎭 Customizable button and content styles
• 🌓 Dark/light theme support
• 📐 Automatic positioning
• 🔧 TypeScript support

📦 Installation

Requirements

• React Native >= 0.72.0
• React >= 18.2.0
• react-native-svg >= 13.0.0

First, install the main package

1# If you use npm:
2npm install react-native-spotlight-guide
3
4# Or if you use Yarn:
5yarn add react-native-spotlight-guide

Then, install required peer dependency

1# If you use npm:
2npm install react-native-svg
3
4# Or if you use Yarn:
5yarn add react-native-svg

For iOS, install pods

1cd ios && pod install && cd ..

🚀 Quick Start

1import { SpotlightGuide } from "react-native-spotlight-guide";
2
3const App = () => {
4  const [showGuide, setShowGuide] = useState(true);
5
6  return (
7    <SpotlightGuide
8      isVisible={showGuide}
9      content="Welcome! This button starts the main operations."
10      spotlightShape="circle"
11      contentPosition="bottom"
12      onFinish={() => setShowGuide(false)}
13    >
14      <Button title="Start" onPress={() => {}} />
15    </SpotlightGuide>
16  );
17};

📚 Props

Core Props

Prop	Type	Default	Description
`children`	React.ReactNode	-	Component to be highlighted
`isVisible`	boolean	false	Controls spotlight visibility
`content`	string	-	Text content to be displayed

Appearance Props

Prop	Type	Default	Description
`spotlightShape`	'circle' | 'oval' | 'rectangle' | 'custom'	'rectangle'	Shape of the spotlight
`customShape`	CustomSpotlightShape	-	Custom spotlight shape configuration
`spotlightPadding`	number	10	Padding between spotlight and component
`overlayOpacity`	number	0.7	Background overlay opacity (0-1)
`overlayColor`	string	'rgba(0, 0, 0, 0.7)'	Background overlay color

Position Props

Prop	Type	Default	Description
`contentPosition`	'top' | 'bottom' | 'left' | 'right'	'bottom'	Position of content box

Style Props

Prop	Type	Default	Description
`contentContainerStyle`	ViewStyle	-	Content container style
`contentTextStyle`	TextStyle	-	Content text style
`buttonContainerStyle`	ViewStyle	-	Button container style
`buttonStyle`	ViewStyle	-	Button style
`buttonTextStyle`	TextStyle	-	Button text style

Event Props

Prop	Type	Default	Description
`onNext`	() => void	-	Next button press event
`onPrev`	() => void	-	Previous button press event
`onFinish`	() => void	-	Finish button press event
`onPressOverlay`	() => void	-	Overlay press event

🎨 Customization

Custom Shape Usage

1<SpotlightGuide
2  spotlightShape="custom"
3  customShape={{
4    width: 200,
5    height: 100,
6    borderRadius: 12,
7    backgroundColor: "rgba(0, 122, 255, 0.1)",
8    borderWidth: 2,
9    borderColor: "#007AFF",
10    borderStyle: "dashed",
11  }}
12>
13  <YourComponent />
14</SpotlightGuide>

Custom Styles

1<SpotlightGuide
2  contentContainerStyle={{
3    backgroundColor: "#1E1E1E",
4    borderRadius: 16,
5    padding: 20,
6    shadowColor: "#000",
7    shadowOffset: { width: 0, height: 4 },
8    shadowOpacity: 0.1,
9    shadowRadius: 12,
10    elevation: 5,
11  }}
12  contentTextStyle={{
13    color: "#FFFFFF",
14    fontSize: 16,
15    lineHeight: 24,
16    textAlign: "center",
17  }}
18  buttonStyle={{
19    backgroundColor: "#007AFF",
20    paddingVertical: 12,
21    paddingHorizontal: 24,
22    borderRadius: 12,
23  }}
24>
25  <YourComponent />
26</SpotlightGuide>

📱 Example App

To run the example app:

1git clone https://github.com/FurkanKayaDev/react-native-spotlight-guide.git
2cd react-native-spotlight-guide/example
3yarn install
4cd ios && pod install && cd ..
5yarn ios # or yarn android

🤝 Contributing

Contributions are welcome! Please read our Contributing Guide for details.

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙋‍♂️ Support

If you have any questions or suggestions, please open an issue on GitHub Issues.

---

Made with ❤️ by Furkan Kaya