🚨 Stop embedding a VirtualizedList inside a ScrollView

screens/moves/MoveListScreen.tsx

@@ -1,16 +1,16 @@
 // screens/moves/MoveListScreen.tsx
 
-import React                                              from 'react';
-import { Button, FlatList, ScrollView, StyleSheet, View } from 'react-native';
-import { StackNavigationProp }                            from '@react-navigation/stack';
-import { RootStackParamList }                             from "../../navigation/navigationTypes";
-import { useDispatch, useSelector }                       from 'react-redux';
-import { deleteMove, getMoves }                           from '../../redux/actions/moveActions';
-import { MoveState }                                      from "../../redux/reducers/moveReducer";
-import { AppDispatch }                                    from "../../redux/store";
-import MoveListItem                                       from "../../components/MoveListItem";
-import { MOVE_DETAIL, MOVE_FORM, MOVE_LIST }              from "../../navigation/constants";
-import { RouteProp, useFocusEffect }                      from "@react-navigation/native";
+import React                                  from 'react';
+import { Button, FlatList, StyleSheet, View } from 'react-native';
+import { StackNavigationProp }                from '@react-navigation/stack';
+import { RootStackParamList }                 from "../../navigation/navigationTypes";
+import { useDispatch, useSelector }           from 'react-redux';
+import { deleteMove, getMoves }               from '../../redux/actions/moveActions';
+import { MoveState }                          from "../../redux/reducers/moveReducer";
+import { AppDispatch }                        from "../../redux/store";
+import MoveListItem                           from "../../components/MoveListItem";
+import { MOVE_DETAIL, MOVE_FORM, MOVE_LIST }  from "../../navigation/constants";
+import { RouteProp, useFocusEffect }          from "@react-navigation/native";
 
 type MoveListScreenNavigationProp = StackNavigationProp<RootStackParamList, typeof MOVE_LIST>;
 type MoveListScreenRouteProp = RouteProp<RootStackParamList, typeof MOVE_LIST>;
@@ -37,30 +37,28 @@ const MoveListScreen = ({ navigation }: Props) => {
     );
 
     return (
-        <ScrollView>
-            <Button title="Add Move" onPress={() => navigation.navigate(MOVE_FORM, { move: undefined })}/>
-            <View>
-                <FlatList
-                    data={moves}
-                    renderItem={({ item }) => (
-                        <View style={styles.listItemContainer}>
-                            <MoveListItem
-                                move={item}
-                                onPress={() => navigation.navigate(MOVE_DETAIL, { move: item })}
-                            />
-                            <Button title="Delete"
-                                    color={styles.deleteButton.backgroundColor}
-                                    onPress={() => {
-                                        if (item.id) {
-                                            dispatch(deleteMove(item.id))
-                                        }
-                                    }}/>
-                        </View>
-                    )}
-                    keyExtractor={(item) => item.name}
-                />
-            </View>
-        </ScrollView>
+        <FlatList
+            data={moves}
+            ListHeaderComponent={
+                <Button title="Add Move" onPress={() => navigation.navigate(MOVE_FORM, { move: undefined })}/>
+            }
+            renderItem={({ item }) => (
+                <View style={styles.listItemContainer}>
+                    <MoveListItem
+                        move={item}
+                        onPress={() => navigation.navigate(MOVE_DETAIL, { move: item })}
+                    />
+                    <Button title="X"
+                            color={styles.deleteButton.backgroundColor}
+                            onPress={() => {
+                                if (item.id) {
+                                    dispatch(deleteMove(item.id))
+                                }
+                            }}/>
+                </View>
+            )}
+            keyExtractor={(item) => item.name}
+        />
     );
 };