Cannot Show Walkthrough for Header components via React Navigation

[nikhiltechzillaindiacom]

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.)

[zidun]

same issue

[npedrini]

Same issue. I love this library, and it's really the only one of it's kind for react native. But the fact that all steps in a walkthrough have to be children of the same parent component is extremely limiting.

The demo is somewhat misleading because it suggests you can highlight elements of a footer navigation, but most devs are going to use a framework to get that done (like react-navigation), which currently makes this library unusable.

[nehanilsoni]

I am having the same issue and trying to figure out is there a workaround for using this library in navigationOptions or is there any other library for creating a walkthrough for your app?

[blazk0]

still no workaround for this ?

[ptgamr]

Haven't actually have time to integrate this to our project. My initial idea is to wrap the RootComponent created by react-navigation's createAppContainer with copilot, and then in the child screens, using this.props.start(fromStep)... to start the show. But it seems not possible with the current implementation using legacy context. (https://reactjs.org/docs/legacy-context.html)

Idea to make it possible:

• In hocs/copilot.js, use the modern context API, exposing the start(), stop() api
• in the child component, make use of <Copilot.Consumer>, and then you will be able to start the show anywhere within the context.

[mohebifar]

Unfortunately, that's currently the limitation of this package. I have to admit it was not the best approach to wait for a component to mount in order to register the step for it in the context.

I personally haven't tried this, but one hacky solution can be having separate copilot instances for each screen. Now that you can assign custom labels to copilot buttons, you can change the "Finish" label for the first screen to "Next" and onNext for the last step can jump to the other screen.

[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

[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>

[lrpinto]

This workaround sounds like a great idea. I am trying to place it at the bottom of the screen instead, in order to overlay bottom tab navigator buttons, but I am not quite able to achieve that.

Wonder if either of you know how I could reuse this solution to place it on the bottom of the screen.

[DavidBHanby]

Unless I've misunderstood, the solution will be the same. By setting { position: 'absolute' } you can also set the 'top' and 'left' properties to any number you want, letting you place it anywhere on the screen, including the bottom.

[lrpinto]

Thank you David. Doing that it seemed to be moving the view in relation to the tool-tip. On a second look on the docs I think I found how to shift the main container down.

const screenHeight = Math.round(Dimensions.get('window').height)

export default copilot({ verticalOffset: screenHeight - 98, // <= this worked animated: true, overlay: 'svg' })(RootComponent)

[pbtkhoa]

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.)

Any idea to fix this problem. I trying to use CopilotStep component on "static navigationOptions" and get this error