Added tutorial for animated list

Example/src/LayoutReanimation/AnimatedList.tsx

@@ -14,10 +14,10 @@ interface EventParticipant {
 
 function Participant({
   name,
-  onDelete,
+  onRemove,
 }: {
   name: string;
-  onDelete: () => void;
+  onRemove: () => void;
 }): React.ReactElement {
   return (
     <Animated.View
@@ -38,7 +38,7 @@ function Participant({
         },
       ]}>
       <Text>{name}</Text>
-      <Button title="Remove" color="red" onPress={onDelete} />
+      <Button title="Remove" color="red" onPress={onRemove} />
     </Animated.View>
   );
 }
@@ -56,7 +56,7 @@ export default function AnimatedListExample(): React.ReactElement {
     setInputValue('');
   };
 
-  const deleteParticipant = (id: string) => {
+  const removeParticipant = (id: string) => {
     setParticipantList(
       participantList.filter((participant) => participant.id !== id)
     );
@@ -80,7 +80,7 @@ export default function AnimatedListExample(): React.ReactElement {
             <Participant
               key={participant.id}
               name={participant.name}
-              onDelete={() => deleteParticipant(participant.id)}
+              onRemove={() => removeParticipant(participant.id)}
             />
           ))}
         </ScrollView>

docs/docs/guide/LayoutAnimations/_step3.md

@@ -0,0 +1,43 @@
+```jsx {1,10-26}
+import React, { useState } from 'react';
+import { View } from 'react-native';
+
+interface EventParticipant {
+  name: string;
+  id: string;
+}
+
+export default function ParticipantList(): React.ReactElement {
+    const [inputValue, setInputValue] = useState('');
+    const [participantList, setParticipantList] = useState<EventParticipant[]>(
+        []
+    );
+
+    const addParticipant = () => {
+        setParticipantList(
+        participantList.concat({ name: inputValue, id: Date.now().toString() })
+        );
+        setInputValue('');
+    };
+
+    const removeParticipant = (id: string) => {
+        setParticipantList(
+        participantList.filter((participant) => participant.id !== id)
+        );
+    };
+
+    return (
+        <View
+        style={[
+            {
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            height: '100%',
+            paddingBottom: 30,
+            },
+        ]}></View>
+    );
+}
+```

docs/docs/guide/LayoutAnimations/_step4.md

@@ -0,0 +1,83 @@
+```jsx {2,41-79}
+import React, { useState } from 'react';
+import { Button, View, Text, ScrollView, TextInput } from 'react-native';
+
+interface EventParticipant {
+  name: string;
+  id: string;
+}
+
+export default function ParticipantList(): React.ReactElement {
+    const [inputValue, setInputValue] = useState('');
+    const [participantList, setParticipantList] = useState<EventParticipant[]>(
+        []
+    );
+
+    const addParticipant = () => {
+        setParticipantList(
+        participantList.concat({ name: inputValue, id: Date.now().toString() })
+        );
+        setInputValue('');
+    };
+
+    const removeParticipant = (id: string) => {
+        setParticipantList(
+        participantList.filter((participant) => participant.id !== id)
+        );
+    };
+
+    return (
+        <View
+        style={[
+            {
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            height: '100%',
+            paddingBottom: 30,
+            },
+        ]}>
+            <ScrollView style={[{ width: '100%' }]}>
+            {participantList.map((participant) => (
+                <Text>{participant.name}</Text>
+            ))}
+            </ScrollView>
+
+            <View
+            style={[
+                {
+                width: '100%',
+                display: 'flex',
+                flexDirection: 'row',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+                padding: 10,
+                },
+            ]}>
+            <View
+                style={[
+                {
+                    display: 'flex',
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                },
+                ]}>
+                <Text>Add participant: </Text>
+                <TextInput
+                placeholder="Name"
+                value={inputValue}
+                onChangeText={setInputValue}
+                />
+            </View>
+
+            <Button
+                title="Add"
+                disabled={inputValue === ''}
+                onPress={addParticipant}
+            />
+            </View>
+        </View>
+    );
+}
+```

docs/docs/guide/LayoutAnimations/_step5.md

