sfm-uikit-react-native/src/view/EnxScreenShareView.js

It is a react native component for SmartFloMeet users.

import React, { Component } from "react";
import { FlatList, View, Text, TouchableWithoutFeedback, Image, TouchableHighlight } from "react-native";
import { styles } from "../style/EnxTopViewStyle";
import { EnxPlayerView, EnxToolBarView } from "sfm-rtc-react-native";


class EnxScreenShareView extends Component {
  constructor(props) {
    super(props);
    this.state = {
        activeStreamId: this.props.data,
        closeImage: require("../image_asset/close.png"),
        isLoad: true,
    }

  }

  
  handleClick(){
    try{
      this.setState({isLoad:!this.state.isLoad})
      this.props.stopAnnotation()
    }catch(ex){
      console.log("Error: ",ex.message)
    }
  }
  //

  render() {
    return (
      <View style={{ flex: 1, }}>
        {
          this.state.isLoad?
          <TouchableWithoutFeedback>
          <EnxPlayerView style={{ flex: 1 }}
            key={String(this.state.activeStreamId.streamId)}
            streamId={String(this.state.activeStreamId.streamId)}
            isLocal="remote"
          />
        </TouchableWithoutFeedback>
        : null
        }
        

        <View style={{
          position: 'absolute',
          width: '100%',
          height: 100,
          bottom: 0,
          marginBottom: 100,
        }}>
          <EnxToolBarView style={{ flex: 1, bottom: 0 }}>
          </EnxToolBarView>

        </View>
        <View style={{
          position: 'absolute',
          width: 50,
          height: 50,
          padding:5,
        }}>
          <TouchableHighlight
            underlayColor="transparent"
            onPress={() => { this.handleClick() }}
          >
            <Image
              style={{  }}
              source={this.state.closeImage}

            />
          </TouchableHighlight>
        </View>
      </View>
    );
  }
}


export default EnxScreenShareView;