onPress event not working on Android

[AlexDiMaria]

import {Button} from "react-native-paper";
import TinderCard from "react-tinder-card";

<TinderCard className="pressable">
    <Button
        onPress={() => {
            console.log("Ciao")
        }}
    >
        <Text>
            Ciao
        </Text>
    </Button>
</TinderCard>

I'm trying to create a button inside a card with this simple snippet code on React Native.

When I do test with an iOS emulator all it's working fine, but on Android the onPress event is not recognize... What i've to do?

[Matthew3dg]

import {Button} from "react-native-paper";
import TinderCard from "react-tinder-card";

<TinderCard className="pressable">
    <Button
        onPress={() => {
            console.log("Ciao")
        }}
    >
        <Text>
            Ciao
        </Text>
    </Button>
</TinderCard>

I'm trying to create a button inside a card with this simple snippet code on React Native.

When I do test with an iOS emulator all it's working fine, but on Android the onPress event is not recognize... What i've to do?

I have the same problem. Have you found a solution?

[nihilanthmf]

Got the same issue, has anybody solved it yet?

[nihilanthmf]

Hey guys I've figured it out! Here is the code, this is the exact same thing as the TinderCard (code is literally stolen form this repo) but I've made a small change. You can now pass a function to the TinderCard component called onPress that is executed when you click on a card

import React from 'react'; import {View, PanResponder, Dimensions} from 'react-native'; import {useSpring, animated} from '@react-spring/native'; const {height, width} = Dimensions.get('window');

const settings = { maxTilt: 25, // in deg rotationPower: 50, swipeThreshold: 1, // need to update this threshold for RN (1.5 seems reasonable...?) };

// physical properties of the spring const physics = { touchResponsive: { friction: 50, tension: 2000, }, animateOut: { friction: 30, tension: 400, }, animateBack: { friction: 10, tension: 200, }, };

let gestureGlobal;

const pythagoras = (x, y) => { return Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2)); };

const animateOut = async (gesture, setSpringTarget) => { const diagonal = pythagoras(height, width); const velocity = pythagoras(gesture.vx, gesture.vy); const finalX = diagonal gesture.vx; const finalY = diagonal gesture.vy; const finalRotation = gesture.vx * 45; const duration = diagonal / velocity;

setSpringTarget({ x: finalX, y: finalY, rot: finalRotation, // set final rotation value based on gesture.vx config: {duration: duration}, });

// for now animate back return await new Promise(resolve => setTimeout(() => { resolve(); }, duration), ); };

const animateBack = setSpringTarget => { // translate back to the initial position setSpringTarget({x: 0, y: 0, rot: 0, config: physics.animateBack}); };

const getSwipeDirection = speed => { if (Math.abs(speed.x) > Math.abs(speed.y)) { return speed.x > 0 ? 'right' : 'left'; } else { return speed.y > 0 ? 'down' : 'up'; } };

// must be created outside of the TinderCard forwardRef const AnimatedView = animated(View);

const TinderCard = React.forwardRef( ( { flickOnSwipe = true, children, onSwipe, onCardLeftScreen, className, onPress, preventSwipe = [], }, ref, ) => { const [{x, y, rot}, setSpringTarget] = useSpring(() => ({ x: 0, y: 0, rot: 0, config: physics.touchResponsive, }));

React.useImperativeHandle(ref, () => ({
  async swipe(dir = 'right') {
    if (onSwipe) onSwipe(dir);
    const power = 1.3;
    const disturbance = (Math.random() - 0.5) / 2;
    if (dir === 'right') {
      await animateOut({vx: power, vy: disturbance}, setSpringTarget);
    } else if (dir === 'left') {
      await animateOut({vx: -power, vy: disturbance}, setSpringTarget);
    } else if (dir === 'up') {
      await animateOut({vx: disturbance, vy: power}, setSpringTarget);
    } else if (dir === 'down') {
      await animateOut({vx: disturbance, vy: -power}, setSpringTarget);
    }
    if (onCardLeftScreen) onCardLeftScreen(dir);
  },
}));

const handleSwipeReleased = React.useCallback(
  async (setSpringTarget, gesture) => {
    // Check if this is a swipe
    if (
      Math.abs(gesture.vx) > settings.swipeThreshold ||
      Math.abs(gesture.vy) > settings.swipeThreshold
    ) {
      const dir = getSwipeDirection({x: gesture.vx, y: gesture.vy});

      if (flickOnSwipe) {
        if (!preventSwipe.includes(dir)) {
          if (onSwipe) onSwipe(dir);

          await animateOut(gesture, setSpringTarget);
          if (onCardLeftScreen) onCardLeftScreen(dir);
          return;
        }
      }
    }
    gestureGlobal = gesture;

    // Card was not flicked away, animate back to start
    animateBack(setSpringTarget);
  },
  [flickOnSwipe, onSwipe, onCardLeftScreen, preventSwipe],
);

const panResponder = React.useMemo(
  () =>
    PanResponder.create({
      // Ask to be the responder:
      onStartShouldSetPanResponder: (evt, gestureState) => true,
      onStartShouldSetPanResponderCapture: (evt, gestureState) => true,
      onMoveShouldSetPanResponder: (evt, gestureState) => true,
      onMoveShouldSetPanResponderCapture: (evt, gestureState) => true,

      onPanResponderGrant: (evt, gestureState) => {
        // The gesture has started.
        // Probably wont need this anymore as postion i relative to swipe!
        setSpringTarget({
          x: gestureState.dx,
          y: gestureState.dy,
          rot: 0,
          config: physics.touchResponsive,
        });
      },
      onPanResponderMove: (evt, gestureState) => {
        // use guestureState.vx / guestureState.vy for velocity calculations
        // translate element
        let rot = ((300 * gestureState.vx) / width) * 15; // Magic number 300 different on different devices? Run on physical device!
        rot = Math.max(Math.min(rot, settings.maxTilt), -settings.maxTilt);
        setSpringTarget({
          x: gestureState.dx,
          y: gestureState.dy,
          rot,
          config: physics.touchResponsive,
        });
      },
      onPanResponderTerminationRequest: (evt, gestureState) => {
        return true;
      },
      onPanResponderRelease: (evt, gestureState) => {
        // The user has released all touches while this view is the
        // responder. This typically means a gesture has succeeded
        // enable
        handleSwipeReleased(setSpringTarget, gestureState);
        if (Math.abs(gestureGlobal.vx) <= 0.005) {
          onPress();
        }
      },
    }),
  [],
);

return (
  <AnimatedView
    {...panResponder.panHandlers}
    style={{
      transform: [
        {translateX: x},
        {translateY: y},
        {rotate: rot.interpolate(rot => `${rot}deg`)},
      ],
    }}>
    {children}
  </AnimatedView>
);

}, );

// module.exports = TinderCard export default TinderCard;