software-mansion / software-mansion/react-native-screens
[Android] LayoutAnimation not running when screen back
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 3.7k
- Forks
- 714
- Avg merge
- 2d 23h
- Merged PRs (30d)
- 71
Description
Description
iOS works fine in my case
Layoutanimation not running when screen go back using default functions, and I guess the problem might be arising from the components not being remounted.
Reproduction
Just add this inside the Home screen, and yet, the subsequent Register screen ALSO have the same LayoutAnimation effects.
LayoutAnimation.configureNext({
duration: Platform.OS === 'android' ? 400 : 500,
update: { type: LayoutAnimation.Types.spring, springDamping: Platform.OS === 'android' ? 0.7 : 0.6 },
})
Steps To Reproduce
- I use
createNativeStackNavigatorand the flow of direction isHomescreen toRegisterscreen back and forth:
<AuthStack.Screen
name="Register"
component={Register}
options={{
headerLargeTitle: true,
title: 'Create Account',
headerTitleAlign: 'center',
headerShadowVisible: false,
headerBackTitle: ' ',
}}
- From Home To Register screen
navigation.navigate('Register', { navigation.navigate('Register', {
email: state.email,
});
-
tapping the back arrow icon from the Register screen header
-
Home screen
Layoutanimationnot working.
Expected behavior
The Layoutanimation should perform normally in Android
Actual behavior
The Layoutanimation NOT running normally in Android
Temp fix
I am currently hard coded the key prop to force the component to update.
<Input
key={id}
onFocus={() => setId(Math.random().toString()}
/>
Platform
- iOS
- [v ] Android
- Web
- Windows
- tvOS
Package versions
"react-native": "^0.68.2",
"react-native-reanimated": "^2.8.0",
"react-native-screens": "^3.13.1",
"@react-navigation/native": "^6.0.10",
"@react-navigation/native-stack": "^6.6.2",
"react-native-safe-area-context": "^4.3.1",
"react-native-gesture-handler": "^2.5.0",
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reproducing the Home-to-Register flow with createNativeStackNavigator using the reported React Native, react-native-screens, and navigation versions. Inspect the interaction between LayoutAnimation and returning through the Android header back action; done means the Home screen animation runs normally after navigating back without relying on a changing key prop.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- android, react-native
- Domain
- mobile
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100