Instagram-like force touch popup modal

Question

I'm trying to replicate force touch functionality of Instagram where

1) Put your finger on an image and it gets a little darker (hover effect, easy)

2) Press a little harder and a popup modal preview of the content appears

3) Press even harder and it expands the modal to full screen

I'm having problems with Ionic 4/Cordova "3d touch" plugin where it doesn't register the force-touch if I regular-touch the screen first.

In order words, step 2 above does not trigger the force touch when listening via threeDeeTouch.watchForceTouches()

In order for the listener to trigger I have to go into the touch with force initially, with no delay between "touching" the screen and "pressing" the screen. If I touch the screen but do not press it, I can no longer press it to trigger force touch without lifting my finger first.

I'm testing on a real device, iPhone X

How is it possible to workaround this issue to replicate the force touch in Instagram?

Heidyheifer

Thanks but I saw this already. It deals with long press gestures, there is no mention of 3d/force touch – Heidyheifer

Seems like threeDeeTouch.watchForceTouches() only triggers when at least 75% of the maximum force is applied to the screen so I believe this plugin does not support your 2º step... Docs: ionicframework.com/docs/v3/native/3d-touch/#watchForceTouches – Robertoroberts

Why not just change the percentage for forceTouch in the plugin to lower value? github.com/EddyVerbruggen/cordova-plugin-3dtouch/blob/… – Tumbling

Answer 1

Me too tried the same in ionic cordova application , try to view this below for further proceed

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.

i Have tried this syntax and have achieved it by downgrading the plugin version along with below codeset

    @implementation ForceTouchRecognizer

double lastEvent = 0;

- (void) touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {
    for (UITouch* touch in touches) {
        CGFloat percentage = (touch.force / touch.maximumPossibleForce) * 100;
        if (percentage >= 75) {
            // let's not flood the callback with multiple hits within the same second
            NSTimeInterval ts = touch.timestamp;
            int diff = ts - lastEvent;
            if (diff > 0) {
                lastEvent = ts;
                CGPoint coordinates = [touch locationInView:self.view];
                NSMutableDictionary *result = [[NSMutableDictionary alloc] initWithObjectsAndKeys:
                                               [NSString stringWithFormat:@"%d", (int)percentage]   , @"force",
                                               [NSString stringWithFormat:@"%d", (int)coordinates.x], @"x",
                                               [NSString stringWithFormat:@"%d", (int)coordinates.y], @"y",
                                               // no need to use the touch.timestamp really since it's simply 'now'
                                               [NSString stringWithFormat:@"%f", [[NSDate date] timeIntervalSince1970]], @"timestamp",
                                               nil];

                CDVPluginResult *pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_OK messageAsDictionary:result];
                pluginResult.keepCallback = [NSNumber numberWithBool:YES];
                [_commandDelegate sendPluginResult:pluginResult callbackId:_callbackId];
            }
        }
    }
}
@end

Whitcher