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.

hey did you find a solution ? i'm having troubles also to make this in my app and i couldn't find anything really useful .. Thank you :) — user3521011, May 22 '17 at 17:06
@user3521011 I thinks this link can help you! https://github.com/TranLuongTuanAnh/react-native-coachmasks — Tuan Anh, Apr 06 '18 at 09:25

score 7 · Answer 1 · answered Nov 28 '17 at 16:02

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>
    );
  }
}

Thank you Tom! I feel like a dunce for not discovering that earlier, but better late than never! — Pat Needham, Dec 03 '17 at 12:03

How to implement Coach mark in react native android?

1 Answers1