Ionic 2 Native 3DTouch

admin

8 years ago

Ionic 2 Native 3DTouch– Install cordova-plugin-3dtouch plugin to use the native 3DTouch feature. 3DTouch is only supported in IOS platform. Here in this tutorial we are going to explain how you can use Ionic 2 Native 3DTouch in IOS.

Ionic 2 Native 3DTouch Example

You can install the 3DTouch plugin simply as below-

Installation

3DTouch Plugin Installation Syntax:

$ ionic plugin add cordova-plugin-3dtouch

3DTouch Example

After Installing the 3DTouch plugin you can use it. Here is an example of Native 3DTouch.-

Ionic 2 Native 3DTouch Example:

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)

 }
)

</threedeetouchquickaction>