@@ -0,0 +1,115 @@
+```jsx {9-35,70-74}
+import React, { useState } from 'react';
+import { Button, View, Text, ScrollView, TextInput } from 'react-native';
+
+interface EventParticipant {
+  name: string;
+  id: string;
+}
+
+function Participant({
+  name,
+  onRemove,
+}: {
+  name: string;
+  onRemove: () => void;
+}): React.ReactElement {
+  return (
+    <View
+      style={[
+        {
+          borderBottomColor: 'black',
+          width: '100%',
+          borderBottomWidth: 1,
+          padding: 10,
+          display: 'flex',
+          flexDirection: 'row',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          backgroundColor: '#fffbeb',
+        },
+      ]}>
+      <Text>{name}</Text>
+      <Button title="Remove" color="red" onPress={onRemove} />
+    </View>
+  );
+}
+
+export default function ParticipantList(): React.ReactElement {
+    const [inputValue, setInputValue] = useState('');
+    const [participantList, setParticipantList] = useState<EventParticipant[]>(
+        []
+    );
+
+    const addParticipant = () => {
+        setParticipantList(
+        participantList.concat({ name: inputValue, id: Date.now().toString() })
+        );
+        setInputValue('');
+    };
+
+    const removeParticipant = (id: string) => {
+        setParticipantList(
+        participantList.filter((participant) => participant.id !== id)
+        );
+    };
+
+    return (
+        <View
+        style={[
+            {
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            height: '100%',
+            paddingBottom: 30,
+            },
+        ]}>
+            <ScrollView style={[{ width: '100%' }]}>
+            {participantList.map((participant) => (
+                 <Participant
+                    key={participant.id}
+                    name={participant.name}
+                    onRemove={() => removeParticipant(participant.id)}
+                    />
+            ))}
+            </ScrollView>
+
+            <View
+            style={[
+                {
+                width: '100%',
+                display: 'flex',
+                flexDirection: 'row',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+                padding: 10,
+                },
+            ]}>
+            <View
+                style={[
+                {
+                    display: 'flex',
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                },
+                ]}>
+                <Text>Add participant: </Text>
+                <TextInput
+                placeholder="Name"
+                value={inputValue}
+                onChangeText={setInputValue}
+                />
+            </View>
+
+            <Button
+                title="Add"
+                disabled={inputValue === ''}
+                onPress={addParticipant}
+            />
+            </View>
+        </View>
+    );
+}
+```

docs/docs/guide/LayoutAnimations/_step7.md

@@ -0,0 +1,38 @@
+```jsx {3,18,34}
+import React, { useState } from 'react';
+import { Button, View, Text, ScrollView, TextInput } from 'react-native';
+import Animated from 'react-native-reanimated';
+
+interface EventParticipant {
+  name: string;
+  id: string;
+}
+
+function Participant({
+  name,
+  onRemove,
+}: {
+  name: string;
+  onRemove: () => void;
+}): React.ReactElement {
+  return (
+    <Animated.View
+      style={[
+        {
+          borderBottomColor: 'black',
+          width: '100%',
+          borderBottomWidth: 1,
+          padding: 10,
+          display: 'flex',
+          flexDirection: 'row',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          backgroundColor: '#fffbeb',
+        },
+      ]}>
+      <Text>{name}</Text>
+      <Button title="Remove" color="red" onPress={onRemove} />
+    </Animated.View>
+  );
+}
+```

docs/docs/guide/LayoutAnimations/_step8.md

@@ -0,0 +1,45 @@
+```jsx {3-7,23-25}
+import React, { useState } from 'react';
+import { Button, View, Text, ScrollView, TextInput } from 'react-native';
+import Animated, {
+  Layout,
+  LightSpeedInLeft,
+  LightSpeedOutRight,
+} from 'react-native-reanimated';
+
+interface EventParticipant {
+  name: string;
+  id: string;
+}
+
+function Participant({
+  name,
+  onRemove,
+}: {
+  name: string;
+  onRemove: () => void;
+}): React.ReactElement {
+  return (
+    <Animated.View
+      entering={LightSpeedInLeft}
+      exiting={LightSpeedOutRight}
+      layout={Layout.springify()}
+      style={[
+        {
+          borderBottomColor: 'black',
+          width: '100%',
+          borderBottomWidth: 1,
+          padding: 10,
+          display: 'flex',
+          flexDirection: 'row',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          backgroundColor: '#fffbeb',
+        },
+      ]}>
+      <Text>{name}</Text>
+      <Button title="Remove" color="red" onPress={onRemove} />
+    </Animated.View>
+  );
+}
+```