3D Touch

Improve this doc

The 3D Touch plugin adds 3D Touch capabilities to your Cordova app.

Requires Cordova plugin: cordova-plugin-3dtouch. For more info, please see the 3D Touch plugin docs.

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

Installation

1. Install the Cordova and Ionic Native plugins:
   

   $ ionic cordova plugin add cordova-plugin-3dtouch
   $ npm install --save @ionic-native/three-dee-touch@4
   

2. Add this plugin to your app's module

Supported platforms

• iOS

Usage

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

import { ThreeDeeTouch, ThreeDeeTouchQuickAction, ThreeDeeTouchForceTouch } from '@ionic-native/three-dee-touch';

constructor(private threeDeeTouch: ThreeDeeTouch) { }

...

this.threeDeeTouch.isAvailable().then(isAvailable => console.log('3D Touch available? ' + isAvailable));

this.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'
  }
];

this.threeDeeTouch.configureQuickActions(actions);

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

 }
)

Instance 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.

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.

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

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

onHomeIconPressed()

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

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

ThreeDeeTouchForceTouch