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.