React-native-contact-action-sheet NPM

React Native Contact Action Sheet

Features

✅ iOS/Android
✅ Dark Mode
✅ Built with TypeScript
✅ Built with React Hooks

Built With

TypeScript - Programming Language
React Hooks - Functional Component State/Lifecycle Methods
React Native - Mobile (iOS/Android) Framework
React Native Modal - Modal
React Native Vector Icons - Icons

Pending Items

Screenshot (iOS)

Screenshot (Android)

Getting Started

Note: Maximum of 6 Phone Numbers and/or Emails allowed.

1. Install Package:

npm i react-native-contact-action-sheet

2. Install additional dependencies:

Note: This NPM Package uses the Native Module react-native-vector-icons, so it must be installed in your project.

npm i react-native-vector-icons

3. Install Cocoapods:

cd ios

pod install

4. Add Example Code:

// Imports: Dependencies
import React, { useState } from 'react';
import { Button, SafeAreaView } from 'react-native';
import { ContactActionSheet, ContactItem }  from 'react-native-contact-action-sheet';

// App
const App: React.FC = (): JSX.Element => {
  // React Hooks: State
  const [ visible, setVisible ] = useState<boolean>(false);

  // Contacts
  const contacts: Array<ContactItem> = [
    {
      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={() => setVisible(!visible)}
      />

      <ContactActionSheet
        toggle={() => setVisible(!visible)}
        contactsList={contacts}
        modalVisible={visible}
        darkMode={false}
      />
    </SafeAreaView>
  );
};

// Exports
export default App;

4. Run Project:

Android

react-native run-android

iOS

react-native run-ios

Props

Default: | Property | Type | Default | Description | | ----------------- | :--------------------: | :-------------------: | ---------------------------------------------------------------------- | | toggle | () => void | undefined | Toggle modal (Show/Hide) | | modalVisible | boolean | false | Modal visible | | contactsList | Array<ContactItem> | [] | Contact data (Phone number, Email Address, Website) |

Optional: | Property | Type | Default | Description | | --------------------------------- | :--------------------------: | :----------: | ---------------------------------------------------------------------- | | darkMode | boolean | false | Dark mode |

Building & Publishing

Build

npm run build

Publish

npm publish

Changelog

1.0.0 - 5/24/2021

Added

Added LICENSE.

0.1.28 - 5/24/2021

Added

Added styling to ContactActionSheet.

0.1.27 - 5/24/2021

Added

Added react-native-vector-icons from peerDependency.

Removed

Fixed <View> issue.

0.1.26 - 5/24/2021

Removed

Removed react-native-vector-icons from peerDependency.

0.1.25 - 5/24/2021

Changed

Changed react-native-vector-icons from dependency to devDependency and peerDependency.
Updated Getting Started in README.
Fixed missing react peerDependency.
Fixed missing react-native peerDependency.

Removed

Removed RNVectorIcons.podspec from src.

0.1.24 - 5/24/2021

Updated example code in README.

0.1.23 - 5/24/2021

Added

Added RNVectorIcons.podspec to src.

0.1.22 - 5/24/2021

Changed

Updated example code in README.
Changed main path from dist/index.js to ./dist/index.jsin package.json.
Changed types path from dist/index.d.ts to ./dist/index.d.ts in package.json.

Removed

Removed react-native-typescript-transformer as dependency.

0.1.20 - 5/22/2021

Changed

Fixed npm run build and npm publish issue.

0.1.19 - 5/22/2021

Changed

Changing import Icon from 'react-native-vector-icons/Ionicons' to import Ionicons from 'react-native-vector-icons/Ionicons'.

0.1.18 - 5/22/2021

Changed

Updating Getting Started in README.

0.1.17 - 5/20/2021

Changed

Updating Getting Started in README.

0.1.16 - 5/20/2021

Changed

Changed react-native-iphone-x-helper, react-native-modal, and react-native-vector-icons from peerDependencies to dependencies.

0.1.15 - 5/20/2021

Added

Added Props section to README.
Added Example App section to README.

Changed

Changed file structure.
Changed index.js to index.tsx.
Changed package.json build script to cd src && tsc && cp ../package.json && Echo Build completed!.

Removed