Use copilot in a ScrollView

[thibautguedou3]

We are currently using copilot in one of our project, we needed to add some features:

• be able to highlight an element that is in a scrollView but not in visible on the screen (cf screenshot)
  
• customize the style of the CopilotStep

We have worked on an implementation of those features on a fork: https://github.com/bamlab/react-native-copilot

Could you look at it and tell us if we can make a Pull Request on your repo?

[RichardLitt]

@mohebifar What do you think?

[mohebifar]

@thibautguedou3 This is indeed interesting! Could you please provide an example of the scroll view and how that is handled by copilot?

• Is the position of the scroll view updated automatically?
• Does the scroll view need to be the root copilot component or it can be descendant of it?

Also, I noticed that in your fork 's are replaced with " that may not match our linting rules.

[naffiq]

Hi! I've been implementing tutorial in our app and have couple of suggestions to thread.
It might be better to consider more scenarios, like switching tabs and animating TextInput filling, that might need similar solution implementation.

Besides, we're using KeyboardAwareScrollView component (and I think many of others might) that might need customization at this point.

[AE0011]

@thibautguedou3 how to use your fork?

[vokhuyetOz]

any update on this.

[rgordon95]

Would love to see these changes integrated so we can scroll within the tutorial.

[Usamaliaquat123]

try this

 componentDidMount() {
    // Starting the tutorial and passing the scrollview reference.
    this.props.start(false, this.scrollView);
  }

  componentWillUnmount() {
    // Don't forget to disable event handlers to prevent errors
    this.props.copilotEvents.off("stop");
  }

  render() {
    <ScrollView ref={ref => (this.scrollView = ref)}>// ...</ScrollView>;
  }
}