WARN The `redirect` prop on <Screen /> is deprecated and will be removed. Please use `router.redirect` #834

gaetan224 · 2023-08-10T10:50:41Z

Which package manager are you using? (Yarn is recommended)

yarn

Summary

from the example from expo router docs
when running the for dynamic route

import { Stack, useLocalSearchParams, useRouter } from 'expo-router';

export default function Details() {
  const router = useRouter();
  const params = useLocalSearchParams();

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Stack.Screen
        options={{
          title: params.name,
        }}
      />
      <Text
        onPress={() => {
          router.setParams({ name: 'Updated' });
        }}>
        Update the title
      </Text>
    </View>
  );
}```


i ahev the following error

 WARN  The `redirect` prop on <Screen /> is deprecated and will be removed. Please use `router.redirect` instead
    at Screen (http://192.168.1.6:8081/index.ts.bundle//&platform=ios&dev=true&hot=false&lazy=true:146799:20)
    at RCTView
    at View (http://192.168.1.6:8081/index.ts.bundle//&platform=ios&dev=true&hot=false&lazy=true:40431:43)
    at View



### Minimal reproducible example

import { View, Text } from 'react-native';
import { Stack, useLocalSearchParams, useRouter } from 'expo-router';

export default function Details() {
  const router = useRouter();
  const params = useLocalSearchParams();

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Stack.Screen
        options={{
          title: params.name,
        }}
      />
      <Text
        onPress={() => {
          router.setParams({ name: 'Updated' });
        }}>
        Update the title
      </Text>
    </View>
  );
}

The text was updated successfully, but these errors were encountered:

marklawlor · 2023-08-10T12:56:18Z

Please provide a full reproduction. Creating a new project npx create-expo-app@latest --template tabs@49 and updating app/(tabs)/index to the "Minimal reproducible example" does not reproduce the issue.

I'm going to close this issue, but if you can provide information we can reopen it again.

sync · 2023-08-12T05:46:52Z

I had a similar issue on my side and what caused it was this code:

<Stack.Screen
        options={{
          title: params.name,
        }}
      />

If you remove it the warning will go away (not a solution I know)

sync · 2023-08-12T07:43:54Z

I think issue is here perhaps

router/packages/expo-router/src/views/Screen.tsx

Line 49 in f69e31c

useDeprecated(

if you look at the code, if you do this for example:

<Stack.Screen
       options={{
         title: params.name,
       }}
     />

Then deprecated would end up being undefined because redirect would not be set

    useDeprecated(
      "The `redirect` prop on <Screen /> is deprecated and will be removed. Please use `router.redirect` instead",
      redirect
    );

Then looking at useDepecated code here:

export function useDeprecated(
  message: string,
  guard: unknown = true,
  key = message
) {
  return useWarnOnce(key, guard, `Expo Router: ${message}`);
}

the guard would end up being set to true because of the default value guard: unknown = true

Unless I am completely wrong, anyone using stack.screen would end up with a warning, should this issue be reopened ?

PR here: expo/expo#23932

sync · 2023-08-12T07:46:43Z

This code was introduced with the 2.0.1 release, by default @49 template is using expo-router 2.0.0

pdandradeb · 2023-08-16T21:36:39Z

Unless I am completely wrong, anyone using stack.screen would end up with a warning, should this issue be reopened ?

@sync yes, I can confirm that just using <Stack.Screen options={{ title: '' }} /> without redirect triggers this warning.

Reverting to 2.0.0 "fixed" it.

sync · 2023-08-16T22:18:36Z

yes waiting for someone to review this: expo/expo#23932 :-)

…when using Screen (#23932) # Why WARN The redirect prop on <Screen /> is deprecated and will be removed. Please use router.redirect, fixes expo/router#834 I think issue is here perhaps https://github.com/expo/router/blob/f69e31c84a83ceb6d678dfb8aeed708974d301a8/packages/expo-router/src/views/Screen.tsx#L49 if you look at the code, if you do this for example: ``` <Stack.Screen options={{ title: params.name, }} /> ``` Then deprecated prop would end up being `undefined` because `redirect` would not be set ``` useDeprecated( "The `redirect` prop on <Screen /> is deprecated and will be removed. Please use `router.redirect` instead", redirect ); ``` Then looking at `useDepecated` code here: ``` export function useDeprecated( message: string, guard: unknown = true, key = message ) { return useWarnOnce(key, guard, `Expo Router: ${message}`); } ``` the `guard` would end up being set to `true` because of the default value `guard: unknown = true` # How Avoid sending an undefined `redirect` prop to the guard # Test Plan Run updated code and make sure warning is gone # Checklist  - [x] Documentation is up to date to reflect these changes (eg: https://docs.expo.dev and README.md). - [x] Conforms with the [Documentation Writing Style Guide](https://github.com/expo/expo/blob/main/guides/Expo%20Documentation%20Writing%20Style%20Guide.md) - [x] This diff will work correctly for `npx expo prebuild` & EAS Build (eg: updated a module plugin). --------- Co-authored-by: Evan Bacon <baconbrix@gmail.com> Co-authored-by: Lucas Caton <lucascaton@gmail.com>

zackify · 2023-08-30T23:28:25Z

also confirmed this exists, thanks for the pr

animaonline · 2023-09-11T18:42:20Z

When can we expect a fix?

Dundyne · 2023-09-12T09:25:32Z

Same issue here, pretty annoying

Pcummings · 2023-09-12T15:12:44Z

Agree - let's get it fixed

In my case it is caused by:

<Stack.Screen
      options={{
          headerShown: false,
 }} />

sahiljaidka224 · 2023-09-13T08:12:36Z

Can confirm this is still a problem, v 2.0.5

matthewtesimale · 2023-09-14T04:34:38Z

Same! Still annoying. It wasn't showing from a project I spun up a few days ago... But now it is showing.

branaust · 2023-09-14T23:43:36Z

on expo router 2.0.5 I'm also seeing the issue. I was declaring screen options inline:

return ( <Stack.Screen options={{ headerShown: true, title: "ELLO PUPPET" }} /> ... )

Prior to upgrading, I was able to declare my screen options like this in my component, that is no longer the case

After removing this, and setting the screen options in the declared stack, the warning went away.

Pcummings · 2023-09-15T00:09:24Z

on expo router 2.0.5 I'm also seeing the issue. I was declaring screen options inline:

`return (

<Stack.Screen options={{ headerShown: true, title: "ELLO PUPPET" }} />

...

)

