Live Broadcast React Native Algora - Black Screen even when host connected

Question

all this has been driving me crazy. I have trying to get a live stream to show in a react-native app, but the element only shows black, no matter what I do. I have try setting the Uid to the peer id and also to 1.

I create the live stream here: https://webdemo.agora.io/basicLive/index.html

And I also confirm that the peers are being loaded.

import React, {useEffect, useState} from 'react';
import {useWindowDimensions, View} from 'react-native';
import {TouchableHighlight} from 'react-native-gesture-handler';
import Video from 'react-native-video';
import {BodyText} from './CommonView/Text';
import RtcEngine, {
  RtcLocalView,
  RtcRemoteView,
  VideoRenderMode,
  ClientRole,
  ChannelProfile,
} from 'react-native-agora';

const appId = 'xxx';
const channel = 'test';
const token = 'xxx';

// https://ottverse.com/free-hls-m3u8-test-urls/

const GuardianAngel = () => {
  const [isMaximized, setIsMaximized] = useState(0);
  const {width, height} = useWindowDimensions();

  const [engine, setEngine] = useState();
  const [hasJoined, setHasJoined] = useState();
  const [peerIds, setPeerIds] = useState([]);

  useEffect(async () => {
    const newEngine = await RtcEngine.create(appId);
    await newEngine?.setChannelProfile(ChannelProfile.LiveBroadcasting);
    await newEngine?.setClientRole(ClientRole.Audience);

    newEngine.addListener('RemoteVideoStateChanged', (uid, state) => {
      console.log('RemoteVideoStateChanged', {uid, state});
    });

    newEngine.addListener('Error', (err) => {
      console.log('Error', err);
    });

    newEngine.addListener('UserJoined', (uid, elapsed) => {
      console.log('UserJoined', uid, elapsed);
      // Get current peer IDs

      // If new user
      if (peerIds.indexOf(uid) === -1) {
        setPeerIds([...peerIds, uid]);
      }
    });

    newEngine.addListener('UserOffline', (uid, reason) => {
      console.log('UserOffline', uid, reason);
      setPeerIds(peerIds.filter((id) => id !== uid));
    });

    // If Local user joins RTC channel
    newEngine.addListener('JoinChannelSuccess', (channel, uid, elapsed) => {
      console.log('JoinChannelSuccess', channel, uid, elapsed);
      // Set state variable to true
      setHasJoined(1);
    });

    newEngine.joinChannel(token, channel, null, 0);

    setEngine(newEngine);

    return () => {
      newEngine?.destroy?.();
    };
  }, []);

  const [inChannel, setInChannel] = useState(0);

  console.log({peerIds});
  return (
    <View
      pointerEvents="box-none"
      style={{
        position: 'absolute',
        bottom: isMaximized ? 0 : 100,
        right: isMaximized ? 0 : 10,
        borderWidth: isMaximized ? 0 : 5,
        borderColor: global?.color?.orange,
      }}>
      <View
        pointerEvents={'auto'}
        style={{
          width: isMaximized ? width : 120,
          height: isMaximized ? height : 120,
          position: 'relative',
          backgroundColor: 'black',
        }}>
        <TouchableHighlight
          onPress={() => {
            setIsMaximized(!isMaximized);
          }}>
          <View>
            {peerIds.map((peerId, index, array) => {
              console.log('RtcRemoteView', {peerId});
              return (
                <View
                  key={peerId}
                  style={{
                    width: isMaximized ? width : 120,
                    height: isMaximized ? 300 : 120,
                  }}>
                  <RtcRemoteView.SurfaceView
                    style={{
                      flex: 1,
                      backgroundColor: 'red',
                    }}
                    uid={peerId}
                    channelId={channel}
                  />
                </View>
              );
            })}
            <BodyText
              text={'Your Host: Brittany'}
              center
              textStyle={{
                position: 'absolute',
                bottom: 0,
                fontSize: 10,
                left: -15,
                right: 0,
                color: 'white',
                width: 120,
                backgroundColor: global?.color?.black_50,
              }}
            />
          </View>
        </TouchableHighlight>
      </View>
    </View>
  );
};

export default GuardianAngel;