ZoomView Renders Blank/Black Screen Despite Successful Session Join in React Native Video SDK v2.2.5

[Luan]

Here’s a complete bug report formatted for Zoom developers:

---

Description
ZoomView component renders but displays blank/black screens instead of showing video content. The Zoom session joins successfully, users are detected and populated in the users array, but the ZoomView components show no video output despite successful session establishment.

Errors
No explicit error messages in logs. ZoomView components render as empty/black screens. Session joins successfully, event listeners trigger correctly, and user objects are populated, but video content is not displayed.

Which React Native Video SDK version?
@zoom/react-native-videosdk: ^2.2.5

Video SDK Code Snippets

Session Join Configuration:

await zoom.joinSession({
  sessionName: sessionName,
  userName: userName,
  token: token,
  audioOptions: {
    connect: true,
    mute: true,
    autoAdjustSpeakerVolume: false,
  },
  videoOptions: { localVideoOn: true },
  sessionIdleTimeoutMins: 40,
})

ZoomView Rendering:

{users.map((user) => {
  console.log("user", user);
  return (
    <View style={{ flex: 1, backgroundColor: "red" }} key={user.userId}>
      <ZoomView
        userId={user.userId}
        sharing
        videoAspect={VideoAspect.Original}
        preview
        key={user.userId}
        videoResolution={VideoResolution.Resolution720P}
        hasMultiCamera={true}
      />
    </View>
  );
})}

Event Listeners Setup:

const sessionJoin = zoom.addListener(EventType.onSessionJoin, async () => {
  const mySelf = new ZoomVideoSdkUser(await zoom.session.getMySelf());
  const remoteUsers = await zoom.session.getRemoteUsers();
  setUsersInSession([mySelf, ...remoteUsers]);
  setIsInSession(true);
});

const userJoin = zoom.addListener(EventType.onUserJoin, async (event) => {
  const { remoteUsers } = event;
  const mySelf = await zoom.session.getMySelf();
  const remote = remoteUsers.map(
    (user: ZoomVideoSdkUserType) => new ZoomVideoSdkUser(user)
  );
  setUsersInSession([mySelf, ...remote]);
});

ZoomVideoSdkProvider Configuration:

<ZoomVideoSdkProvider
  config={{
    domain: "zoom.us",
    enableLog: true,
  }}
>

To Reproduce

1. Initialize React Native app with ZoomVideoSdkProvider
2. Navigate to zoom screen component with video_identifier parameter
3. Call API to get session configuration (sessionName, userName, videoSDKJWT)
4. Tap “Join Session” button to trigger joinSession()
5. Session joins successfully (onSessionJoin event fires)
6. Users array populates with mySelf and remote users
7. Component re-renders with ZoomView components
8. ZoomView components render as blank/black screens with no video content

Screenshots

• Session joins successfully (console logs show successful join)
• Users array contains expected user objects with valid userIds
• ZoomView components render but display blank/black screens
• Background color “red” is visible, confirming View container renders correctly

Troubleshooting Routes

• Verified session joins successfully via event listeners
• Confirmed users array populates with valid ZoomVideoSdkUser objects
• Checked that videoOptions: { localVideoOn: true } is set
• Enabled debug logging with enableLog: true
• Tested with different videoAspect and videoResolution settings
• Verified userId values match the actual user IDs from session
• Confirmed camera permissions are granted to the application

Smartphone (please complete the following information):

• Device: [iPhone/Android device model]
• OS: [iOS/Android version]
• React Native: 0.71.2

Additional Context

• Using React Native 0.71.2 with multiple video SDK integrations
• App has custom SafeAreaProvider configuration with zero insets
• ZoomVideoSdkProvider is properly wrapped around navigation container
• Session management works correctly (users join/leave events fire properly)
• Audio/video status change events are being received
• The issue appears to be specifically with video rendering in ZoomView component

Potential Configuration Issues:

1. Multiple conflicting props on ZoomView (both sharing and preview)
2. Duplicate key prop on ZoomView component
3. Parent View styling potentially interfering with video display
4. SafeAreaProvider custom insets configuration: { top: 0, left: 0, right: 0, bottom: 0 }

