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

It is a react native component for SmartFloMeet users.

import React, { PureComponent,createRef } from "react";
import {View,Image,Text,Switch, FlatList,TouchableOpacity,Dimensions,TouchableWithoutFeedback} from "react-native";
import { styles } from "../style/EnxMoreOptionStyle";
import { EnxSetting } from "sfm-uikit-react-native";
class EnxMoreScreen extends PureComponent {
    constructor(props) {
        super(props);
        this.state = {
          moreOptionList : EnxSetting.getMoreOptions(),
          screenWidth: Dimensions.get('window').width,
        }
        this.orientationChangeListener = Dimensions.addEventListener(
          "change",
          this.onOrientationChange
        );
      }
      onOrientationChange = ({ window: { width } }) => {
        this.setState({
          screenWidth: width,
        });
      }
      componentWillUnmount() {
        if (this.orientationChangeListener && this.orientationChangeListener.remove) {
          this.orientationChangeListener.remove(); // Proper removal using remove() method
        }
      }
      render() {
        return (
          <View style={styles.mainContainer}>
               <TouchableWithoutFeedback onPress={this.handleMainContainerPress}>
                    <View style={styles.touchableArea} />
              </TouchableWithoutFeedback>
          <View style ={styles.subContainer} >
              <FlatList
                data={this.state.moreOptionList}
                renderItem={this.renderItem}
                keyExtractor={(item, index) => index.toString()}
                scrollEnabled={true} // Ensure FlatList can scroll
                showsVerticalScrollIndicator={false} // Optional: hides scroll indicators
              />
        </View>
      </View>
        );
      }
    // Function to handle touch events on the mainContainer
      handleMainContainerPress = (event) => {
        const { locationX } = event.nativeEvent; // Get touch coordinates
      // Check if the touch is within the visible area of the mainContainer
        if (locationX <= (this.state.screenWidth - 260)){ // Adjust this value based on your UI
          this.onPressToBAck();
          }
      };

      //Render item on screen
      renderItem = ({ item, index }) => {
        return (
          <View style={styles.itemContainer}>
            {/* Render Image */}
            <Image 
             tintColor= {item.isSwitch?item.status?'#AA336A':'#444444':'#444444'}
             source={item.imageIcon} style={styles.itemImage} />
    
            {/* Render Name */}
            <Text style={styles.itemName}>{item.name}</Text>
            {/* Conditionally Render Switch or Button */}
            {item.isSwitch ? (
              <Switch
                value={item.status}
                onValueChange={() => this.onToggleSwitch(index)} style={styles.switch}
              />
            ) : (
              <TouchableOpacity
                style={styles.button}
                onPress= { () => this.onButtonPress(index)}
              >
                <Image source={require("../image_asset/arrow_normal.png")} style={styles.itemImage} />
              </TouchableOpacity>
            )}
          </View>
        );
      };

      //Actions from flatlist
      // Sample method that logs when the button is pressed or the switch is toggled.
      onToggleSwitch = (index) => {
            // const updatedList = [...this.state.moreOptionList];
            // updatedList[index].status = !updatedList[index].status;
            // this.setState({ moreOptionList: updatedList });
            
            this.handleEventAction(this.state.moreOptionList[index])
            this.onPressToBAck();
        };
      onButtonPress = (index) => {
        this.onPressToBAck();
        this.handleEventAction(this.state.moreOptionList[index])
          //console.log(`${index} button pressed`);
      };

      onPressToBAck = () => {
        this.props.onBack()
      }
      // This function will be called when the any action prefrom either through switch or button 
      handleEventAction = (value) => {
        this.updateAction(value);
        if (this.props.onAction) {
          setTimeout(() => {
            this.props.onAction(value);  // Call the function passed from EnxVideoView
           }, 500); // Delay in milliseconds
              
        }
      };
      //Get Events respond from Video Screen
      // The method to be called from EnxVideoView, Here we are updating the action
      updateAction = (value) => {
        console.log(`${value} button pressed callback`);
        const index = this.state.moreOptionList.findIndex(event => event.name === value.name);
        EnxSetting.updateMenuStatus(index);
      }
}
export default EnxMoreScreen;