Test Layout Transition with size change (#6178)

## Summary Tests added in PR: #6168 verify layout transition of component changing position only. In this PR I verify cases when both position and size change. ## Test plan <img width="360" alt="image" src="https://github.com/user-attachments/assets/45b19deb-1001-401b-b309-ad86f092b3f0">
software-mansion · Jul 31, 2024 · 5a3855a · 5a3855a
1 parent 6384469
commit 5a3855a
Show file tree

Hide file tree

Showing 4 changed files with 5,302 additions and 233 deletions.
diff --git a/apps/common-app/src/examples/RuntimeTests/tests/layoutAnimations/layout/TestComponents.tsx b/apps/common-app/src/examples/RuntimeTests/tests/layoutAnimations/layout/TestComponents.tsx
@@ -13,56 +13,76 @@ export enum Direction {
   LEFT_UP = 'LEFT_UP',
 }
 
-export const TransitionUpOrDown = ({ layout, direction }: { layout: any; direction: Direction }) => {
+export const TransitionUpOrDown = ({
+  layout,
+  direction,
+  changeSize,
+}: {
+  layout: any;
+  direction: Direction;
+  changeSize?: boolean;
+}) => {
   const [show, setShow] = useState(true);
   const ref = useTestRef(TRANSITION_REF);
 
   useEffect(() => {
     setShow(false);
   }, [setShow]);
 
+  const mainBoxStyle = [styles.animatedBox, styles.mainBox, changeSize && !show ? styles.bigBox : {}];
+
   return (
     <View style={styles.containerVertical}>
       {direction === Direction.UP && (
         <>
           {show && <Animated.View layout={layout} style={styles.animatedBox} />}
           <Animated.View layout={layout} style={styles.animatedBox} />
-          <Animated.View ref={ref} layout={layout} style={[styles.animatedBox, styles.mainBox]} />
+          <Animated.View ref={ref} layout={layout} style={mainBoxStyle} />
         </>
       )}
       {direction === Direction.DOWN && (
         <>
           {!show && <Animated.View layout={layout} style={styles.animatedBox} />}
           <Animated.View layout={layout} style={styles.animatedBox} />
-          <Animated.View ref={ref} layout={layout} style={[styles.animatedBox, styles.mainBox]} />
+          <Animated.View ref={ref} layout={layout} style={mainBoxStyle} />
         </>
       )}
     </View>
   );
 };
 
-export const TransitionLeftOrRight = ({ layout, direction }: { layout: any; direction: Direction }) => {
+export const TransitionLeftOrRight = ({
+  layout,
+  direction,
+  changeSize,
+}: {
+  layout: any;
+  direction: Direction;
+  changeSize?: boolean;
+}) => {
   const [show, setShow] = useState(true);
   const ref = useTestRef(TRANSITION_REF);
 
   useEffect(() => {
     setShow(false);
   }, [setShow]);
 
+  const mainBoxStyle = [styles.animatedBox, styles.mainBox, changeSize && !show ? styles.bigBox : {}];
+
   return (
     <View style={styles.containerHorizontal}>
       {direction === Direction.LEFT && (
         <>
           {show && <Animated.View layout={layout} style={styles.animatedBox} />}
           <Animated.View layout={layout} style={styles.animatedBox} />
-          <Animated.View ref={ref} layout={layout} style={[styles.animatedBox, styles.mainBox]} />
+          <Animated.View ref={ref} layout={layout} style={mainBoxStyle} />
         </>
       )}
       {direction === Direction.RIGHT && (
         <>
           {!show && <Animated.View layout={layout} style={styles.animatedBox} />}
           <Animated.View layout={layout} style={styles.animatedBox} />
-          <Animated.View ref={ref} layout={layout} style={[styles.animatedBox, styles.mainBox]} />
+          <Animated.View ref={ref} layout={layout} style={mainBoxStyle} />
         </>
       )}
       {direction === Direction.RIGHT_UP && (
@@ -71,7 +91,7 @@ export const TransitionLeftOrRight = ({ layout, direction }: { layout: any; dire
           <Animated.View layout={layout} style={styles.animatedBox} />
           <Animated.View layout={layout} style={styles.animatedBox} />
           <Animated.View layout={layout} style={styles.animatedBox} />
-          <Animated.View ref={ref} layout={layout} style={[styles.animatedBox, styles.mainBox]} />
+          <Animated.View ref={ref} layout={layout} style={mainBoxStyle} />
         </>
       )}
       {direction === Direction.LEFT_UP && (
@@ -116,4 +136,8 @@ const styles = StyleSheet.create({
     margin: 5,
   },
   mainBox: { backgroundColor: 'darkorange' },
+  bigBox: {
+    width: 150,
+    height: 200,
+  },
 });