React-native-overlay-coach-mark NPM

react-native-overlay-coach-mark

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

c0981b1373b37c149fb80433951a4676

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.

react-native coachmark guide tutorial

react-native-svg

@infinitebrahmanuniverse/nolb-react-native-o @everything-registry/sub-chunk-2586 @zalastax/nolb-react-native-o

0.8.1

5 years ago

0.8.0

5 years ago