onPress event not working on TouchableOpacity on Android

Question

Before I begin, I have checked out other common solutions to this problem, like importing TouchableOpacity from 'react-native' instead of 'react-gesture-handler' (I don't even have it installed), or changing z-index/absolute positioning. None of them work.

I'm a beginner in react native. I'm trying to follow along with a react native course, but I'm stuck on this issue. I'm using Expo on a real Android. I don't use emulators. Haven't tested on iOS as I don't have access to one. When I add onPress to TouchableOpacity, most of the time it gives feedback when clicked (opacity changes), but it won't fire the onPress event. Sometimes, however, it works. When I press on the right edge, sometimes the event fires. Here's an example:

index.js

import React from "react";
import Options from "./screens/Options";

export default function App() {
  return <Options />;
}

Options.js

import React from "react";
import { View, StyleSheet } from "react-native";
import RowItem from "../components/RowItem";
import Constants from "expo-constants";
import styled from "styled-components";
import colors from "../constants/colors";
import { Entypo } from "@expo/vector-icons";

const SSeparator = styled.View`
  background: ${colors.border};
  height: ${StyleSheet.hairlineWidth}px;
  margin-left: 20px;
`;
const SView = styled.View`
  margin-top: ${Constants.statusBarHeight}px;
`;

export default () => {
  return (
    <SView>
      <RowItem
        title="Themes"
        icon={
          <Entypo
            name="chevron-left"
            size={20}
            color={colors.blue}
            onPress={() => alert("click")}
          />
        }
      />
      <SSeparator />
    </SView>
  );
};

RowItem.js

import React from "react";
import { TouchableOpacity, Text } from "react-native";
import styled from "styled-components";
import colors from "../constants/colors";

const SText = styled.Text`
  font-size: 16px;
`;
const STouchableOpacity = styled.TouchableOpacity`
  margin: 16px 20px;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
`;

export default ({ title, icon, onPress }) => {
  return (
    <STouchableOpacity onPress={onPress}>
      <SText>{title}</SText>
      {icon}
    </STouchableOpacity>
  );
};

Any ideas?

Answer 1

can you try like this:

export default () => {
const testFunc = () =>{
 alert('test')
}
  return (
    <SView>
      <RowItem
        title="Themes"
        icon={
          <Entypo
            name="chevron-left"
            size={20}
            color={colors.blue}
            onPress={testFunc}
          />
        }
      />
      <SSeparator />
    </SView>
  );
};

and then :

<STouchableOpacity onPress={()=>onPress()}>
      <SText>{title}</SText>
      {icon}
    </STouchableOpacity>

Answer 2

Okay, so I finally noticed the mistake, and I feel ashamed for not noticing it. I kept reading the code but I couldn't see the obvious.

I mistakenly copied the onPress event into the icon instead of putting it directly inside RowItem.

Instead of this:

<RowItem
        title="Themes"
        icon={
          <Entypo
            name="chevron-left"
            size={20}
            color={colors.blue}
            onPress={() => alert("click")}
          />
        }
      />

It should be this:

<RowItem
        title="Themes"
        handlePress={() => alert("test")}
        icon={<Entypo name="chevron-left" size={20} color={colors.blue} />}
      />

And inside RowItem.js:

export default ({ title, icon, handlePress }) => {
  return (
    <STouchableOpacity onPress={() => handlePress()}>
      <Text>{title}</Text>
      {icon}
    </STouchableOpacity>
  );
};

And now the app works as intended.