React Native TouchableOpacity is working only on very few area parts

Question

I am using a view as Floating Action Button. The same page has a scrollview, I am not worried about the position or the styling.

Expected behavior :- The View which is wrapped with a Should response to the click event at every points of the button.

Current Behaviour:- I tried studying the behavior with the touch position marker turned, and randomly the button works if clicked at 3-4 positions. AFAIK, there's no pattern to it.

Here's the code of the Floating Button

    const FloatingButton = () => {
  return (
      <View
        style={{
          alignItems: "center",
          justifyContent: "center",
          width: 60,
          elevation: 3,
          position: "absolute",
          bottom: 20,
          right: 20,
          height: 60,
          backgroundColor: "#FFD343",
          borderRadius: 100,
        }}
      >
        {/* <Icon name='plus' size={30} color='#01a699' /> */}
        <Text
          style={{
            fontWeight: "bold",
            fontSize: 16,
          }}
        >
          {">"}
        </Text>
      </View>
  );
};

Here's how I am using it in one of the screens

<TouchableOpacity onPress={handleFab()}>
  <FloatingButton/>
</TouchableOpacity>
 

what else I have tried:-

• Tried using the TouchableOpacity directly inside the FloatingButton and passing the click Handler as a prop