React-Native Zoom In/Out Feature

Objective
How to implement Zoom in/out feature in React Native? 

Applies To

• Mobile SDK
• Video API

Procedure

This is a simple modification of the basic sample app at the opentok-react-native-samples repo. Github Repo Link
 

OTSubscriber
    style={{
      width: 200,
      height: 150,
      transform: [
        {scale: this.state.subscriberScale},
        {translateX: 30},
        {translateY: 30},
      ],
    }}
    ref={instance => {
      this.subscriber = instance;
    }}
/>

 
There are also lines of code for the subscriberScale state property.
 

class App extends Component {
  constructor(props) {
    super(props);
    // ...
    this.state = {
      subscriberScale: 1,
    };

    setInterval(() => {
      const newScale = this.state.subscriberScale === 1 ? 0.5 : 1;
      this.setState({subscriberScale: newScale});
    }, 1000);

    // ...

 
Wrapping the OTSubscriber component in a React Native View component and the animation to that (this is taken from the react-native-gesture-handler quick start)
 

<GestureDetector>
  <Animated.View style={[styles.ball, animatedStyles]} >
     <OTSubscriber />
  </Animated.View>
</GestureDetector>

Additional Information
React Native Sample app - https://github.com/opentok/opentok-react-native-samples/tree/main/BasicVideoChat