Need help upgrading to Ionic Framework 4.0? Get assistance with our Enterprise Migration Services EXPLORE NOW

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

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.

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 string

Type that can be used in the onHomeIconPressed callback

(optional)
title string

Title

subtitle string

Subtitle

(optional)
iconType string

Icon type. Case insensitive

(optional)
iconTemplate string

Icon template

(optional)

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