// Imports: Dependencies
import React, { useState } from 'react';
import { Button, SafeAreaView } from 'react-native';
 
// Imports: Components
import { ContactActionSheet }  from 'react-native-contact-action-sheet';
 
// Functional Component
const FunctionalComponent = () => {
  // React Hooks: State
  const [ visible, toggle ] = useState(false);
 
  // Open Action Sheet
  const openActionSheet = () => {
    // React Hook: Toggle Modal
    toggle((visible: boolean) => !visible);
  };
 
  // Contacts
  const contacts = [
    {
      title: 'Company Headquarters',
      type: 'Phone Number',
      contact: '(555) 555-5555',
    },
    {
      title: 'Retail Store',
      type: 'Phone Number',
      contact: '(777) 777-7777',
    },
    {
      title: 'Retail Store',
      type: 'Message',
      contact: '(777) 777-7777',
    },
    {
      title: 'Retail Store',
      type: 'Email',
      contact: 'hq@company.com',
    },
    {
      title: 'Website',
      type: 'Website',
      contact: 'https://company.com',
    },
  ];
 
  return (
    <SafeAreaView>
      <Button
        title="Show Modal"
        onPress={() => openActionSheet()}
      />
  
      <ContactActionSheet
        visible={visible}
        toggle={toggle}
        contactsList={contacts}
      />
    </SafeAreaView>
  )
};
 
// Exports
export default App;

// Imports: Dependencies
import React from 'react';
import { Button, SafeAreaView } from 'react-native';
import { ContactActionSheet }  from 'react-native-contact-action-sheet';
 
// Screen: Class Component
class ClassComponent extends React.Component {
  constructor(props) {
    super(props);
    
    this.state = {
      visible: false,
    }
  }
 
  // Open Action Sheet
  openActionSheet = () => {
    // Set State
    this.setState({
      visible: !this.state.visible,
    })
  };
    
  render() {
    // Contacts
    const contacts = [
      {
        title: 'Company Headquarters',
        type: 'Phone Number',
        contact: '(555) 555-5555',
      },
      {
        title: 'Retail Store',
        type: 'Phone Number',
        contact: '(777) 777-7777',
      },
      {
        title: 'Retail Store',
        type: 'Message',
        contact: '(777) 777-7777',
      },
      {
        title: 'Retail Store',
        type: 'Email',
        contact: 'hq@company.com',
      },
      {
        title: 'Website',
        type: 'Website',
        contact: 'https://company.com',
      },
    ];
 
    return (
      <SafeAreaView>
        <Button
          title="Show Modal"
          onPress={this.openActionSheet}
        />
    
        <ContactActionSheet
          visible={this.state.visible}
          toggle={this.openActionSheet}
          contactsList={contacts}
        />
      </SafeAreaView>
    )
  }
}
 
// Exports
export default ClassComponent;