Use copilot with custom native-base components

[dirkvanherpen]

It seems not possible to highlight buttons in the walkthrough.
I call this.props.start(); so that shouldn't be the problem. It might have to do with the custom components in native-base. If we are using the normal components it works perfectly, but with the custom components, it won't.

How can I make copilot work with custom native-base components?

[mohebifar]

Is it Button from 'native-base' or Button from 'react-native'? If you don't have access to the underlying component's code (being a third-party lib), one possible workaround is to wrap it within a View component.

Only "native" components can be made walkthroughable using the walkthroughable helper.

https://github.com/okgrow/react-native-copilot#custom-components-as-steps

[dirkvanherpen]

Thank you for the quick reply. It worked for me, meaning I get a step-by-step walkthrough, but the position of the highlights doesn't match the position of the buttons.

Code:

Application:
Step 1:

Step 2:

Any idea how I can fix this?

[mohebifar]

Could you please confirm that you're using v2.2.2?
v2.2.1 was buggy on Android having the same positioning issue and got fixed just last week.

[dirkvanherpen]

I can confirm that I am using v2.2.2.

[mohebifar]

Okay, thanks. I'm curious to see what happens with 2.2.1.

[dirkvanherpen]

I have already tried version 2.2.1, but I still have the same problem.

[mohebifar]

It'd be good if you share a minimal code that helps me reproduce this issue.

[mohebifar]

@dirkvanherpen Can you please now try v2.2.3?

[dirkvanherpen]

I tried version 2.2.3 and 2.2.4, but I still have the same issues with both versions.

v2.2.3

v2.2.4

[dirkvanherpen]

I have tried multiple versions to try to fix this, but I can't get the highlight parts exactly on the button.
Any idea how to fix this?

[Vishal-Lakkapathri]

Facing the same issue when used with https://wix.github.io/react-native-navigation.
Need Help!!

[sujitpk-perennial]

Hello team, I am able to show the copilot UI for iOS properly. But for Android, the UI is not showing proper place. It is happening throughout the app. Also text also not visible. I am using "@okgrow/react-native-copilot": "^2.2.6"

[RichardLitt]

@mohebifar Can you take another look at this, please?

[mohebifar]

@sujitpk-perennial It is really hard to figure out what the issue is without being able to reproduce it. It would be great if you could provide a very minimal expo snack or a gist to help me reproduce this.

[sujitpk-perennial]

@mohebifar I found that

1. In style.js
   tooltipText: { }

When I added like 

tooltipText: {
    color: 'rgba(20,20,20,1)'
  }

Then I am able to see the color for text in Android.

2. In CopilotModel.js file, I found one condition that

if (this.props.androidStatusBarVisible && Platform.OS === 'android') {
obj.top -= StatusBar.currentHeight; // eslint-disable-line no-param-reassign
}

   When I commented obj.top -= StatusBar.currentHeight; then I am able to see the badge number properly. 


   

[danielang]

You can add:

copilot({
    androidStatusBarVisible: false
}),

[deepakverma4]

@dirkvanherpen @mohebifar facing same issue in android. have you found any solution for it?