3DTouch

Improve this doc

$ ionic plugin add cordova-plugin-3dtouch

Repo: https://github.com/EddyVerbruggen/cordova-plugin-3dtouch

Supported platforms

Usage

Please do refer to the original plugin's repo for detailed usage. The usage example here might not be sufficient.

import { ThreeDeeTouch } from 'ionic-native';

// import for type completion on variables
import { ThreeDeeTouchQuickAction, ThreeDeeTouchForceTouch } from 'ionic-native';
...

ThreeDeeTouch.isAvailable().then(isAvailable => console.log("3D Touch available? " + isAvailable));

ThreeDeeTouch.watchForceTouches()
  .subscribe(
    (data: ThreeDeeTouchForceTouch) => {
      console.log("Force touch %" + data.force);
      console.log("Force touch timestamp: " + data.timestamp);
      console.log("Force touch x: " + data.x);
      console.log("Force touch y: " + data.y);
    }
  );


let actions: Array<ThreeDeeTouchQuickAction> = [
  {
    type: 'checkin',
    title: 'Check in',
    subtitle: 'Quickly check in',
    iconType: 'Compose'
  },
  {
    type: 'share',
    title: 'Share',
    subtitle: 'Share like you care',
    iconType: 'Share'
  },
  {
    type: 'search',
    title: 'Search',
    iconType: 'Search'
  },
  {
    title: 'Show favorites',
    iconTemplate: 'HeartTemplate'
  }
];
ThreeDeeTouch.configureQuickActions(actions);

ThreeDeeTouch.onHomeIconPressed().subscribe(
 (payload) => {
   // returns an object that is the button you presed
   console.log('Pressed the ${payload.title} button')
   console.log(payload.type)

 }
)

Static Members

isAvailable()

You need an iPhone 6S or some future tech to use the features of this plugin, so you can check at runtime if the user’s device is supported.

Returns: Promise<boolean> returns a promise that resolves with a boolean that indicates whether the plugin is available or not

watchForceTouches()

You can get a notification when the user force touches the webview. The plugin defines a Force Touch when at least 75% of the maximum force is applied to the screen. Your app will receive the x and y coordinates, so you have to figure out which UI element was touched.

Returns: Observable<ThreeDeeTouchForceTouch> Returns an observable that sends a ThreeDeeTouchForceTouch object

configureQuickActions(type, title, subtitle, iconType, iconTemplate)

setup the 3D-touch actions, takes an array of objects with the following

Param Type Details
type string

(optional) A type that can be used onHomeIconPressed callback

title string

Title for your action

subtitle string

(optional) A short description for your action

iconType string

(optional) Choose between Prohibit, Contact, Home, MarkLocation, Favorite, Love, Cloud, Invitation, Confirmation, Mail, Message, Date, Time, CapturePhoto, CaptureVideo, Task, TaskCompleted, Alarm, Bookmark, Shuffle, Audio, Update

iconTemplate string

(optional) Can be used to provide your own icon

onHomeIconPressed()

When a home icon is pressed, your app launches and this JS callback is invoked.

Returns: Observable<any> returns an observable that notifies you when he user presses on the home screen icon

enableLinkPreview()

Enable Link Preview. UIWebView and WKWebView (the webviews powering Cordova apps) don’t allow the fancy new link preview feature of iOS9.

disableLinkPreview()

Disabled the link preview feature, if enabled.

ThreeDeeTouchQuickAction

Param Type Details
type
(optional)
string

Type that can be used in the onHomeIconPressed callback

title string

Title

subtitle
(optional)
string

Subtitle

iconType
(optional)
string

Icon type. Case insensitive

iconTemplate
(optional)
string

Icon template

ThreeDeeTouchForceTouch

Param Type Details
force number

Touch force

timestamp number

Timestamp of action

x number

X coordinate of action

y number

Y coordinate of action

API

Native

General