Changing stackAnimation prop for @amazon-devices/react-native-screens/native-stack doesn’t work
1. Summary
We were using @amazon-devices/react-native-screens/native-stack to create our stack screens, but we noticed an issue with the screens below active that was kept alive, thus sometimes the focus was being lost in the active screen due to a setFocus in a screen below, which was still active, for example.
Then we decided to try @amazon-devices/react-native-screens/native-stack which works as we expect, freezing all screens except the top one, the only issue is that it comes with a fade-in fade-out animation, we’ve tried to change stackAnimation to none, and even to others, just to test it, but fade-in, fade-out is always the animation applied
App Name: Paramount+
App Link on Amazon Appstore (found through Developer Console → Actions column in App List → View on Amazon.com):
Bug Severity
Select one that applies
- Impacts operation of app
- Blocks current development
- Improvement suggestion
- Issue with documentation (If selected, please share the doc link and describe the issue)
- Other
2. Steps to Reproduce
[Create a Stack Navigation using the lib][in screenOptions, add the prop stackAnimation: 'none']
Navigate between screens, animation will still be there.
3. Observed Behavior
Explain what actually happened, noting any discrepancies or malfunctions.
Fade-in Fade-out animation can't be changed when navigate between screens
4. Expected Behavior
Describe what you expected the SDK to do under normal operation.
We should be able to set animation to any other available in NativeStackNavigationOptions
4.a Possible Root Cause & Temporary Workaround
Fill out anything you have tried. If you don’t know, N/A is acceptable
I tried to investigate but didn't found anything
6. Environment
Please fill out the fields related to your bug below:
-
SDK Version: v0.22.6749
-
App State:
[Foreground] -
OS Information:
kvd-tv
7. Example Code Snippet / Screenshots / Screengrabs
Include any relevant code or component setup in React Native that can help reproduce the bug.
import {createNativeStackNavigator,NativeStackNavigationOptions} from '@amazon-devices/react-native-screens/native-stack';
const Stack = createNativeStackNavigator<RootStackParamList>();
const screenOptions: NativeStackNavigationOptions = { stackAnimation: 'none', headerShown: false };
<Stack.Navigator screenOptions={screenOptions}>
<Stack.Screen name={"screen1"} component={Screen1} />
<Stack.Screen name={"screen2"} component={Screen2} />
</Stack.Navigator>
Additionally please provide the following if possible
Provide Screenshots / Screengrabs / Logs. Please include as much information as you can that will help debug.
I have a video but I can't add here it seems
Additional Context
Any Additional Context you would like to provide?
Add any other relevant information, such as recent updates to the SDK, dependencies, or device OS that may affect the bug.