react-native-spotlight-view

react-native-spotlight-view

Getting started

$ npm install react-native-spotlight-view --save

Example

Usage

import { SpotLight, SpotLightFromRef } from 'react-native-spotlight-view';
 
<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

1. 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}