From 3f79d4321653c522a35f48264467f406eacb9c27 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Patrycja=20Kali=C5=84ska?= <cysiak0412@gmail.com>
Date: Fri, 21 Jun 2024 13:11:49 +0200
Subject: [PATCH 1/5] Replace layout transitions example

---
 .../LayoutTransitionExample.tsx               | 282 ++++++++++++++++++
 .../LayoutAnimations/WaterfallGridExample.tsx | 213 -------------
 apps/common-app/src/examples/index.ts         |   4 +-
 3 files changed, 284 insertions(+), 215 deletions(-)
 create mode 100644 apps/common-app/src/examples/LayoutAnimations/LayoutTransitionExample.tsx
 delete mode 100644 apps/common-app/src/examples/LayoutAnimations/WaterfallGridExample.tsx

diff --git a/apps/common-app/src/examples/LayoutAnimations/LayoutTransitionExample.tsx b/apps/common-app/src/examples/LayoutAnimations/LayoutTransitionExample.tsx
new file mode 100644
index 00000000000..86cc0251927
--- /dev/null
+++ b/apps/common-app/src/examples/LayoutAnimations/LayoutTransitionExample.tsx
@@ -0,0 +1,282 @@
+import React, { useState, useRef, useEffect } from 'react';
+import {
+  View,
+  Text,
+  Button,
+  SafeAreaView,
+  StyleSheet,
+  TouchableOpacity,
+} from 'react-native';
+import Animated, {
+  LinearTransition,
+  SequencedTransition,
+  FadingTransition,
+  FadeOut,
+  JumpingTransition,
+  CurvedTransition,
+  EntryExitTransition,
+  FlipInEasyX,
+  FlipOutYRight,
+} from 'react-native-reanimated';
+import { createStackNavigator } from '@react-navigation/stack';
+import { NavigationContainer } from '@react-navigation/native';
+import { type StackScreenProps } from '@react-navigation/stack';
+
+interface Item {
+  id: number;
+  content: string;
+  color: string;
+}
+
+const INITIAL_LIST = [
+  { id: 1, content: '🍌', color: '#b58df1' },
+  { id: 2, content: '🍎', color: '#ffe780' },
+  { id: 3, content: '🥛', color: '#fa7f7c' },
+  { id: 4, content: '🍙', color: '#82cab2' },
+  { id: 5, content: '🍇', color: '#fa7f7c' },
+  { id: 6, content: '🍕', color: '#b58df1' },
+  { id: 7, content: '🍔', color: '#ffe780' },
+  { id: 8, content: '🍟', color: '#b58df1' },
+  { id: 9, content: '🍩', color: '#82cab2' },
+];
+
+type RootStackParamList = {
+  Home: undefined;
+  linear: { title: string; transition: any };
+  fading: { title: string; transition: any };
+  sequenced: { title: string; transition: any };
+  jumping: { title: string; transition: any };
+  curved: { title: string; transition: any };
+  entryexit: { title: string; transition: any };
+};
+
+type HomeScreenProps = StackScreenProps<RootStackParamList, 'Home'>;
+
+function HomeScreen({ navigation }: HomeScreenProps) {
+  return (
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+      <Button
+        title="Linear Transition"
+        onPress={() =>
+          navigation.navigate('linear', {
+            title: 'LinearTransition',
+            transition: LinearTransition,
+          })
+        }
+      />
+      <Button
+        title="Sequenced Transition"
+        onPress={() =>
+          navigation.navigate('sequenced', {
+            title: 'SequencedTransition',
+            transition: SequencedTransition,
+          })
+        }
+      />
+      <Button
+        title="Fading Transition"
+        onPress={() =>
+          navigation.navigate('fading', {
+            title: 'FadingTransition',
+            transition: FadingTransition,
+          })
+        }
+      />
+      <Button
+        title="Jumping Transition"
+        onPress={() =>
+          navigation.navigate('jumping', {
+            title: 'JumpingTransition',
+            transition: JumpingTransition,
+          })
+        }
+      />
+      <Button
+        title="Curved Transition"
+        onPress={() =>
+          navigation.navigate('curved', {
+            title: 'CurvedTransition',
+            transition: CurvedTransition,
+          })
+        }
+      />
+      <Button
+        title="Entry/Exit Transition"
+        onPress={() =>
+          navigation.navigate('entryexit', {
+            title: 'EntryExit',
+            transition:
+              EntryExitTransition.entering(FlipInEasyX).exiting(FlipOutYRight),
+          })
+        }
+      />
+    </View>
+  );
+}
+
+const Stack = createStackNavigator<RootStackParamList>();
+
+export default function Layout() {
+  return (
+    <NavigationContainer independent={true}>
+      <Stack.Navigator screenOptions={{ title: 'Layout Transitions 🔥' }}>
+        <Stack.Screen name="Home" component={HomeScreen} />
+        <Stack.Screen
+          name="linear"
+          component={Transition}
+          initialParams={{
+            title: 'LinearTransition',
+            transition: LinearTransition,
+          }}
+        />
+        <Stack.Screen
+          name="fading"
+          component={Transition}
+          initialParams={{
+            title: 'FadingTransition',
+            transition: FadingTransition,
+          }}
+        />
+        <Stack.Screen
+          name="sequenced"
+          component={Transition}
+          initialParams={{
+            title: 'SequencedTransition',
+            transition: SequencedTransition,
+          }}
+        />
+        <Stack.Screen
+          name="jumping"
+          component={Transition}
+          initialParams={{
+            title: 'JumpingTransition',
+            transition: JumpingTransition,
+          }}
+        />
+        <Stack.Screen
+          name="curved"
+          component={Transition}
+          initialParams={{
+            title: 'CurvedTransition',
+            transition: CurvedTransition,
+          }}
+        />
+        <Stack.Screen
+          name="entryexit"
+          component={Transition}
+          initialParams={{
+            title: 'EntryExit',
+            transition:
+              EntryExitTransition.entering(FlipInEasyX).exiting(FlipOutYRight),
+          }}
+        />
+      </Stack.Navigator>
+    </NavigationContainer>
+  );
+}
+
+type TransitionProps = StackScreenProps<
+  RootStackParamList,
+  'linear' | 'fading' | 'sequenced' | 'jumping' | 'curved' | 'entryexit'
+>;
+
+function Transition({ route }: TransitionProps) {
+  const { title, transition } = route.params;
+  const [items, setItems] = useState(INITIAL_LIST);
+  const [selected, _] = useState({ label: title, value: transition });
+
+  const removeItem = (idToRemove: number) => {
+    const updatedItems = items.filter((item) => item.id !== idToRemove);
+    setItems(updatedItems);
+  };
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <View>
+        <Items selected={selected} items={items} onRemove={removeItem} />
+      </View>
+    </SafeAreaView>
+  );
+}
+
+interface ItemsProps {
+  selected: { label: string; value: any };
+  items: Item[];
+  onRemove: (id: number) => void;
+}
+
+function Items({ selected, items, onRemove }: ItemsProps) {
+  return (
+    <View style={styles.gridContainer}>
+      {items.map((item: { id: number; content: string; color: string }) => (
+        <Animated.View
+          key={item.id}
+          layout={selected.value}
+          exiting={FadeOut}
+          style={[styles.tileContainer, { backgroundColor: item.color }]}>
+          <Tile content={item.content} onRemove={() => onRemove(item.id)} />
+        </Animated.View>
+      ))}
+    </View>
+  );
+}
+
+function Tile({
+  content,
+  onRemove,
+}: {
+  content: string;
+  onRemove: () => void;
+}) {
+  return (
+    <TouchableOpacity onPress={onRemove} style={styles.tile}>
+      <Animated.Text style={styles.tileLabel}>{content}</Animated.Text>
+    </TouchableOpacity>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 32,
+    width: 'auto',
+    display: 'flex',
+    minHeight: 300,
+  },
+  gridContainer: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    alignItems: 'flex-start',
+    justifyContent: 'center',
+    paddingHorizontal: 32,
+  },
+  tileContainer: {
+    width: '20%',
+    margin: '1%',
+    borderRadius: 16,
+    minHeight: 80,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  tile: {
+    flex: 1,
+    height: '100%',
+    width: ' 100%',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  tileLabel: {
+    color: '#f8f9ff',
+    fontSize: 24,
+  },
+  wrapper: {
+    width: '100%',
+    position: 'absolute',
+    display: 'flex',
+    alignItems: 'center',
+  },
+  animatedView: {
+    width: '100%',
+    overflow: 'hidden',
+  },
+});
diff --git a/apps/common-app/src/examples/LayoutAnimations/WaterfallGridExample.tsx b/apps/common-app/src/examples/LayoutAnimations/WaterfallGridExample.tsx
deleted file mode 100644
index 16abe622c60..00000000000
--- a/apps/common-app/src/examples/LayoutAnimations/WaterfallGridExample.tsx
+++ /dev/null
@@ -1,213 +0,0 @@
-import type { BaseAnimationBuilder } from 'react-native-reanimated';
-import Animated, {
-  BounceOut,
-  CurvedTransition,
-  FadingTransition,
-  JumpingTransition,
-  Layout,
-  LightSpeedInLeft,
-  LightSpeedInRight,
-  PinwheelOut,
-  SequencedTransition,
-  combineTransition,
-} from 'react-native-reanimated';
-import type { LayoutChangeEvent } from 'react-native';
-import { Image, Text, View, StyleSheet } from 'react-native';
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { ScrollView, TapGestureHandler } from 'react-native-gesture-handler';
-
-import { Picker } from '@react-native-picker/picker';
-
-const AnimatedImage = Animated.createAnimatedComponent(Image);
-type Props = {
-  columns: number;
-  pokemons: number;
-  transition: string;
-};
-function getRandomColor() {
-  const randomColor = Math.floor(Math.random() * 16777215).toString(16);
-  return randomColor;
-}
-type PokemonData = {
-  ratio: number;
-  address: string;
-  key: number;
-  color: string;
-};
-
-function getLayoutTranistion(transition: string): BaseAnimationBuilder {
-  switch (transition) {
-    case 'FadingTransition':
-      return FadingTransition.delay(1000);
-    case 'SequencedTransition':
-      return SequencedTransition.delay(1000);
-    case 'ReverseSequenced':
-      return SequencedTransition.reverse().delay(1000);
-    case 'JumpingTransition':
-      return JumpingTransition.delay(1000).duration(1000);
-    case 'CurvedTransition':
-      return CurvedTransition.delay(1000);
-    case 'EntryExit':
-      return combineTransition(
-        PinwheelOut.duration(1000),
-        LightSpeedInLeft.duration(1000)
-      ).delay(1000);
-    default:
-      return Layout.delay(1000).springify();
-  }
-}
-export function WaterfallGrid({
-  columns = 3,
-  pokemons = 100,
-  transition = 'LinearTransition',
-}: Props) {
-  const [poks, setPoks] = useState<Array<PokemonData>>([]);
-  const [dims, setDims] = useState({ width: 0, height: 0 });
-  const handleOnLayout = useCallback(
-    (e: LayoutChangeEvent) => {
-      const newLayout = e.nativeEvent.layout;
-      if (
-        dims.width !== +newLayout.width ||
-        dims.height !== +newLayout.height
-      ) {
-        setDims({ width: newLayout.width, height: newLayout.height });
-      }
-    },
-    [dims, setDims]
-  );
-  const margin = 10;
-  const width = (dims.width - (columns + 1) * margin) / columns;
-  useEffect(() => {
-    if (dims.width === 0 || dims.height === 0) {
-      return;
-    }
-    const poks: {
-      ratio: number;
-      address: string;
-      key: number;
-      color: string;
-    }[] = [];
-
-    for (let i = 0; i < pokemons; i++) {
-      const ratio = 1 + Math.random();
-      poks.push({
-        ratio,
-        address: `https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${i}.png`,
-        key: i,
-        color: `#${getRandomColor()}`,
-      });
-    }
-    setPoks(poks);
-  }, [dims, setPoks, pokemons]);
-  const layoutTransition = useMemo(
-    () => getLayoutTranistion(transition),
-    [transition]
-  );
-  const [cardsMemo, height] = useMemo<[Array<JSX.Element>, number]>(() => {
-    if (poks.length === 0) {
-      return [[], 0];
-    }
-    const cardsResult: Array<JSX.Element> = [];
-    const heights = new Array(columns).fill(0);
-    for (const pok of poks) {
-      const cur = Math.floor(Math.random() * (columns - 0.01));
-      const pokHeight = width * pok.ratio;
-      heights[cur] += pokHeight + margin / 2;
-      cardsResult.push(
-        <Animated.View
-          entering={LightSpeedInRight.delay(cur * 200 * 2).springify()}
-          exiting={BounceOut}
-          layout={layoutTransition}
-          key={pok.address}
-          style={[
-            {
-              width,
-              height: pokHeight,
-              backgroundColor: pok.color,
-              left: cur * width + (cur + 1) * margin,
-              top: heights[cur] - pokHeight,
-            },
-            styles.pok,
-          ]}>
-          <TapGestureHandler
-            onHandlerStateChange={() => {
-              setPoks(poks.filter((it) => it.key !== pok.key));
-            }}>
-            <AnimatedImage
-              layout={layoutTransition}
-              source={{ uri: pok.address }}
-              style={{ width, height: width }}
-            />
-          </TapGestureHandler>
-        </Animated.View>
-      );
-    }
-    return [cardsResult, Math.max(...heights) + margin / 2];
-  }, [poks, columns, layoutTransition, width]);
-  return (
-    <View onLayout={handleOnLayout} style={styles.flexOne}>
-      {cardsMemo.length === 0 && <Text> Loading </Text>}
-      {cardsMemo.length !== 0 && (
-        <ScrollView>
-          <View style={{ height }}>{cardsMemo}</View>
-        </ScrollView>
-      )}
-    </View>
-  );
-}
-export default function WaterfallGridExample() {
-  const [selectedTransition, setSelectedTransition] = useState<string>(
-    'SequencedTransition'
-  );
-  return (
-    <View style={styles.flexOne}>
-      <View style={styles.pickerContainer}>
-        <Picker
-          mode="dropdown"
-          selectedValue={selectedTransition}
-          style={styles.picker}
-          itemStyle={{ height: 50 }}
-          onValueChange={(itemValue) => {
-            setSelectedTransition(itemValue);
-          }}>
-          <Picker.Item label="LinearTransition" value="LinearTransition" />
-          <Picker.Item
-            label="SequencedTransition"
-            value="SequencedTransition"
-          />
-          <Picker.Item label="ReverseSequenced" value="ReverseSequenced" />
-          <Picker.Item label="FadingTransition" value="FadingTransition" />
-          <Picker.Item label="JumpingTransition" value="JumpingTransition" />
-          <Picker.Item label="CurvedTransition" value="CurvedTransition" />
-          <Picker.Item label="EntryExit" value="EntryExit" />
-        </Picker>
-      </View>
-      <WaterfallGrid
-        columns={3}
-        pokemons={10}
-        transition={selectedTransition}
-      />
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  flexOne: {
-    flex: 1,
-  },
-  pok: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    position: 'absolute',
-  },
-  pickerContainer: {
-    flexDirection: 'row',
-    justifyContent: 'center',
-    height: 60,
-    padding: 10,
-  },
-  picker: {
-    height: 50,
-    width: 250,
-  },
-});
diff --git a/apps/common-app/src/examples/index.ts b/apps/common-app/src/examples/index.ts
index 8315ac704cf..2d25ddace84 100644
--- a/apps/common-app/src/examples/index.ts
+++ b/apps/common-app/src/examples/index.ts
@@ -109,7 +109,7 @@ import SwipeableListExample from './SwipeableListExample';
 import TransformExample from './TransformExample';
 import UpdatePropsPerfExample from './UpdatePropsPerfExample';
 import VolumeExample from './VolumeExample';
