How can I pass a reference of a mapview to another component?-CodePudding

I have a map view, and in another componenet, I would like to be able to have a function that animates that mapview. That function would need a reference to my map view. How can I access my maps reference inside another component?

I have a snack expo that reproduces my problem exactly here as well as some code below.

export default function App() {
  return (
    <View style={styles.container}>
      <Map/>
      <AnimateMapButton/>
    </View>
  );
}

I cant access this._map for obvious reasons. How can I access this?

export default class AnimateMapButton extends React.Component {

  goToLocation = () => {
    this._map.animateToRegion({
      latitude: 103.1561,
      longitude: -47.1651,
      latitudeDelta: 0.0025,
      longitudeDelta: 0.0025,
    })
  }

  render() {
  return (
      <View style={{height: 75, width: 200, backgroundColor: 'red', position: 'absolute', top: 100}}>
        <TouchableOpacity onPress={() => this.goToLocation()}>
        <Text style={{fontSize: 20, }}>Click to animate the map</Text>
        </TouchableOpacity>
      </View>
  );
}
}

export default class Map extends React.Component {
  render(){
  return (
    <View style={styles.container}>
      <MapView 
        style={styles.map}
        ref={map => this._map = map}
       />
    </View>
  );
}
}

CodePudding user response：

You have to use a combination of reference and event callback method in the root component like this -

App.js

export default function App() {
  const mapRef = React.useRef();

  const goToLocation = () => {
    mapRef.current.animateToRegion({
      latitude: 37.78825,
      longitude: -122.4324,
      latitudeDelta: 0.0922,
      longitudeDelta: 0.0421,
    })
  }

  return (
    <View style={styles.container}>
      <Map mapRef={mapRef} />
      <AnimateMapButton goToLocation={goToLocation} />
    </View>
  );
}

animatemapbutton.js

export default function Animatemapbutton({ goToLocation }) {
  return (
      <TouchableOpacity
        style={{ height: 75, width: 200, backgroundColor: 'red', position: 'absolute', top: 100 }}
        onPress={() => goToLocation()}
      >
        <Text style={{fontSize: 20, }}>Click to animate the map</Text>
      </TouchableOpacity>
  );
}

map.js

export default function Map({ mapRef }) {
  return (
    <View style={styles.container}>
      <MapView
        ref={mapRef}
        style={styles.map}
      />
    </View>
  );
}