React-native-maps: Map inside Tab View

[wpram]

I'm having trouble displaying my <MapView /> inside a Tab. I'm using react-native-scrollable-tab-view

The <MapView /> won't display in the map even after using : ...StyleSheet.absoluteFillObject. I can display the map only if I put a fix height. For example: height: 500.

Here is what my sample tab screen looks like.

styles = StyleSheet.create({
  tabContent: {
    flex: 1,
  },

  map: {
    ...StyleSheet.absoluteFillObject,
  },
});

class HomeTemporary extends Component {
  render() {
    return (
      <ScrollableTabView
        renderTabBar={() => <ScrollableTabBar />}
      >
        <ScrollView tabLabel="List" style={styles.tabContent}>
          <Text>Content Tab One</Text>
        </ScrollView>
        <ScrollView tabLabel="Map" style={styles.tabContent}>
          <MapView
            scrollEnabled
            style={styles.map}
            provider={MapView.PROVIDER_GOOGLE}
            initialRegion={{
              latitude: 25.2048493,
              longitude: 55.2707828,
              latitudeDelta: LATITUDE_DELTA,
              longitudeDelta: LONGITUDE_DELTA,
            }}
          />
        </ScrollView>
      </ScrollableTabView>
    );
  }
}

[DevanB]

It appears that a MapView inside a vanilla ScrollView also required a fixed height. Is there a way to do this without specifying a fixed height, possibly by using flex-basis and/or flex-shrink?

I circumvented this problem by using vh like so:

<ScrollView style={{ flex: 1 }}>
    <MapView
        region={{
            ...params.latlng,
            latitudeDelta: 0.0922,
            longitudeDelta: 0.0421
        }}
        showsPointsOfInterest={false}
        showsTraffic={false}
        style={{ height: 50 * vh }}>
            <MapView.Marker title={params.title} description={params.description} coordinate={params.latlng}>
                <Marker status={params.status} />
            </MapView.Marker>
        </MapView>
</ScrollView>

[nonameolsson]

@devanb what is vh?

[DevanB]

vh is view height (https://css-tricks.com/fun-viewport-units/). You do have to do some odd things like pulling the main file from a package that has been updated in a while to get it working (https://github.com/jmstout/react-native-viewport-units/blob/master/viewport-units.js).