react native - Expo, Why can't I use router in _layout? - Stack Overflow

I try to implement a settings button in my header from the _layout, using an icon I made an button to redirect to "/settings", however it only works in browsers, when I try it in android, nothing happens.

import { Redirect, Stack, useRouter } from "expo-router";
import { TouchableOpacity } from "react-native";
import { Ionicons } from "@expo/vector-icons";

export default function RootLayout() {
  const router = useRouter();

  // Define the redirect function inside the component
  const redirect = () => {
    console.log("Navigating to settings");
    router.navigate("/settings");
  };
  
  return  (
    <Stack 
      screenOptions={{
        headerStyle: {
          backgroundColor: 'lightblue',
        },
        headerTitleStyle: {
          fontWeight: 'bold',
          color: 'white',
        },
        title: 'Weerklank',
        headerRight: () => (
          <TouchableOpacity
            onPress={redirect}
            style={{ marginRight: 15 }}
          >
            <Ionicons name="settings" size={24} color="white" />
          </TouchableOpacity>
        )
      }}>
      <Stack.Screen name="settings" 
        options={{
          title: 'Settings', // Override the title for the settings screen
      }}
    />
    </Stack>
  );
}

I try to implement a settings button in my header from the _layout, using an icon I made an button to redirect to "/settings", however it only works in browsers, when I try it in android, nothing happens.

import { Redirect, Stack, useRouter } from "expo-router";
import { TouchableOpacity } from "react-native";
import { Ionicons } from "@expo/vector-icons";

export default function RootLayout() {
  const router = useRouter();

  // Define the redirect function inside the component
  const redirect = () => {
    console.log("Navigating to settings");
    router.navigate("/settings");
  };
  
  return  (
    <Stack 
      screenOptions={{
        headerStyle: {
          backgroundColor: 'lightblue',
        },
        headerTitleStyle: {
          fontWeight: 'bold',
          color: 'white',
        },
        title: 'Weerklank',
        headerRight: () => (
          <TouchableOpacity
            onPress={redirect}
            style={{ marginRight: 15 }}
          >
            <Ionicons name="settings" size={24} color="white" />
          </TouchableOpacity>
        )
      }}>
      <Stack.Screen name="settings" 
        options={{
          title: 'Settings', // Override the title for the settings screen
      }}
    />
    </Stack>
  );
}

• react-native
• expo
• expo-router

Share Improve this question Follow edited Feb 4 at 1:46 Drew Reese 204k1818 gold badges245245 silver badges273273 bronze badges asked Feb 4 at 0:08 kersjan14kersjan14 122 bronze badges 1

• If router.navigate is not working on Android, try using router.push instead. It behaves similarly but might work better on Android: – nazmul Commented Feb 4 at 4:58

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

Found the solution, TouchableOpacity doens't behave well on android when using OnPress, so the solution is to use OnPressIn

headerRight: () => (
  <TouchableOpacity
    onPressIn={redirect}
    style={{ marginRight: 15 }}
  >
    <Ionicons name="settings" size={24} color="white" />
  </TouchableOpacity>
)

This did the trick and now it works.