A react-native interface for Touch 3D home screen quick actions

Overview

React Native Quick Actions

Support for the new 3D Touch home screen quick actions for your React Native apps!

This project currently supports iOS 9+ and Android 7

Installing

$ yarn add react-native-quick-actions
$ react-native link react-native-quick-actions

Additional steps on iOS

Add the following lines to your AppDelegate.m file:

#import "RNQuickActionManager.h"

// @implementation AppDelegate

- (void)application:(UIApplication *)application performActionForShortcutItem:(UIApplicationShortcutItem *)shortcutItem completionHandler:(void (^)(BOOL succeeded)) completionHandler {
  [RNQuickActionManager onQuickActionPress:shortcutItem completionHandler:completionHandler];
}

// @end

Manual Linking on Android

Add the following to app/build.gradle within the dependencies { ... } section

implementation project(':react-native-quick-actions')

Add import com.reactNativeQuickActions.AppShortcutsPackage; to your MainApplication.java

Also add new AppShortcutsPackage() within the

public List<ReactPackage> createAdditionalReactPackages() {
  return Arrays.<ReactPackage>asList(
    ...
  );
}

section of MainApplication.java

Usage

Adding static quick actions - iOS only

Add these entries into to your Info.plist file and replace the generic stuff (Action Title, .action, etc):

<key>UIApplicationShortcutItems</key>
<array>
  <dict>
    <key>UIApplicationShortcutItemIconType</key>
    <string>UIApplicationShortcutIconTypeLocation</string>
    <key>UIApplicationShortcutItemTitle</key>
    <string>Action Title</string>
    <key>UIApplicationShortcutItemType</key>
    <string>$(PRODUCT_BUNDLE_IDENTIFIER).action</string>
  </dict>
</array>

A full list of available icons can be found here:

https://developer.apple.com/design/human-interface-guidelines/ios/icons-and-images/system-icons/#quick-action-icons

Adding dynamic quick actions

In order to add / remove dynamic actions during application lifecycle, you need to import react-native-quick-actions and call either setShortcutItems to set actions or clearShortcutItems to clear.

import QuickActions from "react-native-quick-actions";

QuickActions.setShortcutItems([
  {
    type: "Orders", // Required
    title: "See your orders", // Optional, if empty, `type` will be used instead
    subtitle: "See orders you've made",
    icon: "Compose", // Icons instructions below
    userInfo: {
      url: "app://orders" // Provide any custom data like deep linking URL
    }
  }
]);

NOTE Currently android only supports a url key in userInfo. No other keys are supported. See #93 for more information.

To clear actions:

QuickActions.clearShortcutItems();

Icons

iOS

On iOS you can use the default icons provided by Apple, they're listed here: https://developer.apple.com/design/human-interface-guidelines/ios/icons-and-images/system-icons/#quick-action-icons

You can also use custom icons creating new Image set inside Image.xcassets on XCode. You'll need to define the 1x, 2x and 3x sizes.

Android

On Android you'll need to create an image file (use PNG) inside android/app/src/main/res/drawable.

Name the image with underscores, don't use hyphens.

Listening for quick actions

First, you'll need to make sure DeviceEventEmitter is added to the list of requires for React Native.

import { DeviceEventEmitter } from "react-native";

Use DeviceEventEmitter to listen for quickActionShortcut messages.

DeviceEventEmitter.addListener("quickActionShortcut", data => {
  console.log(data.title);
  console.log(data.type);
  console.log(data.userInfo);
});

To get any actions sent when the app is cold-launched using the following code:

import QuickActions from "react-native-quick-actions";

function doSomethingWithTheAction(data) {
  console.log(data.title);
  console.log(data.type);
  console.log(data.userInfo);
}

QuickActions.popInitialAction()
  .then(doSomethingWithTheAction)
  .catch(console.error);

Please note that on Android if android:launchMode is set to default value standard in AndroidManifest.xml, the app will be re-created each time when app is being brought back from background and it won't receive quickActionShortcut event from DeviceEventEmitter, instead popInitialAction will be receiving the app shortcut event.

Check if 3D Touch is supported

The following function will alert you if the user's device supports 3D Touch. Please note this project currently only supports iOS 9+ which means this code will not work on iOS devices running versions < 9.0.

import QuickActions from "react-native-quick-actions";

QuickActions.isSupported((error, supported) => {
  if (!supported) {
    console.log("Device does not support 3D Touch or 3D Touch is disabled.");
  }
});

