I ended up using onPressOut, and I assume onPressIn also works as @Tushar suggested.
on _layout.js
import { Stack, router } from "expo-router";
import { Text, StyleSheet, TouchableOpacity } from "react-native";
<Stack
screenOptions={{
headerTintColor: "#f0f",
...
headerRight: () => (
<TouchableOpacity onPressOut={() => router.push("/about")}>
<Text style={styles.buttonText}>Help</Text>
</TouchableOpacity>
),
}}
/>
any other page in case I need a different action on the buttonText
products.js
<Stack.Screen
options={{
headerTintColor: "#a5c",
....
headerRight: () => (
<TouchableOpacity onPressOut={() => router.push("/new")}>
<Text style={styles.buttonText}>New Product</Text>
</TouchableOpacity>
),
}}
/>
This way I could still use expo version 52 package.json
{
"dependencies": {
"@expo/vector-icons": "^14.0.2",
"@react-native-community/datetimepicker": "8.2.0",
"@react-native-picker/picker": "2.9.0",
"expo": "~52.0.41",
"expo-camera": "~16.0.10",
"expo-constants": "~17.0.8",
"expo-font": "~13.0.4",
"expo-linking": "~7.0.5",
"expo-router": "~4.0.19",
"expo-splash-screen": "~0.29.22",
"expo-status-bar": "~2.0.1",
"nativewind": "^2.0.11",
"react": "18.3.1",
"react-native": "0.76.7",
"react-native-dotenv": "^3.4.11",
"react-native-gesture-handler": "~2.20.2",
"react-native-safe-area-context": "4.12.0",
"react-native-screens": "~4.4.0"
},
}