Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

react-native-contact-action-sheet

0.1.2 • Public • Published

React Native Contact Action Sheet

npm version npm downloads

Built With

Pending Items

  • [ ]

Getting Started

Note: Maximum of 6 Phone Numbers and Emails Total allowed.

1. Install Package:

npm i react-native-contact-action-sheet

2. Add pod to ios/Podfile:

pod 'RNVectorIcons', :path => '../node_modules/react-native-vector-icons'

3. Install Cocoapods:

pod install

4. Run Project:

react-native run-ios

Screenshot (iOS)

Screenshot (Android)

Example Code

Functional Component (Using React Hooks):

// 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;

Class Component (Using State):

// 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;

Changelog

[0.1.2] - 4/2/2020

Added

  • Added Website.

[0.1.1] - 2/4/2020

Added

  • Added formatPhoneNumber to convert phone number to 15555555555 format.

Changed

  • Fixed React Native Vector Icons link issue.

[0.1.0] - 2/3/2020

Changed

  • Fixed React Native Vector Icons podfile issue.

[0.0.6] - 1/31/2020

Changed

  • Fixed maximum contacts issue.
  • Fixed outDir/dist issue.

[0.0.5] - 1/31/2020

Changed

  • Fixed README example code.

[0.0.3] - 1/31/2020

Added

  • Added support for Message.

Changed

  • Fixed toggle issue.

[0.0.2] - 1/30/2020

Added

  • Added Android Support.
  • Added iPhone X/11 Support.
  • Added screenshots.

Changed

  • Styling changes.

Install

npm i react-native-contact-action-sheet

DownloadsWeekly Downloads

32

Version

0.1.2

License

MIT

Unpacked Size

43.2 kB

Total Files

8

Last publish

Collaborators

  • avatar