yarn add react-native-safe-area-context


/**
 * Simple navigation example - manage page transitions using useState
 */
import React, { useState } from 'react';
import { View, Button, StyleSheet } from 'react-native';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import { LiveAudiencePage } from 'react-native-tuikit-live';
import { useLiveListState } from 'react-native-tuikit-atomic-x';

type PageType = 'home' | 'liveAudience' | 'liveEnd';

function MyApp() {

  // In real scenarios, liveID is typically sourced from:
  // 1. Parameters when entering a live stream from the Live Stream List
  // 2. Route parameters
  // 3. Server API response
  // Here, '1234' is used as an example
  const liveID = '1234'
  const { joinLive } = useLiveListState(liveID)

  const [currentPage, setCurrentPage] = useState<PageType>('home');
  const [endedLiveID, setEndedLiveID] = useState<string>('');

  // Navigate to the audience viewing page
  const handleJumpLiveAudience = async () => {
    await joinLive({
      liveID,
      onSuccess: () => {
        setCurrentPage('liveAudience');
      },
      onError: (error) => {
        console.error('Failed to join live room:', error);
        // Handle the error, e.g., notify the user
      }
    })
  };

  // Return from the audience viewing page
  const handleBackFromAudience = () => {
    setCurrentPage('home');
  };

  // End the live stream
  const handleEndLive = (liveID?: string) => {
    setEndedLiveID(liveID || '');
    setCurrentPage('liveEnd');
  };

  return (
    <SafeAreaProvider>
      {currentPage === 'home' && (
        <View style={styles.container}>
          <Button title="Enter Audience View" onPress={handleJumpLiveAudience} />
        </View>
      )}

      {currentPage === 'liveAudience' && (
        <LiveAudiencePage
          onBack={handleBackFromAudience}
          onEndLive={handleEndLive}
        />
      )}

      {currentPage === 'liveEnd' && (
        <View style={styles.container}>
          <Button title="Return to Home" onPress={() => setCurrentPage('home')} />
        </View>
      )}
    </SafeAreaProvider>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default MyApp;


<View style={{ flex: 1 }}>
  {/* ...other content... */}
  
  <View 
    style={{
      position: 'absolute',
      top: 100,
      left: 15,
      width: 100,
      height: 30,
      backgroundColor: 'rgba(0, 0, 0, 0.3)',
      borderRadius: 22.5,
      flexDirection: 'row',
      justifyContent: 'center',
      alignItems: 'center',
    }}
  >
      {/* Replace the image address with your resources */}
    <Image
      style={{ width: 18, height: 18 }}
      source={require('/static/images/gift_heart0.png')}
      resizeMode="contain"
    />
    <Text style={{ color: '#fff', fontSize: 12 }}>8888</Text>
  </View>
</View>

{/* <TouchableOpacity
    style={styles.actionBtn}
    onPress={showGiftPicker}
    activeOpacity={0.7}>
    <Image
      source={require('react-native-tuikit-atomic-x/src/static/images/live-gift.png')}
      style={styles.actionBtnIcon}
      resizeMode="contain"
    />
    </TouchableOpacity> */}

<View style={styles.audienceInfo}>
    .......
   {/* Audience level */}
   <Text style={styles.audienceLevel}>{level}</Text>
    <View style={styles.audienceAvatarContainer}>
        <Image source={{ uri: avatarURL }} style={styles.audienceAvatar} />
    </View>
</View>