React-native-interactable: Example Apple Maps Style Panel is not complete

Created on 22 May 2018  路  2Comments  路  Source: wix/react-native-interactable

Hi, I just wanted to point that apple maps style panel example that is provided is misleading due to it's not possible to scroll content as on real maps. Somehow I've managed it to work on android with bunch of hacks, but on iOS is completely impossible to do that because of extremely slow event, like onSnap or onStop. It would be great to point out in documentation that is not possible to do such thing right now with this library or to provide an example how to do so. Thank you

Most helpful comment

Replacing the static image with a react-native-maps <MapView> seemed to work here on iOS:

Install the package and follow the instructions for the native modules, then add this import:

import MapView from 'react-native-maps';

Replace the <Image />:

<MapView
          style={styles.map}
          initialRegion={{
            latitude: 37.78825,
            longitude: -122.4324,
            latitudeDelta: 0.0922,
            longitudeDelta: 0.0421
          }}
        />

This should give you a fully scrollable/interactive map behind your panel.

All 2 comments

Replacing the static image with a react-native-maps <MapView> seemed to work here on iOS:

Install the package and follow the instructions for the native modules, then add this import:

import MapView from 'react-native-maps';

Replace the <Image />:

<MapView
          style={styles.map}
          initialRegion={{
            latitude: 37.78825,
            longitude: -122.4324,
            latitudeDelta: 0.0922,
            longitudeDelta: 0.0421
          }}
        />

This should give you a fully scrollable/interactive map behind your panel.

It really makes no sense to replace it with the static image since the point of the example is to be like on Apple Maps.

Was this page helpful?
0 / 5 - 0 ratings