Android Overlay doesn't work
jgalianoz opened this issue · 1 comments
jgalianoz commented
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.2react-native
: 0.72.5react-native-svg
: 14.1.0
Possible Solution
brien-crean commented
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>