79582382

Date: 2025-04-19 12:28:11
Score: 1
Natty:
Report link

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"
  },
}
Reasons:
  • Blacklisted phrase (0.5): I need
  • Long answer (-1):
  • Has code block (-0.5):
  • User mentioned (1): @Tushar
  • Self-answer (0.5):
  • Low reputation (0.5):
Posted by: Alberto Sanchez