EmbedFeatures/NexilisSampleCodeReact-iOS/App.tsx

import React, {useState} from 'react';
import {
  NativeModules,
  StyleSheet,
  View,
  StatusBar,
  Text,
  TouchableOpacity,
  ActionSheetIOS,
  Platform,
  Button,
} from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';

const App = () => {
  const {CallNative} = NativeModules;

  if (Platform.OS === 'ios') {
    CallNative.connect();
  }

  Icon.loadFont();

  const IconButton = ({onPress, iconName, iconSize, iconColor}: any) => {
    return (
      <TouchableOpacity onPress={onPress}>
        <Icon
          name={iconName}
          size={iconSize}
          color={iconColor}
          style={styles.iconButton}
        />
      </TouchableOpacity>
    );
  };

  const [isActionSheetVisible, setActionSheetVisible] = useState(false);

  const handlePress = () => {
    showActionMenu();
  };

  const showActionMenu = () => {
    if (Platform.OS === 'ios') {
      const options = [
        'Setting',
        'Profile',
        'Contact Center',
        'Notification Center',
        'Chat',
        'Call',
        'Live Streaming',
        'Cancel',
      ];

      ActionSheetIOS.showActionSheetWithOptions(
        {
          options: options,
          cancelButtonIndex: options.length - 1,
          // destructiveButtonIndex: 2, // Index of the destructive option (optional)
          tintColor: 'blue', // Color of the option text (optional)
        },
        buttonIndex => {
          // Handle the selected option
          if (buttonIndex === 0) {
            CallNative.openSetting();
          }
          if (buttonIndex === 1) {
            CallNative.openProfile();
          }
          if (buttonIndex === 2) {
            CallNative.openContactCenter();
          }
          if (buttonIndex === 3) {
            CallNative.openNotificationCenter();
          }
          if (buttonIndex === 4) {
            CallNative.openChat();
          }
          if (buttonIndex === 5) {
            CallNative.openCall();
          }
          if (buttonIndex === 6) {
            CallNative.openStreaming();
          }
          else {
            // Cancel button or tapping outside the action menu
          }
        },
      );
    } else {
      // Android implementation
      setActionSheetVisible(true);
    }
  };

  const handleActionSheetPress = async (buttonIndex: any) => {
    setActionSheetVisible(false);
    if (buttonIndex === 0) {
      try {
        CallNative.openSetting();
      } catch (e) {
        console.log(e);
      }
    }
    if (buttonIndex === 1) {
      try {
        CallNative.openProfile();
      } catch (e) {
        console.log(e);
      }
    }
    if (buttonIndex === 2) {
      try {
        CallNative.openContactCenter();
      } catch (e) {
        console.log(e);
      }
    }
    if (buttonIndex === 3) {
      try {
        CallNative.openNotificationCenter();
      } catch (e) {
        console.log(e);
      }
    }
    if (buttonIndex === 4) {
      try {
        CallNative.openChat();
      } catch (e) {
        console.log(e);
      }
    }
    if (buttonIndex === 5) {
      try {
        CallNative.openCall();
      } catch (e) {
        console.log(e);
      }
    }
    if (buttonIndex === 6) {
      try {
        CallNative.openStreaming();
      } catch (e) {
        console.log(e);
      }
    }
  };

  return (
    <View style={styles.container}>
      <StatusBar animated={true} barStyle="default" showHideTransition="fade" />
      <View style={styles.viewAppBar}>
        <Text style={styles.textTitle}>NexilisSampleCode</Text>
        <IconButton
          onPress={handlePress}
          iconName="ellipsis-horizontal"
          iconSize={30}
          iconColor="white"
        />
      </View>
      {isActionSheetVisible && (
        <View>
          <Button
            title="Setting"
            onPress={() => handleActionSheetPress(0)}
          />
          <Button
            title="Profile"
            onPress={() => handleActionSheetPress(1)}
          />
          <Button
            title="Contact Center"
            onPress={() => handleActionSheetPress(2)}
          />
          <Button
            title="Notification Center"
            onPress={() => handleActionSheetPress(3)}
          />
          <Button
            title="Chat"
            onPress={() => handleActionSheetPress(4)}
          />
          <Button
            title="Call"
            onPress={() => handleActionSheetPress(5)}
          />
          <Button
            title="Live Streaming"
            onPress={() => handleActionSheetPress(6)}
          />
          <Button title="Cancel" onPress={() => setActionSheetVisible(false)} />
        </View>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  loginButtonSection: {
    width: '100%',
    height: '100%',
    justifyContent: 'center',
    alignItems: 'center',
  },
  container: {
    flex: 1,
  },
  viewAppBar: {
    width: '100%',
    height: '10%',
    backgroundColor: '#3669ad',
    justifyContent: 'center',
    position: 'relative',
  },
  textTitle: {
    position: 'absolute',
    left: '30%',
    color: 'white',
    fontSize: 18,
    top: '50%',
  },
  iconButton: {
    position: 'absolute',
    right: '5%',
    top: -8,
    color: 'white',
  },
});

export default App;