No feedback after pressing React native onPress

Question

I have a button component with a simple onPress

const Press = () => {

    return (
        <Button
            onPress={() => {
                Alert.alert('You tapped the button!');
            }}
            title="Press Me"
        />
    )

}

which i then import in another component as < Press /> but the onPress function doesn't work, whether as an alert, console.log or navigate function

const Anothercomp = (props: any) => {
const { item, index, scrollX } = props;
  const inputRange = [(index - 1) * width, index * width, (index + 1) * width];
  const scale = scrollX.interpolate({
    inputRange,
    outputRange: [0.4, 1, 0.4],
    extrapolate: "clamp"
  });

  const postion = scrollX.interpolate({
    inputRange,
    outputRange: [-230, 1, 0],
    extrapolate: "clamp"
  });
  return (
    <View
      style={{
        width,
        marginTop: 40,
        alignItems: "center"
      }}
    >
      <SharedElement id={`item.${item.id}.photo`}>
        <Animated.Image
          source={item.image}
          style={[
            styles.imageContainer,
            {
              transform: [
                {
                  scale
                }
              ],
              marginLeft: postion
            }
          ]}
          resizeMode="contain"
        />
      </SharedElement>
      <View
        style={{
          backgroundColor: "#fff",
          alignItems: "center",
          borderRadius: 20,
          padding: 15,
          width: width - 70,
        }}
      >
       <View
          style={{
            marginTop: 10,
            flexDirection: "row",
            alignItems: "center"
          }}
        >
            <Press/>
            <View style={styles.add} >
              <Typography color="#ccc" text="-" size={18} />
            </View>
        </View>
    </View>
  );
};

I have tried to use react-native-gesture-handler as shown below but still nothing happens

import React from 'react'
import {Text, Alert} from 'react-native'
import { Gesture, GestureDetector } from 'react-native-gesture-handler';

const Press = () => {
    const singleTap = Gesture.Tap()
  .maxDuration(250)
  .onStart(() => {
    Alert.alert('Single tap!');
  });

const doubleTap = Gesture.Tap()
  .maxDuration(250)
  .onStart(() => {
    Alert.alert('Double tap!');
  });

return (
  <GestureDetector gesture={Gesture.Exclusive(doubleTap, singleTap)}>
    <Text>gesture</Text>
  </GestureDetector>
)}

export default Press

Full source code can be found here https://snack.expo.dev/@umarabdullahi/234foods

react-native-shared-element and react-navigation-shared-element are the packages i am experimenting with, can they cause this?

If you're going through the snack, the function is at src/components/Press.tsx this is then called in src/components/FoodItem.tsx which is in turn called from src/screens/Details.tsx

Answer 1

Press log something on your onPress method and check is it work. It can be a different problem.

Answer 2

I have tried to run the code on my device and it seems to work fine. As the others have already mentioned try to print out a console.log() and share the error, it might be that the problem is related to a different issue.

Answer 3

The style of the following after <Press/> is not visible. Is it possible that it has an absolute position and actually overlaps the button and so cancels its onPress function?

Answer 4

The issue is not your Press component or the onPress function.

Your issue is located in FoodItem. You are creating a View with position absolute and a fixed height at the bottom of the container which causes your Press component (and every other component that overlaps with the absolute positioned view) to be placed behind this view. All touch events will be captured by the View which is supposed to be the orange background.

Hence, the root cause is the following view in FoodItem.

 <View style={[styles.bottom, { backgroundColor: item.color }]} />

The easiest solution would be to provide a higher zIndex for the view that contains the pressable components or in this case it is sufficient to add a negative zIndex to `styles.bottom.

bottom: {
    width,
    position: "absolute",
    bottom: 0,
    height: "70%",
    zIndex: -10
  },

Here is an updated snack. Notice that I have only tested this on Android.