Problem with dimensions in the latest version

[alejandro-geeksquare]

Moving from version 4.3.0-build.1 to 4.3.1 and 4.3.2 creates a problem with the dimensions of the RtcSurfaceView, which does not take 100% of the height of the device. This happens one in four times we try to connect, rendering the image in horizontal format. This has started. happen with upgrade from 4.3.0-buid.1 to 4.3.1

[guoxianzhe]

@alejandro-geeksquare Can you provide a simple code for reproduce and please let me know which platform occurs.

[alejandro-geeksquare]

@guoxianzhe It has only happened to me with Android devices

const { height } = Dimensions.get("screen")

function LiveScreenAudienceWithToken() {
  const agoraEngineRef = useRef<IRtcEngineEx>(createAgoraRtcEngine() as IRtcEngineEx)

  const initRtcEngine = useCallback(async (): Promise<void> => {
    if (token) {
      try {
        agoraEngineRef.current.leaveChannel()
        agoraEngineRef.current.initialize({
          appId,
          channelProfile: ChannelProfileType.ChannelProfileLiveBroadcasting
        })
        agoraEngineRef.current.setLogFile("./src/agorasdk.log")
        agoraEngineRef.current.setLogFilter(LogFilterType.LogFilterDebug)
        agoraEngineRef.current.muteRemoteVideoStream(token.uid, true)
        agoraEngineRef.current.enableLocalAudio(false)
        agoraEngineRef.current.joinChannel(token.token, channelName, token.uid, {
          clientRoleType: ClientRoleType.ClientRoleAudience,
          autoSubscribeVideo: true,
          autoSubscribeAudio: true
        })
      } catch (e) {
        console.error("error", e)
      }
    }
  }, [channelName])

  const initAllListener = useCallback(() => {
    agoraEngineRef.current.addListener(
      "onRemoteVideoStateChanged",
      (connection, remoteUid, state, reason, elapsed) => {
          setRemoteUser(remoteUid)
      }
    )

  const handleJoinFromApiStatus = useCallback((status: number) => {
      if (agoraEngineRef.current) {
        agoraEngineRef.current.leaveChannel()
        setRemoteUser(0)
      }
  }, [])

  useEffect(() => {
    ;(async () => {
      await initRtcEngine()
    })()
    const engineCopy = agoraEngineRef.current
    initAllListener()
    handleJoinFromApiStatus(status)
    return () => {
      engineCopy.muteAllRemoteVideoStreams(true)
      engineCopy.muteAllRemoteAudioStreams(true)
      engineCopy.removeAllListeners()
    }
  }, [handleJoinFromApiStatus, initAllListener, initRtcEngine])

  return (
    <>
      {initStream && initLive  ? (
        <RtcSurfaceView
           style={{
            width: "100%",
            height,
            opacity: 1
          }}
          zOrderMediaOverlay={remoteUser !== 0}
          canvas={{ uid: remoteUser, sourceType: VideoSourceType.VideoSourceRemote }}
        />
      ) : (
        <View
          style={[
            {
              flex: 1,
              backgroundColor: palette.component.backgrounds.dark.primary,
              opacity: fadeAnim
            }
          ]}
        >
      )}
    </>
  )
}

[guoxianzhe]

@alejandro-geeksquare I can not reproduce this in Oneplus 7T PRO(Android 11). Can you check height value is what when does not take 100% of the height of the device ?

[alejandro-geeksquare]

@guoxianzhe If the same thing happens with height 100%, it doesn't always happen, after several times the transmission starts it looks like this. It only happens with versions 4.3.1 and 4.3.2

[alejandro-geeksquare]

https://github.com/AgoraIO-Extensions/react-native-agora/assets/128458985/13f18a55-6e07-4778-85c6-eed015ed2933

[guoxianzhe]

@alejandro-geeksquare pls try to set RenderMode in <RtcSurfaceView canvas={{ renderMode: RenderModeType.RenderModeHidden}}/>

[alejandro-geeksquare]

@guoxianzhe I have tried it and it still happens

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[alejandro-geeksquare]

It has not yet been resolved

[guoxianzhe]

@alejandro-geeksquare Sorry, I can not reproduce with this code,https://github.com/AgoraIO-Extensions/react-native-agora/commit/6c613ff7f1d1aa339b468c63d39f79951e9122aa please check