Android Overlay doesn't work

[jgalianoz]

Current Behavior The overlay is not working correctly on some Android devices, with incorrect positioning. On iOS, everything works perfectly.

Input Code

• REPL or Repo link if applicable:

<CopilotProvider
                androidStatusBarVisible={Platform.OS === 'android'}
                backdropColor={color.lightDarkBlack}
                tooltipStyle={NativeStyles.tooltip}
                tooltipComponent={TutorialTooltip}
                stepNumberComponent={() => null}
                arrowStyle={NativeStyles.arrow}
                animated={false}
              >
                <StatusBar style="auto" translucent />
                <Navigation />
              </CopilotProvider>

Expected behavior/code A clear and concise description of what you expected to happen (or code).

Environment

• Device: Google Pixel 5a - 2400 × 1080 px | 415ppi | 20:9 aspect | 6.34” diagonal
• react-native-copilot: 3.3.2
• react-native: 0.72.5
• react-native-svg: 14.1.0

Possible Solution

Additional context/Screenshots

[brien-crean]

I also had this issue on Android and solved it by passing the current height of the StatusBar as the verticalOffset. I am not currently working on an iOS app so you may want to pass 0 if Platform.OS === 'ios'.

import { StatusBar } from 'react-native';
import { CopilotProvider } from 'react-native-copilot';

<CopilotProvider
    overlay="svg"
    verticalOffset={StatusBar.currentHeight}
  >
  {children}
</CopilotProvider>