Fix android rendering issue on the native side

android/src/main/java/com/homee/mapboxnavigation/MapboxNavigationView.kt

@@ -42,6 +42,21 @@ class MapboxNavigationView(private val context: ThemedReactContext) : Navigation
         findViewById<View>(R.id.cancelBtn).visibility = INVISIBLE
     }
 
+    override fun requestLayout() {
+        super.requestLayout()
+
+        // This view relies on a measure + layout pass happening after it calls requestLayout().
+        // https://github.com/facebook/react-native/issues/4990#issuecomment-180415510
+        // https://stackoverflow.com/questions/39836356/react-native-resize-custom-ui-component
+        post(measureAndLayout)
+    }
+
+    private val measureAndLayout = Runnable {
+        measure(MeasureSpec.makeMeasureSpec(width, MeasureSpec.EXACTLY),
+                MeasureSpec.makeMeasureSpec(height, MeasureSpec.EXACTLY))
+        layout(left, top, right, bottom)
+    }
+
     private fun getInitialCameraPosition(): CameraPosition {
         return CameraPosition.Builder()
                 .zoom(15.0)

index.js

@@ -6,28 +6,6 @@ import {
   StyleSheet,
   View,
 } from 'react-native';
-import { useInterval } from './hooks/useInterval';
-
-// This wrapper component is needed to fix an android quirk with RN and native views.
-// You can see https://github.com/facebook/react-native/issues/17968 and
-// https://github.com/mapbox/mapbox-navigation-android/issues/3050#issuecomment-720172578
-// for context. If you know how to fix this on the native side please submit a PR!
-const WrapperComponent = (props) => {
-  const [ghostViewHeight, setGhostViewHeight] = React.useState(1);
-
-  if (Platform.OS === 'android') {
-    useInterval(() => {
-      setGhostViewHeight(ghostViewHeight === 1 ? 1.2 : 1);
-    }, 1000);
-  }
-
-  return (
-    <View style={styles.flexIt}>
-      <MapboxNavigation {...props} />
-      <View style={{ height: ghostViewHeight }} />
-    </View>
-  );
-};
 
 const MapboxNavigation = (props) => {
   return <RNMapboxNavigation style={styles.flexIt} {...props} />;
@@ -52,4 +30,4 @@ const styles = StyleSheet.create({
   },
 });
 
-export default WrapperComponent;
+export default MapboxNavigation;