tencent cloud

yarn add react-native-safe-area-context

/**
 Simple navigation example - use useState to manage page transitions
 */
 
import React, { useState } from 'react';
import { AnchorPage } from 'react-native-tuikit-live';
import { View, Button, StyleSheet } from 'react-native';
import { SafeAreaProvider } from 'react-native-safe-area-context';

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

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

  // start live streaming
  const handleStartLive = () => {
    setCurrentPage('anchor');
  };

  // Return from anchor page
  const handleBackFromAnchor = () => {
    setCurrentPage('home');
  };

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

  return (
    <SafeAreaProvider>
      {currentPage === 'home' && (
        <View style={styles.container}>
          <Button title="Start live streaming" onPress={handleStartLive} />
        </View>
      )}

      {currentPage === 'anchor' && (
        <AnchorPage
          onBack={handleBackFromAnchor}
          onEndLive={handleEndLive}
        />
      )}

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

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

export default MyApp;

// Other code
<View>
    .......
    {/* Bottom operation bar */}
    <TouchableOpacity
       style={styles.actionButtonItem}
       onPress={() => showCoGuestPanel('requests')}
       activeOpacity={0.7}>
       {/* Replace the image address with your resources */}
       <Image
         source={require('/static/images/link-guest.png')} 
         style={styles.actionButtonIcon}
         resizeMode="contain"
       />
       <Text style={styles.actionButtonText}>{product}</Text>
     </TouchableOpacity>
</View>

{/* <TouchableOpacity
    style={styles.actionButtonItem}
    onPress={showCoHostPanel}
    activeOpacity={0.7}>
    <Image
      source={require('react-native-tuikit-atomic-x/src/static/images/link-host.png')}
      style={styles.actionButtonIcon}
      resizeMode="contain"
    />
    <Text style={styles.actionButtonText}>{t('anchor.linkHost')}</Text>
    </TouchableOpacity> */}