onPress event not working on TouchableOpacity on Android - react-native

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.