`

Prior to upgrading, I was able to declare my screen options like this in my component, that is no longer the case

After removing this, and setting the screen options in the declared stack, the warning went away.

Can you show an example of how you do that?

branaust · 2023-09-15T02:16:56Z

on expo router 2.0.5 I'm also seeing the issue. I was declaring screen options inline:
return ( <Stack.Screen options={{ headerShown: true, title: "ELLO PUPPET" }} /> ... )
Prior to upgrading, I was able to declare my screen options like this in my component, that is no longer the case
After removing this, and setting the screen options in the declared stack, the warning went away.

Can you show an example of how you do that?

in (auth)/_layout.tsx

import { Stack } from "expo-router";
import React from "react";

export default function AuthLayout() {
  return (
    <Stack>
      <Stack.Screen
        name="login"
        options={{ headerShown: true, title: "Login" }}
      />
    </Stack>
  );
}

roiiiu · 2023-09-17T13:59:19Z

on expo router 2.0.5 I'm also seeing the issue. I was declaring screen options inline:
return ( <Stack.Screen options={{ headerShown: true, title: "ELLO PUPPET" }} /> ... )
Prior to upgrading, I was able to declare my screen options like this in my component, that is no longer the case
After removing this, and setting the screen options in the declared stack, the warning went away.

Can you show an example of how you do that?

in (auth)/_layout.tsx
import { Stack } from "expo-router";
import React from "react";

export default function AuthLayout() {
  return (
    <Stack>
      <Stack.Screen
        name="login"
        options={{ headerShown: true, title: "Login" }}
      />
    </Stack>
  );
}

solved!

joy7426 · 2023-09-21T20:38:48Z

Remove this chunk of code from the screen

<Stack.Screen screenOptions={{ headerShown: false }} />

Now you can use this screen configuration in _layout.

edmbn · 2023-09-22T03:20:00Z

Remove this chunk of code from the screen
<Stack.Screen screenOptions={{ headerShown: false }} />
Now you can use this screen configuration in _layout.

This shouldn't be the solution since sometimes there is logic you want to apply from the screen. For example, you may want to modify the headerRight component based on some conditions on the screen (loading data, etc.).

https://docs.expo.dev/router/advanced/stack/#header-buttons

ycldz · 2023-09-22T06:52:32Z

Remove this chunk of code from the screen
<Stack.Screen screenOptions={{ headerShown: false }} />
Now you can use this screen configuration in _layout.
This shouldn't be the solution since sometimes there is logic you want to apply from the screen. For example, you may want to modify the headerRight component based on some conditions on the screen (loading data, etc.).

https://docs.expo.dev/router/advanced/stack/#header-buttons

I agree, it is very useful to use it within the page, this feature should not be removed.

joy7426 · 2023-09-22T10:18:30Z

Remove this chunk of code from the screen
<Stack.Screen screenOptions={{ headerShown: false }} />
Now you can use this screen configuration in _layout.
This shouldn't be the solution since sometimes there is logic you want to apply from the screen. For example, you may want to modify the headerRight component based on some conditions on the screen (loading data, etc.).

https://docs.expo.dev/router/advanced/stack/#header-buttons

I agree but nothing to do! They should have kept both in place.
However, I made my own header and perhaps this is the only solution.

dhruvr4 · 2023-09-22T21:33:15Z

When I do
<Stack.Screen
name="login"
options={{ headerShown: true, title: "Login" }}
/>
or <Stack screenOptions = {{ headerShown: true, title: "Login" }}
the warning goes away but the name of the path to the screen for example account/login comes written at the top of the screen

Does anyone know why or how to remove that

amerllica · 2023-09-24T20:01:14Z

Is this warning a critical issue or can we ignore it?

)

danstepanov · 2023-09-25T01:51:32Z

Is this warning a critical issue or can we ignore it?

you can ignore it until this is removed in future version of expo router, my assumption is that it won't be removed until v3 but I could be wrong.

danstepanov · 2023-09-25T03:32:46Z

The solution, although confusing, is to move your declarations to _layout.tsx. @marklawlor correct me if wrong here, I have a reproducible example and can show you the error occurring using npx create-expo-app as well create-expo-stack (more minified version).

return (
  <Stack>
    <Stack.Screen name="one" options={{ title: "One" }} />
    <Stack.Screen name="two"
        options={{ title: "Two", headerLeft: () => <BackButton /> }}
      />
  </Stack>
);

It seems meaningful for Expo Router to continue to support the ability to specify Stack.Screen (as it did in v2.0.0, i believe) on a per screen basis (as this is often required and react-navigation supports it, so expo-router should). I'm curious why the Expo team opted to remove/change this?

monarcode · 2023-09-25T10:49:53Z

Having this issue right now and its driving me crazy, hope it gets fixed soon

NiklasEi · 2023-09-26T08:10:07Z

If you read the changelog it is marked as resolved in some version around 3.1. This WARNING (not error) is just happening in the current version.

The fix is merged for version 3 in the expo/expo repository. The linked PR is the backport of that fix for version 2, which is the "latest" version on npmjs.

The fact that this is "just" a warning doesn't help here. It causes a pop-up in developer mode and spams my console.

markedwards · 2023-09-26T12:32:58Z

Why can this not be backported to a 2.0.x release? This is incredibly annoying.

rskvazh · 2023-09-26T13:07:14Z

Same here. Very frustrated.

mcsrk · 2023-09-26T23:44:43Z

At this point lets just switch to react nav

adekorir · 2023-09-27T00:43:03Z

frustrating.

Brian-McBride · 2023-09-27T03:03:03Z

How else do you change the header components in a dynamic view?

app/(shop)/(product)/[id].js as an example.

I have

  <Stack.Screen
    options={{
      title: data?.name ?? '',
    }}
  />

Producing the same error as everyone else.

I just need to set the title of my view based on the data that I've fetched.

leanderlee · 2023-09-27T13:17:58Z

Can this issue be reopened? This seems important to fix.

zavbala · 2023-09-28T15:08:56Z

Re-open it, please 🙃

leanderlee · 2023-09-28T16:03:37Z

Can this issue be reopened? This seems important to fix.

pinging @marklawlor, in case.

leggomuhgreggo · 2023-09-29T07:52:47Z

Here's a different workaround that has the advantage of maintaining the "page + options" colocation.

import React from 'react';
import { View} from 'react-native';
import { Link, Stack } from 'expo-router';
- import { Stack } from 'expo-router';
+ import { useNavigation } from 'expo-router';

export const HomeScreen = () => {
+  const navigation = useNavigation();
+
+  React.useEffect(() => {
+    navigation.setOptions({
+      headerShown: false,
+    });
+  }, [navigation]);

  return (
    <View>
-      <Stack.Screen options={{ headerShown: false }} />

      <Text>Home</Text>
    </View>
  );
};

If that doesn't work whatever reason, the other workaround is is to move the <Stack.Screen options={...}> to the parent <Stack /> in _layout.tsx (see this comment and this comment)

Hope that helps!

EDIT: Opened PR to update <Stack> docs with example

Clarifying feature options RE: expo/router#834 (comment)

zackify · 2023-10-04T23:33:35Z

If you want to keep doing stuff the old way in v2, you can patch it yourself. Someone asked me above how to do it so here's how:

just install patch-package from npm, or use the built in approach if your package manager supports it.

All you have to do is add != null in the file referenced in the merged pr: expo/expo#23932 to get this to go away

made a short blog post on it if anyone needs more help than that.

wvq · 2023-10-05T08:35:22Z

Here's a different workaround that has the advantage of maintaining the "page + options" colocation.
import React from 'react';
import { View} from 'react-native';
import { Link, Stack } from 'expo-router';
- import { Stack } from 'expo-router';
+ import { useNavigation } from 'expo-router';

export const HomeScreen = () => {
+  const navigation = useNavigation();
+
+  React.useEffect(() => {
+    navigation.setOptions({
+      headerShown: false,
+    });
+  }, [navigation]);

  return (
    <View>
-      <Stack.Screen options={{ headerShown: false }} />

      <Text>Home</Text>
    </View>
  );
};
useNavigation

setOptions

If that doesn't work whatever reason, the other workaround is is to move the <Stack.Screen options={...}> to the parent <Stack /> in _layout.tsx (see this comment and this comment)

Hope that helps!

EDIT: Opened PR to update <Stack> docs with example

With this example, there has a display issue on my cell phone.
During the screen navigation animation, header is show, then hidden.
Use <Screen options={{ headerShown: false }}> the header is default hidden.

lesthoward · 2023-10-05T21:47:44Z

The solution, although confusing, is to move your declarations to _layout.tsx. @marklawlor correct me if wrong here, I have a reproducible example and can show you the error occurring using npx create-expo-app as well create-expo-stack (more minified version).
return (
  <Stack>
    <Stack.Screen name="one" options={{ title: "One" }} />
    <Stack.Screen name="two"
        options={{ title: "Two", headerLeft: () => <BackButton /> }}
      />
  </Stack>
);
It seems meaningful for Expo Router to continue to support the ability to specify Stack.Screen (as it did in v2.0.0, i believe) on a per screen basis (as this is often required and react-navigation supports it, so expo-router should). I'm curious why the Expo team opted to remove/change this?

@danstepanov You are right. I did the same thing to solve this issue, as same as you. So, yes, this works!

balloman · 2023-10-06T00:17:04Z

Why is this issue closed??

markedwards · 2023-10-06T01:23:32Z

I'm going to close this issue, but if you can provide information we can reopen it again.

@marklawlor, this is easily reproducible, can you please reopen?

issue described in this issue expo/router#834

nabilfreeman · 2023-10-06T08:17:24Z

I guess between moving Expo Router upstream into the main Expo repo, and the imminent release of v3 the team are ignoring or deprioritising anything related to v2.

I know we are on the bleeding edge but I think it’s a bit cavalier to leave v2 in an imperfect state like this and expect people to patch or do a major version upgrade.

I think it damages adoption, because v3 is not live yet and new users are installing this every day and possibly turning away because of small issues like this.

🤷‍♂️

issue described in this issue expo/router#834

mattphillips · 2023-10-07T11:10:45Z

As a workaround, while we wait for this to be patched in v2 I've found that you can suppress the warning by adding the following to the root of your app:

import { LogBox } from 'react-native';

LogBox.ignoreLogs([
  'The `redirect` prop on <Screen /> is deprecated and will be removed. Please use `router.redirect` instead'
]);

Not the best solution but saves faffing with patch package etc.

tholst · 2023-10-07T22:14:42Z

fyi: it seems to be fixed now in expo-router@2.0.9

(see commit 9f8a67b)

david7378 · 2023-10-09T16:01:55Z

sup

Yes its fixed!! Thanks!!

Adds section to stack.mdx showing alternative method to configure screen options from route, via imperative API # Why Clarifying feature options following discussion in this issue: expo/router#834 (comment) # Checklist  - [x] Documentation is up to date to reflect these changes (eg: https://docs.expo.dev and README.md). - [x] Conforms with the [Documentation Writing Style Guide](https://github.com/expo/expo/blob/main/guides/Expo%20Documentation%20Writing%20Style%20Guide.md) - [x] This diff will work correctly for `npx expo prebuild` & EAS Build (eg: updated a module plugin). --------- Co-authored-by: Aman Mittal <amandeepmittal@live.com>

marklawlor closed this as completed Aug 10, 2023

sync mentioned this issue Aug 12, 2023

[router] Fix false positive redirect deprecation since version 2.0.1 when using Screen expo/expo#23932

Merged

3 tasks

pdandradeb mentioned this issue Aug 16, 2023

Attempted to navigate before mounting the Root Layout component #740

Closed

charliewhyman added a commit to charliewhyman/travelsplitter that referenced this issue Sep 24, 2023

Moved (auth) screen options to declared stack (expo/router#834 (comment)

4318ab6

)

leggomuhgreggo added a commit to leggomuhgreggo/expo that referenced this issue Sep 29, 2023

Update stack.mdx with alternative to Stack.Screen

f05fa97

Clarifying feature options RE: expo/router#834 (comment)

leggomuhgreggo mentioned this issue Sep 29, 2023

[docs] Update stack.mdx with alternative to Stack.Screen expo/expo#24676

Merged

3 tasks

radoslavzeman mentioned this issue Oct 2, 2023

improve and fix purchase screen components and flow bratislava/paas-mpa#80

Merged

SamSamskies added a commit to wavlake/mobile that referenced this issue Oct 6, 2023

make false positive warning go away

224b902

issue described in this issue expo/router#834

SamSamskies added a commit to wavlake/mobile that referenced this issue Oct 6, 2023

make false positive warnings go away

c59a272

issue described in this issue expo/router#834

SamSamskies mentioned this issue Oct 6, 2023

make false positive warnings go away wavlake/mobile#43

Merged

blastshielddown pushed a commit to wavlake/mobile that referenced this issue Oct 6, 2023

make false positive warnings go away (#43)

5432629

issue described in this issue expo/router#834

danstepanov mentioned this issue Oct 16, 2023

[cli] Update expo router examples roninoss/create-expo-stack#23

Closed

GoldAndLink mentioned this issue Feb 9, 2024

switching between screen, the transition is slow react-navigation/react-navigation#10353

Open

11 tasks

WARN The redirect prop on <Screen /> is deprecated and will be removed. Please use router.redirect #834

WARN The redirect prop on <Screen /> is deprecated and will be removed. Please use router.redirect #834

Comments

gaetan224 commented Aug 10, 2023

Which package manager are you using? (Yarn is recommended)

Summary

marklawlor commented Aug 10, 2023

sync commented Aug 12, 2023 • edited Loading

sync commented Aug 12, 2023 • edited Loading

sync commented Aug 12, 2023

pdandradeb commented Aug 16, 2023

sync commented Aug 16, 2023

zackify commented Aug 30, 2023

animaonline commented Sep 11, 2023

Dundyne commented Sep 12, 2023

Pcummings commented Sep 12, 2023 • edited Loading

sahiljaidka224 commented Sep 13, 2023

matthewtesimale commented Sep 14, 2023

branaust commented Sep 14, 2023 • edited Loading

Pcummings commented Sep 15, 2023

branaust commented Sep 15, 2023 • edited Loading

roiiiu commented Sep 17, 2023

joy7426 commented Sep 21, 2023 • edited Loading

edmbn commented Sep 22, 2023 • edited Loading

ycldz commented Sep 22, 2023

joy7426 commented Sep 22, 2023

dhruvr4 commented Sep 22, 2023

amerllica commented Sep 24, 2023

danstepanov commented Sep 25, 2023

danstepanov commented Sep 25, 2023

monarcode commented Sep 25, 2023

NiklasEi commented Sep 26, 2023

markedwards commented Sep 26, 2023

rskvazh commented Sep 26, 2023

mcsrk commented Sep 26, 2023

adekorir commented Sep 27, 2023

Brian-McBride commented Sep 27, 2023

leanderlee commented Sep 27, 2023

zavbala commented Sep 28, 2023

leanderlee commented Sep 28, 2023

leggomuhgreggo commented Sep 29, 2023 • edited Loading

zackify commented Oct 4, 2023

wvq commented Oct 5, 2023

lesthoward commented Oct 5, 2023 • edited Loading

balloman commented Oct 6, 2023

markedwards commented Oct 6, 2023

nabilfreeman commented Oct 6, 2023 • edited Loading

mattphillips commented Oct 7, 2023

tholst commented Oct 7, 2023 • edited Loading

david7378 commented Oct 9, 2023

WARN The `redirect` prop on <Screen /> is deprecated and will be removed. Please use `router.redirect` #834

WARN The `redirect` prop on <Screen /> is deprecated and will be removed. Please use `router.redirect` #834

sync commented Aug 12, 2023 •

edited

Loading

sync commented Aug 12, 2023 •

edited

Loading

Pcummings commented Sep 12, 2023 •

edited

Loading

branaust commented Sep 14, 2023 •

edited

Loading

branaust commented Sep 15, 2023 •

edited

Loading

joy7426 commented Sep 21, 2023 •

edited

Loading

edmbn commented Sep 22, 2023 •

edited

Loading

leggomuhgreggo commented Sep 29, 2023 •

edited

Loading

lesthoward commented Oct 5, 2023 •

edited

Loading

nabilfreeman commented Oct 6, 2023 •

edited

Loading

tholst commented Oct 7, 2023 •

edited

Loading