Make pick button centered

App.tsx

@@ -7,6 +7,8 @@ import DocumentPicker, {
 import Video from 'react-native-video'
 import {backgroundColor} from './constants'
 
+const buttonWidth = '45%'
+
 export default function App() {
   const [files, setFiles] = useState<DocumentPickerResponse[]>([])
   const [selected, setSelected] = useState(0)
@@ -38,7 +40,8 @@ export default function App() {
     <View
       style={{
         backgroundColor,
-        justifyContent: 'space-between',
+        justifyContent: 'center',
+        alignItems: 'center',
         flex: 1,
         flexGrow: 1,
         padding: 10,
@@ -63,19 +66,15 @@ export default function App() {
           <Text
             style={{
               color: 'white',
-              marginTop: 10,
+              margin: 10,
             }}>
             {files[selected].name} ({selected + 1}/ {files.length})
           </Text>
-        </View>
-      ) : (
-        <Button title="Pick" onPress={pick} />
-      )}
           <View style={{flexDirection: 'row', justifyContent: 'space-around'}}>
-        <View style={{width: '45%'}}>
+            <View style={{width: buttonWidth, marginRight: 10}}>
               <Button title="Prev" disabled={selected <= 0} onPress={prev} />
             </View>
-        <View style={{width: '45%'}}>
+            <View style={{width: buttonWidth}}>
               <Button
                 title="Next"
                 disabled={selected >= files.length - 1}
@@ -84,5 +83,11 @@ export default function App() {
             </View>
           </View>
         </View>
+      ) : (
+        <View style={{width: buttonWidth}}>
+          <Button title="Pick" onPress={pick} />
+        </View>
+      )}
+    </View>
   )
 }