Set zoomlevel from state

[Yoruba]

Hello, is there a way to set the zoomlevel from a button?

For example I want to reset the zoomlevel to 1 with a button. Like the code below but then with updating the zoomlevel of the ReactNativeZoomableView component.

Thanks

import React, { Component } from 'react'
import { AppRegistry, Text, View, Button } from 'react-native'
import ReactNativeZoomableView from '@dudigital/react-native-zoomable-view/src/ReactNativeZoomableView'
import { name as appName } from './app.json'

export default class App extends Component {
  constructor (props, context) {
    super(props, context)
    this.props = props

    this.state = { initialZoom: 1 }
  }

  resetZoom=() => {
   this.setState({ initialZoom: 1 })
  }

  setZoom =(event, gestureState, zoomableViewEventObject) => {
    this.setState({ initialZoom: zoomableViewEventObject.zoomLevel })
  }

  render () {
    return (
      <View style={{ flex: 1 }}>
        <ReactNativeZoomableView
          initialZoom={this.state.initialZoom}
          onZoomAfter={this.setZoom}>
          <View>
            <Text>
              Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</Text>
          </View>
        </ReactNativeZoomableView>
        <Text>Zoom factor: {this.state.initialZoom}</Text>
        <Button
          onPress={this.resetZoom}
          title='Reset zoom'
        />
      </View>
    )
  }
}

AppRegistry.registerComponent(appName, () => App)

[skantus]

Hi @Yoruba simply play with zoomEnabled if the value is false then the values will be reset.

For example:

// Add isEnabledZoom to the state.
this.state = { initialZoom: 1, isEnabledZoom: false }

// setZoom logical, isEnabledZoom should change to true.

// When you want to restart the initial values.
const restartZoomValues = () => this.setState({ isEnabledZoom: false });

 render () {
    const { isEnabledZoom, initialZoom } = this.state;
    return (
      <View style={{ flex: 1 }}>
        <ReactNativeZoomableView
          zoomEnabled={isEnabledZoom}
          initialZoom={initialZoom}
          onZoomAfter={this.setZoom}>
    ...

I hope it helps.

[Yoruba]

Thanks @skantus this works great for reset. For reset and enable the zoom again you need the hook the onMoveShouldSetPanResponder.

import React, { Component } from 'react'
import { AppRegistry, Text, View, Button } from 'react-native'
import ReactNativeZoomableView from '@dudigital/react-native-zoomable-view/src/ReactNativeZoomableView'
import { name as appName } from './app.json'

export default class App extends Component {
  constructor (props, context) {
    super(props, context)
    this.props = props

    this.state = { initialZoom: 1, isEnabledZoom: true }
  }

resetZoom=() => {
  this.setState({ initialZoom: 1, isEnabledZoom: false })
}

  setZoom =(event, gestureState, zoomableViewEventObject) => {
    this.setState({ initialZoom: zoomableViewEventObject.zoomLevel, isEnabledZoom: true })
  }

  _handleMoveShouldSetPanResponder = (e, gestureState) => {
    let baseComponentResult =
    // remove from original code  this.props.zoomEnabled &&
    // because is it blocking the onZoomAfter event
            (Math.abs(gestureState.dx) > 2 ||
                Math.abs(gestureState.dy) > 2 ||
                gestureState.numberActiveTouches === 2)

    if (this.props.onMoveShouldSetPanResponder) {
      baseComponentResult = this.props.onMoveShouldSetPanResponder(
        e,
        gestureState,
        this._getZoomableViewEventObject(),
        baseComponentResult
      )
    }

    return baseComponentResult
  };

  render () {
    const { isEnabledZoom, initialZoom } = this.state
    return (
      <View style={{ flex: 1 }}>
        <ReactNativeZoomableView
          initialZoom={initialZoom}
          zoomEnabled={isEnabledZoom}
          onZoomAfter={this.setZoom}
          // hook Pan Responder
          onMoveShouldSetPanResponder={this._handleMoveShouldSetPanResponder}
        >

          <View>
            <Text>
              Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</Text>
          </View>
        </ReactNativeZoomableView>
        <Text>Zoom factor: {this.state.initialZoom}</Text>
        <Button
          onPress={this.resetZoom}
          title='Reset zoom'
        />
      </View>
    )
  }
}

AppRegistry.registerComponent(appName, () => App)