License

Copyright (c) 2015 Jordan Byron (http://github.com/jordanbyron/)

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Comments
  • [Android] Use PersistableBundle to persist the whole ShortCutItem object

    [Android] Use PersistableBundle to persist the whole ShortCutItem object

    Fixes: #51

    Pro's:

    1. In memory list mShortcutItems is no longer needed.
    2. 'Type' is technically useless now but I think we should leave it to distinguish each shortcut.
    3. Method: getShortcutItem is no longer needed since the whole object is persisted, not just type.
    4. The whole object persists on COLD APP launch, now consistent with iOS version.

    Cons:

    • I believe we need to set the minimumSDK to 21 since PersistableBundle was only added then but because quick actions on Android are only supported on Android 7.1 (25) and after, this should be fine?

    This should cause no regression but I am not 100% sure whether iOS returns the whole object like this.

    Let me know what you think,

    Alberto Blanco

    opened by ItsNoHax 15
  • popInitialAction() is not working in iOS

    popInitialAction() is not working in iOS

    componentDidMount() { .. QuickActions.popInitialAction() .then((action) => console.log(action)) .catch(console.error); ..

    DeviceEventEmitter is ok. But I could not start cold-launch app with quick actions. log is null. How can I do ?

    opened by ozsirma 15
  • Runtime crash on iOS 8

    Runtime crash on iOS 8

    If I try to run an app on iOS 8 that uses this plugin, I crash immediately with this error:

    dyld: Symbol not found: _OBJC_CLASS_$_UIApplicationShortcutIcon
    
    opened by jjshammas 8
  • Support older iOS versions

    Support older iOS versions

    Calling UIApplicationLaunchOptionsShortcutItemKey on older iOS versions (iOS 8) causes a crash. I've added a simple check to be sure Application shortcuts is available.

    opened by remstos 8
  • android:launchMode=

    android:launchMode="singleTop" not receiving quickActionShortcut events

    As the docs state, it should be only android:launchMode="standard" that does not receive quickActionShortcut events from DeviceEventEmitter but I'm using singleTop and experiencing the same behaviour. Actually, it seems to be the case on Android no matter what launchmode I choose.

    Anybody else experiencing this?

    React Native 0.54.4 Device: Samsung Galaxy S8 OS: Android 8.0.0

    opened by JonasWho 6
  • fix: 3D Touch will be responsed twice when the app is cold-launched

    fix: 3D Touch will be responsed twice when the app is cold-launched

    like this:

    QuickActions.popInitialAction().then(quickActionsHandler);
    DeviceEventEmitter.addListener('quickActionShortcut', quickActionsHandler);
    

    quickActionsHandler will be called twice

    opened by greedbell 6
  • iOS. Xcode. No account for team

    iOS. Xcode. No account for team "468H2V2QVS".

    When I try to build my app by Xcode for iOS there is this error.

    No account for team "468H2V2QVS". (Add a new account in the Accounts preference pane or verify that your accounts have valid credentials.)
    
    No "iOS Development" signing certificate matching team ID "468H2V2QVS" with a private key was found.
    

    Why this happens to your library?

    opened by alpamys-qanybet 5
  • EventDeviceEmitter never called/always empty in console.log

    EventDeviceEmitter never called/always empty in console.log

    Hello, I'm trying to start a screen ( screen2 ) when I press the quickaction. Unfortunately I can't make this work out.

    In my screen I declare:

    QuickActions.setShortcutItems([ {
        type: "Orders",
        title: "See your orders"
        subtitle: "See orders you've made",
        icon: "Compose",
        userInfo: {
          url: "app://try"
        }
      }
    ]);
    

    and then, in componentDidMount I call (as you do in your demo):

    const subscription = DeviceEventEmitter.addListener(
          'quickActionShortcut', (data) => {this.setState({ eventTtile: data.title })};
          
        QuickActions.popInitialAction().then((data) => {
          if (data) {
            this.setState({ popAction: data.title });
          }
        }).catch(console.error)
    

    Unfortunately DeviceEventEmitter returns always undefined and the eventTitle is always empty in the state. I tried several things such as move the DeviceEventEmitter in other parts of the component, try to open the app in different ways, unistall and reinstall but nothing works.

    opened by davidmarinangeli 5
  • Installation issue: 'RNQuickActionManager.h' file not found

    Installation issue: 'RNQuickActionManager.h' file not found

    Hey, feel like this should be straightforward enough but I actually can't tell what I'm doing wrong.

    Followed the installation instructions as per the RN page you linked but I keep getting the error 'RNQuickActionManager.h' file not found in my import of #import "RNQuickActionManager.h" in my AppDelegate.m file.

    I did the manual install on iOS. Thanks in advance for any help or insight!

    opened by 404sand808s 5
  • iOS warning: [setShortcutItems()] UI API called on a background thread

    iOS warning: [setShortcutItems()] UI API called on a background thread

    I have an app where on iOS it opens in response to clicking a universal link. Then I immediately call setShortcutItems().

    I get this warning in the console, but no crash:

    Main Thread Checker: UI API called on a background thread: -[UIApplication setShortcutItems:]
    PID: 2685, TID: 895698, Thread name: (none), Queue name: com.facebook.react.RNQuickActionManagerQueue, QoS: 0
    

    I'm calling setShortcutItems() from inside javascript so I'm not sure what's causing it to run on a background thread.

    I'm thinking you might need to add a Dispatch.main.async on iOS for cases when it's running in a background thread.

    help wanted 
    opened by rsml 4
  • Unable to mock via jest

    Unable to mock via jest

    testing my code using this package is turning out to be seemingly impossible. I tried mocking the react-native-quick-actions module in jest via:

    jest.mock('react-native-quick-actions', () => {
      return {
        clearShortcutItems: jest.fn(),
        isSupported: jest.fn(),
        setShortcutItems: jest.fn(),
      }
    });
    

    That didn't work because it kept returning this error: TypeError: _reactNativeQuickActions2.default.popInitialAction is not a function which confuses me, because I can't find _reactNativeQuickActions2 anywhere in your code here.

    I tried this again, trying this instead:

    jest.mock('react-native-quick-actions', () => {
      return {
        QuickActions: {
          clearShortcutItems: jest.fn(),
          isSupported: jest.fn(),
          setShortcutItems: jest.fn(),
        },
      };
    });
    

    And same result.

    So my next approach was to try and mock the QuickActions object itself as a native module, like so:

    jest.mock('NativeModules', () => {
      return {
        DeviceEventEmitter: () => ({
          addListener: jest.fn(),
        }),
        RNQuickActionManager: () => ({
          initialAction: jest.fn(),
          isSupported: jest.fn(),
        }),
        QuickActions: {
          clearShortcutItems: jest.fn(),
          isSupported: jest.fn(),
          setShortcutItems: jest.fn(),
          popInitialAction: jest.fn(),
        },
      };
    });
    

    which also gave the same error: TypeError: _reactNativeQuickActions2.default.popInitialAction is not a function

    Then I tried mocking higher up in its own mocked module file:

    import { NativeModules } from 'react-native';
    
    NativeModules.QuickActions = {
      /**
       * An initial action will be available if the app was cold-launched
       * from an action.
       *
       * The first caller of `popInitialAction` will get the initial
       * action object, or `null`. Subsequent invocations will return null.
       */
      popInitialAction: jest.fn(),
    
      /**
       * Adds shortcut items to application
       */
      setShortcutItems: jest.fn(),
    
    
      /**
       * Clears all previously set dynamic icons
       */
      clearShortcutItems: jest.fn(),
    
      /**
       * Check if quick actions are supported
       */
      isSupported: jest.fn(),
    };
    

    which again threw the same error.

    I'm very stuck on where to go from here. If you have any recommendations, I would greatly appreciate it. Thanks.

    opened by Mookiies 4
  • Deleting quick actions is not reflecting on app update

    Deleting quick actions is not reflecting on app update

    Hi,

    I have removed all the usages and package. When we update the app, the quick actions are still shown without icons on the app. It's getting removed only when we do a fresh install of the app.

    Can someone help me fix this issue. Thanks

    opened by kekarot1 0
  • Deeplink not working on Webview

    Deeplink not working on Webview

    It is not working using deep link on Webview

    QuickActions.setShortcutItems([
       {
         type: "Search", // Required
         title: "Search Anything", // Optional, if empty, `type` will be used instead
         subtitle: "Search using Google",
         icon: "Search", // Icons instructions below
         userInfo: {
           url: "Https://google.com" // Provide any custom data like deep linking URL
         }
       }
     ]);
    

    When I press the Haptic Touch on app logo, it only opens the app

    opened by hanifmhd 0
  • popInitialAction() returning null on cold start.

    popInitialAction() returning null on cold start.

    componentDidMount(){ QuickActions.popInitialAction() .then(data => console.log(data) .catch(console.error); } }

    Return null in data. DeviceEventEmitter is working but on cold start it is not working.

    ReactNative - 0.60.5 react-native-quick-actions - 0.3.13

    opened by ShubhamBalgujar 3
  • Quick action -> custom icon issue

    Quick action -> custom icon issue

    Hi, I am facing an issue while setting up custom icon in iOS. Please let me know if anyone having the idea how to fix this .

    My code: QuickActions.setShortcutItems([ { type: "Invoices", title: "Invoices", icon: Platform.OS == "ios" ? "Invoices" : "invoices", userInfo: { url: "", }, },

    I have created Images.xcassets folder and added Invoices imageset but still no luck.

    opened by Pranay2019 4
Releases(0.3.13)
  • 0.3.13(Nov 24, 2019)

  • 0.3.12(Jun 23, 2019)

  • 0.3.11(May 27, 2019)

  • 0.3.10(Apr 6, 2019)

  • 0.3.9(Jan 13, 2019)

  • 0.3.8(Dec 12, 2018)

  • 0.3.7(Jun 23, 2018)

  • 0.3.6(Aug 15, 2017)

  • 0.3.5(Jun 9, 2017)

  • 0.3.3(May 24, 2017)

    Android

    Fixes an error that could be thrown when clearing shortcut items on Android devices that do not support shortcut items #37. Thanks to @AndrewJack for the fix!

    iOS

    No Changes

    Source code(tar.gz)
    Source code(zip)
  • 0.3.2(May 23, 2017)

  • 0.3.1(May 12, 2017)

    Android bug fixes

    Fixes an issue on Android 4.4 where an exception is thrown during startup due to undefined class ShortcutInfo being referenced in function createShortcutInfo()


    Again a big thanks to @huangmr for his continued work on our Android code 🤗

    Source code(tar.gz)
    Source code(zip)
  • 0.3.0(May 6, 2017)

    Adds support for Android 7+ 🤖

    Android Shortcut

    See the README for details and let us know if you encounter any issues. Big thanks to @huangmr for doing the heavy lifting to get this done.

    Breaking changes ⚠️

    popInitialAction now returns a promise.

    QuickActions.popInitialAction().then(doSomethingWithTheAction).catch(console.error)
    
    Source code(tar.gz)
    Source code(zip)
  • 0.2.1(Jan 18, 2017)

  • 0.2.0(Jan 12, 2017)

    Support React-Native versions 0.40 and higher. If you need to stay on older versions of RN please use version 0.1.5 of this package.

    Big thanks to @messense for working on this release.

    Source code(tar.gz)
    Source code(zip)
  • 0.1.5(Aug 1, 2016)

    Add QuickActions.isSupported function to determine if a device supports 3D Touch.

    QuickActions.isSupported(function(error, supported) {
      if (!supported) {
        console.log('Device does not support 3d touch or 3d touch is disabled.');
      }
    });
    

    Big thanks to @superandrew213 for the PR!

    Source code(tar.gz)
    Source code(zip)
  • 0.1.4(May 19, 2016)

  • 0.1.3(Feb 16, 2016)

  • 0.1.2(Feb 10, 2016)

  • 0.1.1(Jan 26, 2016)

  • 0.1.0(Oct 23, 2015)

    New Features

    Support for dynamic quick actions is here thanks to @grabbou :sparkles: :fireworks: :+1:

    See the Adding dynamic quick actions section of the README for more details.

    Breaking Changes from 0.0.x

    On the Objective-C side of things RNQuickAction.h has been renamed to RNQuickActionManager.h. Be sure to update any references in your AppDelegate.m file.

    In the JS world, popInitialGesture has been renamed to popInitialAction

    :heart: Jordan

    Source code(tar.gz)
    Source code(zip)
  • 0.0.3(Oct 16, 2015)

Owner
Jordan Byron
Developer with a passion for socially conscious software. Mountain biker, craft beer enthusiast, and proud dad.
Jordan Byron
A React Native Module to capture your home and recent app button on Android

react-native-home-pressed Getting started $ npm install react-native-home-pressed --save Automatic installation (no further setup required) $ react-na

Evan Gillogley 23 Dec 19, 2022
React Native authentication with the native Touch ID popup.

React Native Touch ID React Native Touch ID is a React Native library for authenticating users with biometric authentication methods like Face ID and

Naoufal Kadhom 1.4k Jan 3, 2023
Touch ID module for Android

react-native-touch-id-android Fingerprint identity for Android based on https://github.com/ajalt/reprint NOTES: current latest version: v0.1.x for RN

Kalon.Tech 31 Jun 13, 2022
An example repo for quickly creating an app, using Firebase, NextJS, Tailwind, Github Actions

Firestarter Firestarter is a way to quicky create your MVP web app. You just copy the code, then adapt to your project. It uses/will use Firebase, Nex

Martin Capodici 5 Feb 12, 2023
The SearchApi module gives you a general React Native interface to interact with the iOS Search API, Core Spotlight.

React Native Search Api module The SearchApi module gives you a general React Native interface to interact with the iOS Search API, Core Spotlight. Fo

Ombori Group 36 Dec 6, 2022
Alarm clock functionality for react native ios and android using react-native-push-notification and react-native-community/async-storage

react-native-simple-alarm Alarm clock functionality for react native ios and android built using react-native-push-notification and react-native-commu

Jordan Daniels 74 Jan 6, 2023
A barcode scanner component for react native - not maintained anymore - use react-native-camera

react-native-barcodescanner - not maintained anymore - use react-native-camera Version 0.4.0 of react-native-camera includes barcode scanning for andr

Idea Creation / E-GUMA 540 Oct 31, 2022
React Native CallKit utilises a brand new iOS 10 framework CallKit to make the life easier for VoIP developers using React Native.

React Native CallKit utilises a brand new iOS 10 framework CallKit to make the life easier for VoIP developers using React Native.

React Native WebRTC 120 Nov 21, 2022
React-native-wordle - A simple re-implementation of wordle using react native

react native wordle A simple re-implementation of wordle. guess the randomly cho

Ananthu P Kanive 16 Sep 23, 2022
React-native-esbuild: The fastest bundler for React Native

Fast bundler and dev server for react-native using esbuild

Joel Arvidsson 492 Dec 31, 2022
React Native Firebase Authentication Starter, manage user authentication in React Native app with firebase

Sign up and sign in screens for mobile using React Native. This is an example of how to use Firebase Authentication in React Native application, how to let users create an account or log in to an existing account.

Maor 14 Sep 8, 2022
react native tooltip like never before, using leading packages like react-native-reanimated v2, framer-motion, and @gorhom/portal

react-native-tooltiplize react native tooltip like never before, using leading packages like react-native-reanimated v2, framer-motion, and @gorhom/po

Muhammad Saeed 27 Dec 6, 2022
Native filesystem access for react-native

react-native-fs Native filesystem access for react-native IMPORTANT For RN < 0.57 and/or Gradle < 3 you MUST install react-native-fs at version @2.11.

Hagen Hübel 4.6k Jan 6, 2023
react-native native module for In App Purchase.

Announcement React Native IAP hook is out. You can see medium post on how to use it. The react-native-iap module hasn't been maintained well recently.

dooboolab 2.3k Jan 4, 2023
Native sensors access for react-native

react-native-sensor-manager Wrapper for react-native. Accelerometer, Gyroscope, Magnetometer, Orientation, Step Counter, Thermometer, LightSensor, and

Kevin Primicerio 230 Dec 15, 2022
React Native: Native Bottom Sheet - Text View

ReactNative: Native Bottom Sheet Text View (Android/iOS): Deprecated Due to time constraint, this library is deprecated and not maintained anymore, Y

Pranav Raj Singh Chauhan 22 Jul 4, 2021
React Native Unofficial SDK for integrating MercadoPago PX Native UIs.

React Native Unofficial SDK for integrating MercadoPago PX Native UIs. Getting Started To integrate this SDK you can check out our docs. Add your App

BlackBox Vision 96 Jan 1, 2023
React Native: Native Photo Editor

ReactNative: Native Photo Editor (Android/iOS) If this project has helped you out, please support us with a star ?? This library is a React Native br

Pranav Raj Singh Chauhan 1k Dec 25, 2022
🔥 A well-tested feature-rich modular Firebase implementation for React Native. Supports both iOS & Android platforms for all Firebase services.

React Native Firebase React Native Firebase is a collection of official React Native modules connecting you to Firebase services; each module is a lig

Invertase 10.5k Jan 1, 2023