🚨 Stop embedding a VirtualizedList inside a ScrollView

screens/moves/MoveListScreen.tsx

@@ -1,7 +1,7 @@
 // screens/moves/MoveListScreen.tsx
 
 import React                                  from 'react';
-import { Button, FlatList, ScrollView, StyleSheet, View } from 'react-native';
+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';
@@ -37,18 +37,18 @@ const MoveListScreen = ({ navigation }: Props) => {
     );
 
     return (
-        <ScrollView>
-            <Button title="Add Move" onPress={() => navigation.navigate(MOVE_FORM, { move: undefined })}/>
-            <View>
         <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="Delete"
+                    <Button title="X"
                             color={styles.deleteButton.backgroundColor}
                             onPress={() => {
                                 if (item.id) {
@@ -59,8 +59,6 @@ const MoveListScreen = ({ navigation }: Props) => {
             )}
             keyExtractor={(item) => item.name}
         />
-            </View>
-        </ScrollView>
     );
 };