software-mansion / software-mansion/react-native-screens

[Android] LayoutAnimation not running when screen back

Open
#1,489 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

platform:android repro-provided
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

  1. I use createNativeStackNavigator and the flow of direction is Home screen to Register screen back and forth:
  <AuthStack.Screen
      name="Register"
      component={Register}
      options={{
        headerLargeTitle: true,
        title: 'Create Account',
        headerTitleAlign: 'center',
        headerShadowVisible: false,
        headerBackTitle: ' ',
      }}
  1. From Home To Register screen
navigation.navigate('Register', { navigation.navigate('Register', {
                      email: state.email,
                    });
  1. tapping the back arrow icon from the Register screen header

  2. Home screen Layoutanimation not 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

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.