Entering & Existing Transitions Help #5857
-
I have a pretty basic component which is just a banner that shows at the top of a form. I have configured some entering and existing transitions that work as needed. The look good for my use case so no issue there. However, I am stuck on how to make the sibling components not collapse as the banner is "exiting". My parent component is something like this: Form.tsx
When I trigger the banner to hide by setting
|
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 1 reply
-
Hey! Here is the example solution for this problem. You would have to use the Below you can see the adapted code to match your implementation and the result: import React, { useState } from 'react';
import Animated, {
LinearTransition,
SlideInLeft,
SlideOutRight,
Easing,
} from 'react-native-reanimated';
import { Button, StyleSheet, Text } from 'react-native';
export default function EmptyExample() {
const [show, setShow] = useState(false);
const duration = 500;
return (
<>
{show && (
<Animated.View
layout={LinearTransition}
exiting={SlideOutRight.duration(duration).easing(Easing.ease)}
entering={SlideInLeft.duration(duration).easing(Easing.ease)}
style={styles.banner}>
<Text style={styles.bannerText}>Banner</Text>
</Animated.View>
)}
<Animated.View layout={LinearTransition.delay(show ? 0 : duration)}>
<Button title="Toggle" onPress={() => setShow((prev) => !prev)} />
</Animated.View>
</>
);
}
const styles = StyleSheet.create({
banner: {
backgroundColor: 'red',
justifyContent: 'center',
alignItems: 'center',
height: 100,
},
bannerText: {
color: 'white',
fontSize: 20,
fontWeight: 'bold',
},
}); Simulator.Screen.Recording.-.iPhone.15.Pro.-.2024-07-09.at.01.52.04.mp4 |
Beta Was this translation helpful? Give feedback.
Hey!
Here is the example solution for this problem. You would have to use the
layout
property for all siblings of the component which is animated withentering
/exiting
transition.Below you can see the adapted code to match your implementation and the result: