Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix cleaning layout animation config on iOS #4997

Merged
merged 9 commits into from
Sep 21, 2023

Conversation

Latropos
Copy link
Contributor

@Latropos Latropos commented Aug 28, 2023

Summary

Closes #4816
Closes #4516

Fixing issue with react navigation. If given view is inside some view controller and it has layout animation don't remove its animations from subtree

BEFOREAFTER
Screen.Recording.2023-08-28.at.15.58.33.mov
Screen.Recording.2023-08-28.at.15.55.52.mov

Test plan

Code:

import {NavigationContainer, useNavigation} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import React from 'react';
import {Pressable, Text, View} from 'react-native';
import Animated, {Layout} from 'react-native-reanimated';

const Stack = createNativeStackNavigator();

const Screen1 = () => {
  const [isOpen, setIsOpen] = React.useState(false);
  const navigation = useNavigation();
  return (
    <>
      <Animated.View
        style={{backgroundColor: 'red'}}
        layout={Layout.duration(1000)}>
        <Pressable onPress={() => setIsOpen(!isOpen)}>
          <Text>Open</Text>
        </Pressable>
        {isOpen && <View style={{width: 300, height: 400}} />}
      </Animated.View>
      <Text onPress={() => navigation.navigate('Screen2')}>nav</Text>
    </>
  );
};

const Screen2 = () => {
  const [isOpen, setIsOpen] = React.useState(false);
  const navigation = useNavigation();
  return (
    <>
      <Animated.View
        style={{backgroundColor: 'red'}}
        layout={Layout.duration(1000)}>
        <Pressable onPress={() => setIsOpen(!isOpen)}>
          <Text>Open</Text>
        </Pressable>
        {isOpen && <View style={{width: 300, height: 400}} />}
      </Animated.View>
    </>
  );
};

const App = (props: Props) => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Screen1" component={Screen1} />
        <Stack.Screen name="Screen2" component={Screen2} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default App;

Copy link
Collaborator

@tjzel tjzel left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

TO BE REVIEWED

@Latropos Latropos changed the title TBD Fix navigation crash Aug 28, 2023
@Latropos Latropos marked this pull request as ready for review August 28, 2023 14:08
apple/LayoutReanimation/REAAnimationsManager.m Outdated Show resolved Hide resolved
apple/LayoutReanimation/REASwizzledUIManager.mm Outdated Show resolved Hide resolved
Copy link
Member

@piaskowyk piaskowyk left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The original source of this issue was this line:
removeAnimationsFromSubtree:(REAUIView *)container
Since container represents an entire screen stack, every layout animation config for that stack is being removed after a screen change. Instead, we should only remove the configuration for the specific screen from the permanentlyRemovedChildren.

@piaskowyk piaskowyk changed the title Fix navigation crash Fix cleaning layout animation config on iOS Sep 21, 2023
@piaskowyk piaskowyk added this pull request to the merge queue Sep 21, 2023
Merged via the queue into main with commit c89032a Sep 21, 2023
11 checks passed
@piaskowyk piaskowyk deleted the acynk/navigation-breaks-reanimated branch September 21, 2023 17:18
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Animated.View layout animations break inside react-navigation Layout Animation breaks after navigate
3 participants