HMS map can not work inside ScrollView

[hienpvptit]

Description
Hi everybody. When I put HMSMap inside ScrollView, I can not swipe Map

<ScrollView>
    <HMSMap />
</ScrollView>

Any suggestion?

[ilsafarber]

Hi @hienpvptit

As far as I understand you are trying to implement an Huawei Map Module to your ScrollView, but since the Map itself is a scrollable component it may conflict with scroll gestures of the application. You may add some margins to scroll the page and the map separately but this is highly dependent to your UI and use case. If you need to add an inline non-scrollable map instance you may use the Lite Mode, if it is not the case, please share a code block and the use case or an example for me to check the request in detail.

[trung1051996]

Hi @hienpvptit @ilsafarber ,
I am also facing the same issue. I have tried applying the solution below, but it is still very laggy. Google Maps has a scrollEnabled={false} prop for this issue.

export default function App() {
  const [mapActive, setMapActive] = useState(false);
  return (
    <>
      <ScrollView scrollEnabled={!mapActive} style={{padding: 16}}>
        <View style={{padding: 16, backgroundColor: "yellow", marginBottom: 8}}>
          <Text>This is a View</Text>
        </View>
        <View style={{padding: 16, backgroundColor: "yellow", marginBottom: 8}}>
          <Text>This is a View</Text>
        </View>
        <MapView
          mapType={1}
          style={{height: 200, marginBottom: 8}}
          onCameraIdle={() => {
            console.log("Idle");
            setMapActive(false);
          }}
          onCameraMove={() => {
            console.log("Move");
            setMapActive(true);
          }}
        />
        <View style={{padding: 16, backgroundColor: "yellow", marginBottom: 8}}>
          <Text>This is a View</Text>
        </View>
        <View style={{padding: 16, backgroundColor: "yellow", marginBottom: 8}}>
          <Text>This is a View</Text>
        </View>
      </ScrollView>
    </>
  );
}

Reference: #25