Pitch to zoom at specific spot in ScrollView with React-Native

Question

Basically I am trying to build a solar system simulation, I have created all of the orbit animations etc. and I've added the components inside a ScrollView as shown below:

render() {
    const xCoord = 20 // sun's initial x and y coordinates
    const yCoord = 150
    const earthSize = 35 //earth size used as reference for planet sizes
    const sunSize = earthSize * 25 //sun's size used as variable to adjust orbital coordinate of planets
    const orbitDefault = sunSize
    return (
      <Animated.View style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, justifyContent: 'center', alignItems: 'center' }}>
        <Image style={{ height: 850, width: 850, position: 'absolute', top: 0, left: 0 }} source={require('../public/astronomy.jpg')} />
        <ScrollView
          bouncesZoom={true}
          contentContainerStyle={styles.container}
          minimumZoomScale={'0'}
          maximumZoomScale={'100'}
          centerContent={true}>

      <Planet x={xCoord} y={yCoord + (sunSize / 2)} height={earthSize} width={earthSize} orbitSize={orbitDefault * 6} orbitSpeedInDays={365} planetPicture={require('../public/earth.png')} name={'Earth'} />
      <Planet x={xCoord} y={yCoord + (sunSize / 2)} height={earthSize * 0.95} width={earthSize * 0.95} orbitSize={orbitDefault * 4} orbitSpeedInDays={225} planetPicture={require('../public/venus.png')} name={'Venus'} />
      <Planet x={xCoord} y={yCoord + (sunSize / 2)} height={earthSize * 0.38} width={earthSize * 0.38} orbitSize={orbitDefault * 2} orbitSpeedInDays={88} planetPicture={require('../public/mercury.png')} name={'Mercury'} />
      <Planet x={xCoord} y={yCoord} height={sunSize} width={sunSize} orbitSize={0} orbitSpeedInDays={365} planetPicture={require('../public/sun_pic.png')} name={'Sun'} />
    </ScrollView>
  </Animated.View>
)

}

For some reason the scroll view focuses on the last element which in this case is the sun <Planet/> and it when is use pinch gesture to zoom in and out it only does it in relation to that element making it impossible to zoom in to other <Planet/> elements.

I've been looking for a solution for days, one that I came up with is maybe making the scroll view focus on a different element when I tap it, but whatever I tried did not work. Thanks in advance.

Answer 1

Try using

react-native-pinch-zoom-view

animating-zoom-in-react-native-scroll-view