Adding transition animations when changing screens?

[athenawisdoms]

Is it possible to add/change the transition animations when changing screens?

By default, going from one tab screen to another tab screen is no transition animation. How can a sliding transition be added when changing screens?

React Navigation 7 has options like transitionSpec and cardStyleInterpolator, will those be suitable and can theye be used with expo-router?

[wcastand]

if you use the default Stack, it's the native stack so you would have access in the screenOptions to those animations: https://reactnavigation.org/docs/7.x/native-stack-navigator/#animation

if you want what you suggested you will need to use JS implementation and custom like the doc show here: https://expo.github.io/router/docs/migration/react-navigation/stack

[top-kat]

@wcastand I tried the first option but it didn't work...

I have a nearly bare expo app created with create-expo-app with navigation template.

Am I missing something ?

[nt294]

Is there any resolution for this? Having this issue now

[FlavioScimeca]

same , when using nesting folder routing.
do you find something ?

[DanielO199]

Any updates?

[FlavioScimeca]

Explain what you exactly need , maybe i can help you

[DanielO199]

Actually i found out that some animations are just not working on ios :) But anyway i've just created nearly bare expo app like @top-kat did and animations are not working when i navigate between tabs

[castdrian]

possibly related to expo/expo#26678

[kaeming]

any updates? seems like we need react navigation 7 but expo only compatible with 6 atm

[vinz-mehra]

Did you find a solution for this?

[FlavioScimeca]

I tried to make what u asked , without any results , btw look here -> #640 .
let us know if u made it

[vinz-mehra]

What exactly to look?

[FlavioScimeca]

They create the BottomTabNavigator form react-native-navigation or react-native-paper and use it with expo through withLayoutContext, with that you should use animation inside expo-router

[FlavioScimeca]

I tried this check this repo , i do not pass animation or transitions config to Tabs or like we usally do in Stack but i move the animation directly inside the Tab.Screen component , using a useFocusEffect that trigger a new re-render each time the Tab.Screen is selected, for animation i am using Tamgui but u can use whatever u want .
Let me know what u think.

[shahsuvarli]

Any update on this issue?

[shahsuvarli]

I think I have got the answer. If you dont see any sliding or any other animated transiition between screens, probably they are sibling stacks, which means, their files are in neighbour folders. Move one of them out of the same layout and try again