fix android screen size

Author: xcarpentier

App.tsx

@@ -21,7 +21,7 @@ const uri =
 // Add <TourGuideProvider/> at the root of you app!
 function App() {
   return (
-    <TourGuideProvider {...{ borderRadius: 16 }}>
+    <TourGuideProvider {...{ borderRadius: 16, androidStatusBarVisible: true }}>
       <AppContent />
     </TourGuideProvider>
   )
@@ -85,7 +85,7 @@ const AppContent = () => {
       </View>
       <View style={styles.row}>
         <TourGuideZone zone={4} shape={'circle'} tooltipBottomOffset={200}>
-          <Ionicons name='ios-contact' {...iconProps} />
+          <Ionicons name='ios-add-circle' {...iconProps} />
         </TourGuideZone>
         <Ionicons name='ios-chatbubbles' {...iconProps} />
         <Ionicons name='ios-globe' {...iconProps} />
@@ -96,19 +96,27 @@ const AppContent = () => {
           <Ionicons name='ios-rainy' {...iconProps} />
         </TourGuideZone>
       </View>
+      <View
+        style={[
+          StyleSheet.absoluteFillObject,
+          {
+            top: 250,
+            left: 50,
+            width: 64,
+            height: 64,
+            backgroundColor: 'red',
+          },
+        ]}
+      />
       {Platform.OS !== 'web' ? (
         <TourGuideZoneByPosition
           zone={1}
-          shape={'rectangle_and_keep'}
+          shape={'circle'}
           isTourGuide
-          top={191}
-          left={88}
+          top={250}
+          left={50}
           width={64}
           height={64}
-          borderRadiusObject={{
-            topLeft: 0,
-            bottomRight: 0,
-          }}
         />
       ) : null}
     </View>

src/components/AnimatedPath.tsx

@@ -1,10 +1,4 @@
-import * as React from 'react'
-import { Animated, Platform } from 'react-native'
-import { Path, PathProps } from 'react-native-svg'
+import { Animated } from 'react-native'
+import { Path } from 'react-native-svg'
 
-export const AnimatedSvgPath: React.ComponentType<
-  PathProps & { ref: any }
-> = Platform.select({
-  default: Animated.createAnimatedComponent(Path),
-  web: Path,
-})
+export const AnimatedSvgPath = Animated.createAnimatedComponent(Path)

src/components/AnimatedPath.web.tsx

@@ -0,0 +1,3 @@
+import { Path } from 'react-native-svg'
+
+export const AnimatedSvgPath = Path

src/components/SvgMask.tsx

@@ -47,7 +47,6 @@ export class SvgMask extends Component<Props, State> {
     size: { x: 0, y: 0 },
     position: { x: 0, y: 0 },
     maskOffset: 0,
-    isHorizontal: false,
   }
 
   listenerID: string
@@ -60,7 +59,10 @@ export class SvgMask extends Component<Props, State> {
   constructor(props: Props) {
     super(props)
 
-    this.windowDimensions = Dimensions.get('window')
+    this.windowDimensions = Platform.select({
+      android: Dimensions.get('screen'),
+      default: Dimensions.get('window'),
+    })
 
     this.firstPath = `M0,0H${this.windowDimensions.width}V${
       this.windowDimensions.height

tsconfig.json

@@ -1,5 +1,7 @@
 {
-  "include": ["src"],
+  "include": [
+    "src"
+  ],
   "compilerOptions": {
     "declaration": true,
     "outDir": "./lib",
@@ -28,8 +30,19 @@
     "resolveJsonModule": true,
     "noFallthroughCasesInSwitch": true,
     "strictPropertyInitialization": false,
-    "lib": ["dom", "esnext"],
-    "typeRoots": ["./node_modules/@types", "./@types"]
+    "lib": [
+      "dom",
+      "esnext"
+    ],
+    "typeRoots": [
+      "./node_modules/@types",
+      "./@types"
+    ]
   },
-  "exclude": ["node_modules", "src/**/*.test.ts", "src/**/*.test.tsx"]
+  "exclude": [
+    "node_modules",
+    "src/**/*.test.ts",
+    "src/**/*.test.tsx"
+  ],
+  "extends": "expo/tsconfig.base"
 }