react-native-copilot

react-native-copilot copied to clipboard

Current Behavior Similar to #100, it is not displayed properly on android devices Input Code

• NONE

Expected behavior/code It should properly enclose the wrap component when travelling from step A to step B, just like the gif example on the README.

Environment

• Device: Asus Zenfone 5z
• OS: Android Pie
• react-native-copilot: 2.4.1
• react-native: 0.58.4
• react-native-svg: 9.2.4

Possible Solution

• NONE

Additional context/Screenshots See #100

@mohebifar Hi, any updates on this?

I can recreate this issue as well. androidStatusBarVisible: true helps moves it down but only marginally. It seems it doesn't take the topbar into account.

Have you found any workaround?

@tastyqbit Could I see an example of how you're implementing the function from your Pull Request? I know this fix will work for me, because if I manually insert 26 as verticalOffset (statusBarHeight value) it fixes the android issue for the device.

I've tried many things, but this is as close as I have gotten:

copilot({
  verticalOffset: async () => (await Navigation.constants()).statusBarHeight,
  animated: true,
  overlay: 'svg',
  tooltipComponent: Tooltip,
  tooltipStyle: tooltipStyle,
  stepNumberComponent: StepNumber,
})

and I keep getting errors similar to this:

Thanks in advance for any help!

@Raymond-Cox Here is what I have:

const copilotConfig = {
  verticalOffset: async () => {
    if (Platform.OS === "android") {
      const { statusBarHeight, topBarHeight } = await Navigation.constants();
      return topBarHeight + statusBarHeight;
    }
    return 0;
  },
  stepNumberComponent: View,
  androidStatusBarVisible: Platform.OS === "android",
  labels: { finish: GeneralCopilotStrings.finish }
};

I think I remember getting that error at some point but I cant remember at what point. Make sure you are using my library and maybe try without svg?

@tastyqbit I didn't realize your PR was to your fork, not the main repo. After switching to your fork can confirm this works. Thanks mate!