Fix OTSubscriberView, OTPublishderView layout issue on iOS

[DmitryTop]

OTSubscriberView and OTPublisherView fail to layout properly on iOS. In my case layoutSubviews is called only once when the view has incorrect bounds (which are managed by React Native) with height = 0.

[abdulajet]

Can you share screenshots? Not sure what you mean by doesn't layout properly

[DmitryTop]

There is nothing on the screen since the subscriber view height is 0. layoutSubviews is called only once in my case when React Native hadn't applied correct sizes yet. I've made a fix to autoresize publisher and subscriber views so it will always match the view which is managed by React Native. With this fix everything works fine in my case.

[abdulajet]

There is nothing on the screen since the subscriber view height is 0.

I haven't seen this behavior before. The sample apps work fine, can you share your React Native code?

[enricop89]

@abdulajet using BasicVideoChat example, I am able to reproduce the issue by setting style={StyleSheet.absoluteFill} on the OTSubscriber object.

import {View, StyleSheet} from 'react-native';

render() {
    return (
      <View
        style={{
          flex: 1,
          flexDirection: 'column',
          paddingHorizontal: 100,
          paddingVertical: 50,
        }}>
        <OTSession
          apiKey={this.apiKey}
          sessionId={this.sessionId}
          token={this.token}>
          <OTSubscriber style={StyleSheet.absoluteFill} />
        </OTSession>
      </View>
    );
  }

@DmitryTop for the Android issue, can you try by setting:

const sessionOptions = {
    androidOnTop: 'publisher',
    androidZOrder: 'onTop',
    useTextureViews: true,
  };

Documentation here: https://github.com/opentok/opentok-react-native/blob/main/docs/OTSession.md#setting-session-options

[DmitryTop]

Setting sessionOptions on Android didn't help (with and without texture views). There is a similar problem as on iOS - OTSubscriberLayout has zero height:

Parent ReactViewGroup width: 1080 (WRAP_CONTENT) height: 2296 (WRAP_CONTENT)

OTSubscriberLayout width: 1080 (WRAP_CONTENT) height: 0 (WRAP_CONTENT)

FrameLayout width: 1080 (MATCH_PARENT) height: 0 (MATCH_PARENT)

GLSurfaceView width: 1080 (MATCH_PARENT) height: 0 (MATCH_PARENT)

[abdulajet]

I am not too knowledgable with JS/React but wouldnt you provide the size in JS? <OTPublisher style={{ width: 200, height: 200 }} />

[DmitryTop]

Setting style={{ width: 200, height: 200 }} does not work in my case. I have a complex view hierarchy in the project. On the other hand I can reproduce the issue in the opentok-sample by setting style={StyleSheet.absoluteFill}. Can you please fix this ASAP?

BTW I am using the same view structure for Twilio and for Vonage. Twlio works, Vonage does not. You can check Twlio plugin implementation here https://github.com/actio-tech/react-native-twilio-video-webrtc (it's a fork of https://github.com/blackuy/react-native-twilio-video-webrtc)