How to solve publisher view disappearance while using picture-in-picture (PiP) layout in React native Android app

Symptom

When using the picture-in-picture (PiP) layout in a React Native Android app, where a small area of the screen is allocated for the publisher view, and the remaining screen space is dedicated to the subscriber view, an issue arises where the publisher view disappears as soon as the subscriber begins publishing.

Applies To

• Video API
• React native SDK

Resolution

To ensure proper functionality, use the 'androidOnTop' property within the options attribute when configuring the OTSession element. Set the value of 'androidOnTop' to 'publisher', as demonstrated in the following example:

 <View style={{ width: "100%", height: "100%" }}>
        <OTSession
          apiKey={this.apiKey}
          sessionId={this.sessionId}
          token={this.token}
          options={{androidOnTop: 'publisher'}}>
          <View
            style={{
              position: 'absolute',
              right: 10,
              bottom: 90,
              width: '30%',
              height: '20%',
              zIndex: 2,
            }}>
            <OTPublisher
              style={{
                width: '100%',
                height: '100%',
              }}
            />
          </View>
          <OTSubscriber
            style={{
              width: '100%',
              height: '100%',
              zIndex: 1,
            }} />
        </OTSession>
      </View>