-import WaterfallGridExample from './LayoutAnimations/WaterfallGridExample';
+import LayoutTransitionExample from './LayoutAnimations/LayoutTransitionExample';
 import WidthExample from './WidthExample';
 import WithoutBabelPluginExample from './WithoutBabelPluginExample';
 import WobbleExample from './WobbleExample';
@@ -641,7 +641,7 @@ export const EXAMPLES: Record<string, Example> = {
   },
   DefaultTransitions: {
     title: '[LA] Default layout transitions',
-    screen: WaterfallGridExample,
+    screen: LayoutTransitionExample,
   },
   KeyframeAnimation: {
     title: '[LA] Keyframe animation',

From f528eb78e3a6fb2a85a82836184de09b4e6aaef0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Patrycja=20Kali=C5=84ska?= <cysiak0412@gmail.com>
Date: Fri, 21 Jun 2024 13:24:45 +0200
Subject: [PATCH 2/5] Stylistic fixes

---
 .../LayoutTransitionExample.tsx                 | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/apps/common-app/src/examples/LayoutAnimations/LayoutTransitionExample.tsx b/apps/common-app/src/examples/LayoutAnimations/LayoutTransitionExample.tsx
index 86cc0251927..bd067c18d8d 100644
--- a/apps/common-app/src/examples/LayoutAnimations/LayoutTransitionExample.tsx
+++ b/apps/common-app/src/examples/LayoutAnimations/LayoutTransitionExample.tsx
@@ -54,9 +54,9 @@ type HomeScreenProps = StackScreenProps<RootStackParamList, 'Home'>;
 
 function HomeScreen({ navigation }: HomeScreenProps) {
   return (
-    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+    <View style={styles.homeContainer}>
       <Button
-        title="Linear Transition"
+        title={'Linear Transition'}
         onPress={() =>
           navigation.navigate('linear', {
             title: 'LinearTransition',
@@ -192,6 +192,7 @@ function Transition({ route }: TransitionProps) {
 
   return (
     <SafeAreaView style={styles.container}>
+      <Text style={styles.title}>{title}</Text>
       <View>
         <Items selected={selected} items={items} onRemove={removeItem} />
       </View>
@@ -269,6 +270,12 @@ const styles = StyleSheet.create({
     color: '#f8f9ff',
     fontSize: 24,
   },
+  title: {
+    fontSize: 18,
+    color: '#001a72',
+    textAlign: 'center',
+    marginVertical: 16,
+  },
   wrapper: {
     width: '100%',
     position: 'absolute',
@@ -279,4 +286,10 @@ const styles = StyleSheet.create({
     width: '100%',
     overflow: 'hidden',
   },
+  homeContainer: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 16,
+  },
 });

From 31c430ea4c7bf9990e19d6fdd7cab3469928bd02 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Patrycja=20Kali=C5=84ska?= <cysiak0412@gmail.com>
Date: Mon, 24 Jun 2024 19:38:15 +0200
Subject: [PATCH 3/5] refactor for simpler code

---
 .../LayoutTransitionExample.tsx               | 160 +++++-------------
 1 file changed, 43 insertions(+), 117 deletions(-)

diff --git a/apps/common-app/src/examples/LayoutAnimations/LayoutTransitionExample.tsx b/apps/common-app/src/examples/LayoutAnimations/LayoutTransitionExample.tsx
index bd067c18d8d..d97d16e7ed4 100644
--- a/apps/common-app/src/examples/LayoutAnimations/LayoutTransitionExample.tsx
+++ b/apps/common-app/src/examples/LayoutAnimations/LayoutTransitionExample.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect } from 'react';
+import React, { useState } from 'react';
 import {
   View,
   Text,
@@ -42,74 +42,48 @@ const INITIAL_LIST = [
 
 type RootStackParamList = {
   Home: undefined;
-  linear: { title: string; transition: any };
-  fading: { title: string; transition: any };
-  sequenced: { title: string; transition: any };
-  jumping: { title: string; transition: any };
-  curved: { title: string; transition: any };
-  entryexit: { title: string; transition: any };
+  TransitionScreen: { title: string; transition: any };
 };
 
 type HomeScreenProps = StackScreenProps<RootStackParamList, 'Home'>;
 
+const TRANSITIONS = [
+  { name: 'Linear', title: 'Linear Transition', transition: LinearTransition },
+  {
+    name: 'Sequenced',
+    title: 'Sequenced Transition',
+    transition: SequencedTransition,
+  },
+  { name: 'Fading', title: 'Fading Transition', transition: FadingTransition },
+  {
+    name: 'Jumping',
+    title: 'Jumping Transition',
+    transition: JumpingTransition,
+  },
+  { name: 'Curved', title: 'Curved Transition', transition: CurvedTransition },
+  {
+    name: 'EntryExit',
+    title: 'Entry/Exit Transition',
+    transition:
+      EntryExitTransition.entering(FlipInEasyX).exiting(FlipOutYRight),
+  },
+];
+
 function HomeScreen({ navigation }: HomeScreenProps) {
   return (
     <View style={styles.homeContainer}>
-      <Button
-        title={'Linear Transition'}
-        onPress={() =>
-          navigation.navigate('linear', {
-            title: 'LinearTransition',
-            transition: LinearTransition,
-          })
-        }
-      />
-      <Button
-        title="Sequenced Transition"
-        onPress={() =>
-          navigation.navigate('sequenced', {
-            title: 'SequencedTransition',
-            transition: SequencedTransition,
-          })
-        }
-      />
-      <Button
-        title="Fading Transition"
-        onPress={() =>
-          navigation.navigate('fading', {
-            title: 'FadingTransition',
-            transition: FadingTransition,
-          })
-        }
-      />
-      <Button
-        title="Jumping Transition"
-        onPress={() =>
-          navigation.navigate('jumping', {
-            title: 'JumpingTransition',
-            transition: JumpingTransition,
-          })
-        }
-      />
-      <Button
-        title="Curved Transition"
-        onPress={() =>
-          navigation.navigate('curved', {
-            title: 'CurvedTransition',
-            transition: CurvedTransition,
-          })
-        }
-      />
-      <Button
-        title="Entry/Exit Transition"
-        onPress={() =>
-          navigation.navigate('entryexit', {
-            title: 'EntryExit',
-            transition:
-              EntryExitTransition.entering(FlipInEasyX).exiting(FlipOutYRight),
-          })
-        }
-      />
+      {TRANSITIONS.map(({ name, title, transition }) => (
+        <Button
+          key={name}
+          title={title}
+          onPress={() =>
+            navigation.navigate('TransitionScreen', {
+              title,
+              transition,
+            })
+          }
+        />
+      ))}
     </View>
   );
 }
@@ -121,69 +95,17 @@ export default function Layout() {
     <NavigationContainer independent={true}>
       <Stack.Navigator screenOptions={{ title: 'Layout Transitions 🔥' }}>
         <Stack.Screen name="Home" component={HomeScreen} />
-        <Stack.Screen
-          name="linear"
-          component={Transition}
-          initialParams={{
-            title: 'LinearTransition',
-            transition: LinearTransition,
-          }}
-        />
-        <Stack.Screen
-          name="fading"
-          component={Transition}
-          initialParams={{
-            title: 'FadingTransition',
-            transition: FadingTransition,
-          }}
-        />
-        <Stack.Screen
-          name="sequenced"
-          component={Transition}
-          initialParams={{
-            title: 'SequencedTransition',
-            transition: SequencedTransition,
-          }}
-        />
-        <Stack.Screen
-          name="jumping"
-          component={Transition}
-          initialParams={{
-            title: 'JumpingTransition',
-            transition: JumpingTransition,
-          }}
-        />
-        <Stack.Screen
-          name="curved"
-          component={Transition}
-          initialParams={{
-            title: 'CurvedTransition',
-            transition: CurvedTransition,
-          }}
-        />
-        <Stack.Screen
-          name="entryexit"
-          component={Transition}
-          initialParams={{
-            title: 'EntryExit',
-            transition:
-              EntryExitTransition.entering(FlipInEasyX).exiting(FlipOutYRight),
-          }}
-        />
+        <Stack.Screen name="TransitionScreen" component={Transition} />
       </Stack.Navigator>
     </NavigationContainer>
   );
 }
 
-type TransitionProps = StackScreenProps<
-  RootStackParamList,
-  'linear' | 'fading' | 'sequenced' | 'jumping' | 'curved' | 'entryexit'
->;
+type TransitionProps = StackScreenProps<RootStackParamList, 'TransitionScreen'>;
 
 function Transition({ route }: TransitionProps) {
   const { title, transition } = route.params;
   const [items, setItems] = useState(INITIAL_LIST);
-  const [selected, _] = useState({ label: title, value: transition });
 
   const removeItem = (idToRemove: number) => {
     const updatedItems = items.filter((item) => item.id !== idToRemove);
@@ -194,7 +116,11 @@ function Transition({ route }: TransitionProps) {
     <SafeAreaView style={styles.container}>
       <Text style={styles.title}>{title}</Text>
       <View>
-        <Items selected={selected} items={items} onRemove={removeItem} />
+        <Items
+          selected={{ label: title, value: transition }}
+          items={items}
+          onRemove={removeItem}
+        />
       </View>
     </SafeAreaView>
   );

From acd4d2db3277e36f1dd0e145911163025875af0b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Patrycja=20Kali=C5=84ska?= <cysiak0412@gmail.com>
Date: Thu, 27 Jun 2024 12:41:29 +0200
Subject: [PATCH 4/5] Add fix for non-serializable values

---
 .../LayoutAnimations/LayoutTransitionExample.tsx       | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/apps/common-app/src/examples/LayoutAnimations/LayoutTransitionExample.tsx b/apps/common-app/src/examples/LayoutAnimations/LayoutTransitionExample.tsx
index d97d16e7ed4..370d92fcd57 100644
--- a/apps/common-app/src/examples/LayoutAnimations/LayoutTransitionExample.tsx
+++ b/apps/common-app/src/examples/LayoutAnimations/LayoutTransitionExample.tsx
@@ -42,7 +42,7 @@ const INITIAL_LIST = [
 
 type RootStackParamList = {
   Home: undefined;
-  TransitionScreen: { title: string; transition: any };
+  TransitionScreen: { title: string; transitionName: string };
 };
 
 type HomeScreenProps = StackScreenProps<RootStackParamList, 'Home'>;
@@ -79,7 +79,7 @@ function HomeScreen({ navigation }: HomeScreenProps) {
           onPress={() =>
             navigation.navigate('TransitionScreen', {
               title,
-              transition,
+              transitionName: name,
             })
           }
         />
@@ -104,9 +104,13 @@ export default function Layout() {
 type TransitionProps = StackScreenProps<RootStackParamList, 'TransitionScreen'>;
 
 function Transition({ route }: TransitionProps) {
-  const { title, transition } = route.params;
+  const { title, transitionName } = route.params;
   const [items, setItems] = useState(INITIAL_LIST);
 
+  const transition =
+    TRANSITIONS.find((t) => t.name === transitionName)?.transition ||
+    LinearTransition;
+
   const removeItem = (idToRemove: number) => {
     const updatedItems = items.filter((item) => item.id !== idToRemove);
     setItems(updatedItems);

From d0bf50c5e4673431e6e342fefae69eaaaaa41915 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Patrycja=20Kali=C5=84ska?= <cysiak0412@gmail.com>
Date: Fri, 28 Jun 2024 13:31:54 +0200
Subject: [PATCH 5/5] Small adjustments to comments

---
 .../examples/LayoutAnimations/LayoutTransitionExample.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/common-app/src/examples/LayoutAnimations/LayoutTransitionExample.tsx b/apps/common-app/src/examples/LayoutAnimations/LayoutTransitionExample.tsx
index 370d92fcd57..66b14d70b59 100644
--- a/apps/common-app/src/examples/LayoutAnimations/LayoutTransitionExample.tsx
+++ b/apps/common-app/src/examples/LayoutAnimations/LayoutTransitionExample.tsx
@@ -121,7 +121,7 @@ function Transition({ route }: TransitionProps) {
       <Text style={styles.title}>{title}</Text>
       <View>
         <Items
-          selected={{ label: title, value: transition }}
+          selected={{ label: title, transition }}
           items={items}
           onRemove={removeItem}
         />
@@ -131,7 +131,7 @@ function Transition({ route }: TransitionProps) {
 }
 
 interface ItemsProps {
-  selected: { label: string; value: any };
+  selected: { label: string; transition: any };
   items: Item[];
   onRemove: (id: number) => void;
 }
@@ -139,10 +139,10 @@ interface ItemsProps {
 function Items({ selected, items, onRemove }: ItemsProps) {
   return (
     <View style={styles.gridContainer}>
-      {items.map((item: { id: number; content: string; color: string }) => (
+      {items.map((item: Item) => (
         <Animated.View
           key={item.id}
-          layout={selected.value}
+          layout={selected.transition}
           exiting={FadeOut}
           style={[styles.tileContainer, { backgroundColor: item.color }]}>
           <Tile content={item.content} onRemove={() => onRemove(item.id)} />