Tutorial does not show, this.props.start is undefined.

Current Behavior Tutorial does not show when involve this.props.start()

Input Code

import React, { Component } from 'react';

...
...

import {Spinner, Label, View, StyleProvider, Container, List, ListItem, Left, Thumbnail, Right, Header, Content, Form, Footer, FooterTab, Button, Icon, Badge, Card, CardItem, Text, Body } from 'native-base';

...
...

// TODO: IMport Copilot module
import { copilot, walkthroughable, CopilotStep } from '@okgrow/react-native-copilot';

// TODO: Declare walkthrouh element
const CopilotText = walkthroughable(Text);

class Annoucement extends Component {
  static navigationOptions = {
    title: 'Annoucement',
    drawerIcon: (
      <Icon type='Ionicons' name='md-home' style={globalStyles.sideMenuIcon}/>
    )
  }

  constructor(props) {
    super(props);
    this.state = { 
      ...
      ...
    };
  }

  
....
....


handleStartButtonPress() {
  console.log(`hcmus 2: Props: ${JSON.stringify(this.props.start)}`);  // TODO: Alway undefined
}

componentDidMount() {
  console.log(`hcmus 1: Props: ${JSON.stringify(this.props.start)}`); // TODO: Alway undefined
  this.props.copilotEvents.on('stepChange', this.handleStepChange);

  // TODO: Start tutorial --> NO thing happen. Even if invole props.start fron a button's click even, still not show tutorial, nothing happen
  this.props.start();
}

handleStepChange = (step) => {
  console.log(`hcmus 3: Current step is: ${step.name}`);
}


render() {
    return (

      <StyleProvider style={getTheme(platform)}>
      <Root>
      {/* <CopilotStep text="This is a hello world example!" order={1} name="hello">
          <CopilotText onPress={() => this.handleStartButtonPress()}>Hello world!</CopilotText>
        </CopilotStep> */}
      <Container>
      <CustomHeader title='Dashboard'/>

      // TODO: Here is place define step
      <CopilotStep text="This is a hello_222 world example!" order={2} name="hello_222">
          <CopilotText onPress={() => this.handleStartButtonPress()}>Hello world 2222!</CopilotText>
      </CopilotStep>
     
     ...
     ... 

      </Container>
      {this.state.loading &&
        <View style={globalStyles.loading}>
          <Spinner color='white' />
        </View>
      }
      </Root>
      </StyleProvider>
    );
  }
}

// TODO: export copilot
export default copilot({
  animated: true, // Can be true or false
  overlay: 'svg', // Can be either view or svg
})(Annoucement);

Expected behavior/code The tutorial should be shown when invoking the this.props.start()

Environment

• Device: Nexus 5X - Android SDK Simulator
• OS: Android 9
• react-native-copilot: ^2.4.1
• react-native: 0.55.4
• react-native-svg: ^6.3.1
• react-navigation: ^2.11.2

Possible Solution It could be related to react-navigation, I think, but not sure,

Additional context/Screenshots

[DusanDimitric]

@hoanghcmus Try wrapping a react-native View component and with walkthroughable and then use that walkthroughable View to wrap your desired elements.

[rgordon95]

Instead of const CopilotText = walkthroughable(Text); do const CopilotText = walkthroughable(View);