ANDROID: TwilioVideoLocalView doesn't dynamically adapt to changing wrapper dimensions

[JokubasTolocka]

ANDROID ONLY

Steps to reproduce

1. use TwilioVideoLocalView component with styles {height: "100%", width: "100%"}
2. Have the wrapper as Animated.View and animate its dimensions from "18%" to "100%"

Expected behaviour

Tell us what should happen

TwilioVideoLocalView should dynamically change its dimensions

Actual behaviour

Tell us what happens instead

TwilioVideoLocalView waits for the animation to be finished, and then adapts to the final dimensions. During the time of animation, background is painted black while TwilioVideoLocalView sits in top left with the dimensions that it had before the animation started.

Environment

• Node.js version: v14.17.4
• React Native version: 0.64.2
• React Native platform + platform version: Android 31

react-native-twilio-video-webrtc

Version: "master"

This is a bit of the code

<Animated.View style={[styles.view, styles.flexCenter, {width}, {height}]}>
          <TwilioVideoLocalView enabled={isCameraEnabled} style={styles.fullscreen} />
          {!isLocalViewFullscreen && (
            <LovalViewOverlayButtons
              isCameraEnabled={isCameraEnabled}
              onFlipButtonPress={onFlipButtonPress}
              isMicrophoneEnabled={isMicrophoneEnabled}
              toggleFullscreen={toggleFullscreen}
            />
          )}
        </Animated.View>

https://user-images.githubusercontent.com/57157035/129363315-e49519aa-3a63-4bdf-83ca-fbb833333cb9.mov

[slycoder]

Oof, yeah, this will be challenging. Because of the way the view is drawn right now, getting it to work with Animation will be a real bear. =(. I open to ideas from the community though as to how to approach this.

[JokubasTolocka]

Perhaps there is some way to mimic the iOS behavior? Because the view adapts nicely on iOS

[slycoder]

Can you elaborate a bit what you had in mind? Part of the trickiness here is that we use a surfaceviewrenderer on Android for performant gl-based rendering.