Cannot Show Walkthrough for Header components via React Navigation

I am using react navigation library to manage navigation within my app.I am using this library to enable first time users to get to know the different features of my app.When i try to Wrap a Text element with a CoPilot Step in thestatic navOptionssections(In react-Navigation,this allows the user to customise the header shown on the top of the screen) it gives me an error saying that undefined is not an object(evaluationg this.context._getCurrentStep.)

[DavidBHanby]

@ptgamr I solved this by using an empty view with position absolute. It doesn’t matter that it’s not wrapping around the actual component as the highlighted area within a tour is not functional/touchable anyway.

const WalkthroughableView = walkthroughable(View);

  <CopilotStep text="Here's where to tap to view this screen." order={3} name="actionsButton">
    <WalkthroughableView style={{ position: "absolute", top: -40, left: (dimensions.SCREEN_WIDTH * 0.5) - 25, minHeight: 70, width: 80 }}>
    </WalkthroughableView>
  </CopilotStep>

[ptgamr]

@mohebifar What’s your recommendation to focus to a button in react-navigation header ? Something like

class HomeScreen extends React.Component {
  static navigationOptions = {
    headerTitle: <LogoTitle />,
    headerRight: (
      <Button
        onPress={() => alert('This is a button!')}
        title="Info"
        color="#fff"
      />
    ),
  };
}

const AppNavigator = createStackNavigator({
  Home: {
    screen: HomeScreen
  }
});

Notice that headerRight is not render as children of HomeScreen… but it will render within react-navigation context