react-native-overlay-coach-mark

A React Native UI component for coach mark, which is often used in tutorial.

Install

npm install react-native-overlay-coach-mark

for bare React Native
Need to install react-native-svg. If you are using Expo, you can skip this as Expo comes with react-native-svg.

npm install react-native-svg
cd ios && pod install

Usage

circle

import CoachMark from 'react-native-overlay-coach-mark';

export default function App() {
  return (
    <>
      <CoachMark
        shape="circle"
        x={100}
        y={200}
        radius={30}
      />
    <>
  )
}

rect

import CoachMark from 'react-native-overlay-coach-mark';

export default function App() {
  return (
    <>
      <CoachMark
        shape="rect"
        x={100}
        y={200}
        width={80}
        height={40}
      />
    <>
  )
}

Properties

Prop	Default	Type	Description
shape	-	string	shape of the hole
x	-	number	hole position of x direction
y	-	number	hole position of y direction
backgroundColor	#000	string	background color of overlay
opacity	0.7	number	opacity of background overlay
width	100	number	width of rectangle (* only for rect shape)
height	100	number	height of rectangle (* only for rect shape)
borderRadius	10	number	border radius of rectangle (* only for rect shape)
radius	100	number	radius of circle (* only for circle shape)

Example

See more detail in example directory.

https://github.com/takahi5/react-native-overlay-coach-mark/tree/main/example

License

MIT License.