react-native-spotlight-view 
Getting started
$ npm install react-native-spotlight-view --save
Example
Usage
; <SpotLight diameter=100 offsetX=100 offsetY=100 visible=true> <View style= flex: 1 > // Add any children here} </View></SpotLight>Or
<SpotLightFromRef viewRef=someViewReference visible=true> <View style= flex: 1 > // Add any children here} </View></SpotLightFromRef>Supported Props:
For SpotLight
| Name | Type | Description |
|---|---|---|
| duration | number | (optional)animation duration to show or hide in ms |
| visible | boolean | View visibility indicator |
| opacity | number | (optional) value between 0 to 1 for background opacity |
| diameter | number | diameter of spotlight view |
| offsetX | number | offset from center of screen |
| offsetY | number | offset from center of screen |
| circleImage | number | { uri: string } |
| renderCircle | function(style) | (optional)function to render inner circle of spotlight |
| onRequestClose | function() | (optional)called when hardware back button is pressed on android |
For SpotLightFromRef
| Name | Type | Description |
|---|---|---|
| duration | number | (optional)animation duration to show or hide in ms |
| visible | boolean | View visibility indicator |
| diameterOffset | number | (optional)increase or decrease calculated diameter by this value |
| viewRef | React view | react view reference to calculate offset |
| circleImage | number | { uri: string } |
| opacity | number | (optional) value between 0 to 1 for background opacity |
| renderCircle | function(style) | (optional)function to render inner circle of spotlight |
| onRequestClose | function() | (optional)called when hardware back button is pressed on android |
TroubleShooting
- If on android using SpotLightFromRef, the spotlight is not showing then please ensure that on the reference view collapsible property is false
i.e. collapsable={false}