How to increase the size of object dynamically after pressing button?

Question

I am trying to increase the size of object after we press button zoom in and it should decrease the size when we click zoom out button. I have done the functionality of stitching images of different angles and combined them into 1 to make it like 360 view using below package. Now i just need to increase the size or decrease the size of object.

Code:

  import React from 'react';
    import {View, Dimensions, Text, Button} from 'react-native';
    import _ from 'lodash';
    
    import Image360Viewer from '@hauvo/react-native-360-image-viewer';
    
    const {width, height} = Dimensions.get('window');
    const images = _.reverse([
      require('./images/1.png'),
      require('./images/2.png'),
      require('./images/3.png'),
      require('./images/4.png'),
      require('./images/5.png'),
      require('./images/6.png'),
    ]);
    
    const App = () => {
      return (
        <View
          style={{
            display: 'flex',
            flexDirection: 'column',
            alignContent: 'center',
            backgroundColor:'white',
            alignItems: 'center',
            flex: 1,
            paddingTop: 200,
            resizeMode: 'contain',
          }}>
          <Image360Viewer srcset={images} width={300} height={300} />
          <View style={{paddingTop: 20}}><Button title='Zoom In (+)'> </Button></View>
          <View style={{paddingTop: 20}}><Button title='Zoom out (-)'></Button></View>
        </View>
      );
    };

export default App;

Answer 1

Since you want to change the value of the width and height property of the Image360Viewer component, you could turn these to properties in a state and increase or decrease these values in the onPress function of the Buttons. The state change will trigger a rerender and the component will be rendered with the new width and height properties.

const App = () => {

    const [dimension, setDimension] = React.useState({width: 300, height: 300});

    return (
      <View
        style={{
          display: 'flex',
          flexDirection: 'column',
          alignContent: 'center',
          backgroundColor:'white',
          alignItems: 'center',
          flex: 1,
          paddingTop: 200,
          resizeMode: 'contain',
        }}>
        <Image360Viewer srcset={images} width={dimension.width} height={dimension.height} />
        <View style={{paddingTop: 20}}><Button title='Zoom In (+)' onPress={() => setDimension(prev => ({width: prev.width + 10, height: prev.height + 10}))}> </Button></View>
        <View style={{paddingTop: 20}}><Button title='Zoom out (-)' onPress={() => setDimension(prev => ({width: prev.width - 10, height: prev.height - 10}))}></Button></View>
      </View>
    );
};