From c4b2d5eeed411e3d688c1ee729ae8e0c67d0fb4d Mon Sep 17 00:00:00 2001
From: Brandon Presley <brandon@presley.nz>
Date: Sun, 18 Dec 2022 20:01:00 +1300
Subject: [PATCH] Make pick button centered

---
 App.tsx | 35 ++++++++++++++++++++---------------
 1 file changed, 20 insertions(+), 15 deletions(-)

diff --git a/App.tsx b/App.tsx
index 0469e3b..1a2e217 100644
--- a/App.tsx
+++ b/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,26 +66,28 @@ export default function App() {
           <Text
             style={{
               color: 'white',
-              marginTop: 10,
+              margin: 10,
             }}>
             {files[selected].name} ({selected + 1}/ {files.length})
           </Text>
+          <View style={{flexDirection: 'row', justifyContent: 'space-around'}}>
+            <View style={{width: buttonWidth, marginRight: 10}}>
+              <Button title="Prev" disabled={selected <= 0} onPress={prev} />
+            </View>
+            <View style={{width: buttonWidth}}>
+              <Button
+                title="Next"
+                disabled={selected >= files.length - 1}
+                onPress={next}
+              />
+            </View>
+          </View>
         </View>
       ) : (
-        <Button title="Pick" onPress={pick} />
+        <View style={{width: buttonWidth}}>
+          <Button title="Pick" onPress={pick} />
+        </View>
       )}
-      <View style={{flexDirection: 'row', justifyContent: 'space-around'}}>
-        <View style={{width: '45%'}}>
-          <Button title="Prev" disabled={selected <= 0} onPress={prev} />
-        </View>
-        <View style={{width: '45%'}}>
-          <Button
-            title="Next"
-            disabled={selected >= files.length - 1}
-            onPress={next}
-          />
-        </View>
-      </View>
     </View>
   )
 }