Zooming causes objects to move off screen

[fultonm]

I'm having an issue where, for large canvases, zooming changes the apparent pan location. In fact, offsetX stays 0 which the PinchZoomView has become smaller, and converges onto its center:
In this example the PinchZoomView has a width and height of 2500. The objects in the view are about 200x400.

I'm working on a fix which would require the user to supply height/width of the PinchZoomView as props, then update the OffsetX using the width, OffsetX, and current scale in the equation, but this equation is difficult to think about.

I think the component would be improved if the objects being zoomed in on stay in focus when zooming.

[fultonm]

Is it possible to have component inside the pinch zoom view to initially be off-screen? So far I've noticed elements that are transformed to be outside the initially viewable area they are cut out of the view and overflow: 'visible" doesn't help.

[nguyenvanphuc2203]

show code please

[fultonm]

Here's an example of the large PinchZoomView. My issue is that the PinchZoomView does not pay attention to where the zooming was initiated. It just shrinks or expands the transform of the view without also updating the X and Y position of the view. So if you try to zoom in on a component, that component doesn't necessarily stay on the screen.

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, { Component } from 'react';
import { Platform, StyleSheet, Text, View } from 'react-native';
import PinchZoomView from 'react-native-pinch-zoom-view';

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
  android:
    'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu'
});

type Props = {};
export default class App extends Component<Props> {
  render() {
    return (
      <PinchZoomView style={{ width: 1600 }}>
        <View style={[styles.container, { width: 1600 }]}>
          <Text style={[styles.welcome, { transform: [{ translateX: -750 }] }]}>
            Welcome to React Native!
          </Text>
          <Text style={styles.instructions}>To get started, edit App.js</Text>
          <Text style={styles.instructions}>{instructions}</Text>
        </View>
      </PinchZoomView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF'
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5
  }
});

[nguyenvanphuc2203]

try use width: device width instead of 1600

[getumangon]

Hey @fultonm,
Did you found any work around. Please let me know I am also stuck at this point.
Thanks in advance.