Bug: Vertical Offset on Android

Current Behavior

Tutorial tooltips work on iOS, but on Android they have a - Y offset, which is not the desired behavior.

Input Code

I created a blank RN project with: react-native init CopilotTest, and added these lines to App.js:

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';

+import { copilot, walkthroughable, CopilotStep } from '@okgrow/react-native-copilot'

+const CopilotView = walkthroughable(View)
+const CopilotText = walkthroughable(Text)

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
  android:
    'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

type Props = {};
class App extends Component<Props> {

+  componentDidMount() {
+    this.props.start()
+  }

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>Welcome to React Native!</Text>
        <Text style={styles.instructions}>To get started, edit App.js</Text>
        <Text style={styles.instructions}>{instructions}</Text>
+        <CopilotStep text='Test Copilot Step' order={1} name='test'>
+          <CopilotText>Test</CopilotText>
+        </CopilotStep>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

-export default App
+export default copilot()(App)

Expected behavior/code Android should work the same way it does on iOS

Environment

• Device iOS: iPhone 5 [iOS 10], Simulators: iPhone 6, 7 [iOS 12]

• Device : Xiaomi Mi A2, Android Studio Emulators [Oreo, Marshmallow]

• react-native-copilot: GitHub dependency, SHA-1: 13ecbca5c9dc1597bd3a7d83d778ecd1a568eb66

• react-native: v0.56, v0.57

• react-native-svg: 8.0.10

Possible Solution I will look into it…

Additional context/Screenshots

iOS (working properly):

Android (NOT working properly):

[mohebifar]

You should do copilot({androidStatusBarVisible: true}).

[konjoinfinity]

This solution worked for me, tested on iOS and Android:

import { ...,
    Platform
} from 'react-native';

...YourComponent...

export default copilot((Platform.OS === 'ios') ? { androidStatusBarVisible: false } : { androidStatusBarVisible: true })(YourComponentNameHere);