How to implement Coach mark in react native android?

Question

Its required to implement Coach mark or showcase in my React native app. After googling i didn't get any code or library which can get help that.

Can any one suggest me How can i achieve Coach mark in react native?

Example:

I dont want to overlay screen shot type image with transparency. Because it would be create problem when app run in landscape mode. And for this approach i need to keep All DPI images in respective folders.

I need proper and generic solution. Please help.

Answer 1

There is a ready solution for this.

You can try the: React Native Joyride(npm install --save react-native-joyride)

You can find a full working solution here: https://github.com/okgrow/react-native-co-pilot

is as simple as this code:

import { joyride, joyridable, JoyrideStep } from 'react-native-joyride';

const JoyrideText = joyridable(Text);

class HomeScreen {
  render() {
    return (
      <View>
        <JoyrideStep text="This is a hello world example!" order={1} name="hello">
          <JoyrideText>Hello world!</JoyrideText>
        </JoyrideStep>
      </View>
    );
  }
}