Expected Behavior:
ZoomView components should display video content from session participants when session is active and users are present.

Actual Behavior:
ZoomView components render as blank/black screens despite successful session join and user detection.

---

This report provides comprehensive details about my specific implementation and the issue you’re experiencing with ZoomView not displaying video content.

[ekaansh.zoom (Ekaansh)]

Hi @Luan, can you share a minimal reproduction for this error please? We have a quickstart app built using v2.2.5 and Expo that you can try out as well to check if the integration is correct.

While the React Native version shouldn’t be an incompatibility with Zoom. The v0.71 release is now out of the support window for the React Native framework itself. Please migrate to a supported React Native version. To help you upgrade to this version, you can use the upgrade helper.
If that’s not an option I’d suggest at least updating the latest patch release that is v0.71.19.

[Luan]

Thanks for the quick reply. Could you please confirm which React Native version would be most compatible with Zoom Video SDK v2.2.5? We’re currently on v0.71.2, and I understand it’s out of the support—happy to upgrade if a more stable combination is known.

Also, I tried rendering participants using FlatList and ScrollView to support scrolling and Grid View layout, but the ZoomView components became unstable and often failed to render correctly. However, without wrapping them inside a scrollable list, we can’t support user scrolling or split the view layout.

Would appreciate any suggestions on layout strategy or a minimal working pattern to handle dynamic user rendering with scroll support.

[ekaansh.zoom (Ekaansh)]

I’m using Expo 53 with React Native 0.79.2 for the quickstart and it works well. You can try it here: GitHub - zoom/videosdk-reactnative-quickstart: This is a sample application that demonstrates how to use the Zoom Video SDK in a React Native application.

The app I shared is using a simple array.map() to render the list of videos, but using both FlatList and ScrollView should be supported. Can you share what’s the behaviour you’re seeing after updating to RN 0.79.x?

[Luan]

Hi @ekaansh.zoom. Thank you. Another issue

I checked my code and found that I’m setting up the listener for onChatNewMessageNotify but when I send messages from Zoom web, I’m not receiving any events in my React Native app. I can see the listener is registered but the callback never gets triggered. I’m willing to show you a video recording of this issue to demonstrate what’s happening. Could you help me understand why the events aren’t being received?

 useEffect(() => {
    const onChatNewMessageNotify = (messageItem: any) => {
      const content = messageItem.content;
      const sender = messageItem.senderUser;
      const senderName = sender.userName;

      const newMessage: ChatMessage = {
        id: `${Date.now()}-${Math.random()}`,
        message: content || "",
        senderName: senderName || "Unknown",
        timestamp: new Date(),
        //isFromSelf: sender.isMyself || false,
      };

      setMessages((prevMessages) => [...prevMessages, newMessage]);
    };

    const newMessageListener = zoom.addListener(
      EventType.onChatNewMessageNotify,
      async (event: any) => {
        console.log("event", event);
      }
    );
    listeners.current.push(newMessageListener);

    
  }, []);

[ekaansh.zoom (Ekaansh)]

It’s working as expected on @zoom/react-native-videosdk: 2.2.5. I’m using the sample project I linked previously with the Web SDK @zoom/videosdk: 2.2.0:

// WEB
  const chatClient = client.getChatClient();
  console.log("Sending message from Web:")
  const message = await chatClient.sendToAll("Message from Web");
  console.log(message);

// RN
    const newMessageListener = zoom.addListener(
      EventType.onChatNewMessageNotify,
      async (event: any) => {
        console.log("Chat event", event);
      }
    );
    listeners.current.push(newMessageListener);

[Luan]

Sorry, I’d like to add more information. We’re using @zoom/videosdk-ui-toolkit@2.2.0-2 on the Web, and @zoom/react-native-videosdk@2.2.5 on mobile. When a participant on Web sends a chat message to Everyone, the onChatNewMessageNotify event doesn’t trigger on mobile — no mobile user receives the event.