Use buttons instead of swiping

I had so much trouble with both react-native-swiper
and the app slider intro libraries. I would like to be able
to swipe between videos but will settle with this for now.

App.tsx

@@ -1,30 +1,37 @@
 import {useState} from 'react'
-import {Button, View} from 'react-native'
+import {Button, Dimensions, Pressable, Text, View} from 'react-native'
-import AppIntroSlider from 'react-native-app-intro-slider'
 import DocumentPicker, {
   DocumentPickerResponse,
+  types,
 } from 'react-native-document-picker'
+import Video from 'react-native-video'
 import {backgroundColor} from './constants'
-import Item from './Item'
 
 export default function App() {
   const [files, setFiles] = useState<DocumentPickerResponse[]>([])
-  const [slide, setSlide] = useState(0)
+  const [selected, setSelected] = useState(0)
+  const [paused, setPaused] = useState(false)
+  const [width, setWidth] = useState(0)
+
+  const height = Dimensions.get('screen').height
 
   const pick = async () => {
-    const picked = await DocumentPicker.pickMultiple()
+    const picked = await DocumentPicker.pickMultiple({type: types.video})
+    setSelected(0)
     console.log(`Picked ${picked.length} files.`)
     setFiles(picked)
   }
 
-  const renderItem = ({
+  const prev = () => {
-    item,
+    if (selected <= 0) return
-    index,
+    setSelected(selected - 1)
-  }: {
+    setPaused(false)
-    item: DocumentPickerResponse
+  }
-    index: number
+
-  }) => {
+  const next = () => {
-    return <Item index={index} slide={slide} value={item} />
+    if (selected >= files.length - 1) return
+    setSelected(selected + 1)
+    setPaused(false)
   }
 
   return (
@@ -36,16 +43,46 @@ export default function App() {
         flexGrow: 1,
         padding: 10,
       }}>
-      <Item />
+      {files.length > 0 ? (
-      <AppIntroSlider
+        <View style={{alignItems: 'center'}}>
-        style={{backgroundColor}}
+          <Pressable onLongPress={pick} onPress={() => setPaused(!paused)}>
-        data={files}
+            <Video
-        renderItem={renderItem}
+              paused={paused}
-        onSlideChange={setSlide}
+              style={{
-        showDoneButton={false}
+                height: height - height * 0.25,
-        initialNumToRender={3}
+                width,
-      />
+                alignItems: 'center',
-      <Button title="Pick" onPress={pick} />
+              }}
+              source={{uri: files[selected].uri}}
+              resizeMode="contain"
+              onLoad={response => {
+                setWidth(response.naturalSize.width)
+              }}
+            />
+          </Pressable>
+          <Text
+            style={{
+              color: 'white',
+              marginTop: 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%'}}>
+          <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>
   )
 }

Item.tsx

@@ -1,35 +1,43 @@
 import {useState} from 'react'
-import {Dimensions, View} from 'react-native'
+import {Dimensions, Pressable, Text, View} from 'react-native'
 import {DocumentPickerResponse} from 'react-native-document-picker'
 import Video from 'react-native-video'
 
 export default function Item({
-  slide,
   value,
-  index,
+  onLongPress,
 }: {
-  slide: number
   value: DocumentPickerResponse
-  index: number
+  onLongPress: () => void
 }) {
   const [paused, setPaused] = useState(false)
   const [width, setWidth] = useState(0)
 
+  const height = Dimensions.get('screen').height
+
   return (
     <View style={{alignItems: 'center'}}>
-      <Video
+      <Pressable onLongPress={onLongPress} onPress={() => setPaused(!paused)}>
-        paused={slide !== index}
+        <Video
+          paused={paused}
+          style={{
+            height: height - height * 0.25,
+            width,
+            alignItems: 'center',
+          }}
+          source={{uri: value.uri}}
+          resizeMode="contain"
+          onLoad={response => {
+            setWidth(response.naturalSize.width)
+          }}
+        />
+      </Pressable>
+      <Text
         style={{
-          height: Dimensions.get('screen').height - 125,
+          color: 'white',
-          width,
+        }}>
-          alignItems: 'center',
+        {value.name}
-        }}
+      </Text>
-        source={{uri: value.uri}}
-        resizeMode="contain"
-        onLoad={response => {
-          setWidth(response.naturalSize.width)
-        }}
-      />
     </View>
   )
 }

package.json

@@ -17,6 +17,8 @@
     "react-native-app-intro-slider": "^4.0.4",
     "react-native-document-picker": "^8.1.3",
     "react-native-fs": "^2.20.0",
+    "react-native-gesture-handler": "^2.8.0",
+    "react-native-swipe-gestures": "^1.0.5",
     "react-native-swiper": "^1.6.0",
     "react-native-vector-icons": "^9.2.0",
     "react-native-video": "^5.2.1"

yarn.lock

@@ -772,6 +772,13 @@
     exec-sh "^0.3.2"
     minimist "^1.2.0"
 
+"@egjs/hammerjs@^2.0.17":
+  version "2.0.17"
+  resolved "https://registry.yarnpkg.com/@egjs/hammerjs/-/hammerjs-2.0.17.tgz#5dc02af75a6a06e4c2db0202cae38c9263895124"
+  integrity sha512-XQsZgjm2EcVUiZQf11UBJQfmZeEmOW8DpI1gsFeln6w0ae0ii4dMQEQ0kjl6DspdWX1aGY1/loyXnP0JS06e/A==
+  dependencies:
+    "@types/hammerjs" "^2.0.36"
+
 "@eslint/eslintrc@^0.4.3":
   version "0.4.3"
   resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-0.4.3.tgz#9e42981ef035beb3dd49add17acb96e8ff6f394c"
@@ -1370,6 +1377,11 @@
   dependencies:
     "@types/node" "*"
 
+"@types/hammerjs@^2.0.36":
+  version "2.0.41"
+  resolved "https://registry.yarnpkg.com/@types/hammerjs/-/hammerjs-2.0.41.tgz#f6ecf57d1b12d2befcce00e928a6a097c22980aa"
+  integrity sha512-ewXv/ceBaJprikMcxCmWU1FKyMAQ2X7a9Gtmzw8fcg2kIePI1crERDM818W+XYrxqdBBOdlf2rm137bU+BltCA==
+
 "@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0", "@types/istanbul-lib-coverage@^2.0.1":
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.4.tgz#8467d4b3c087805d63580480890791277ce35c44"
@@ -3538,6 +3550,13 @@ hermes-profile-transformer@^0.0.6:
   dependencies:
     source-map "^0.7.3"
 
+hoist-non-react-statics@^3.3.0:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
+  integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
+  dependencies:
+    react-is "^16.7.0"
+
 hosted-git-info@^2.1.4:
   version "2.8.9"
   resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.9.tgz#dffc0bf9a21c02209090f2aa69429e1414daf3f9"
@@ -4677,7 +4696,7 @@ lodash.truncate@^4.4.2:
   resolved "https://registry.yarnpkg.com/lodash.truncate/-/lodash.truncate-4.4.2.tgz#5a350da0b1113b837ecfffd5812cbe58d6eae193"
   integrity sha512-jttmRe7bRse52OsWIMDLaXxWqRAmtIUccAQ3garviCqJjafXOfNMO0yMfNpdD6zbGaTU0P5Nz7e7gAT6cKmJRw==
 
-lodash@^4.17.10, lodash@^4.17.15, lodash@^4.7.0:
+lodash@^4.17.10, lodash@^4.17.15, lodash@^4.17.21, lodash@^4.7.0:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
@@ -5710,7 +5729,7 @@ react-devtools-core@4.24.0:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
   integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
 
-react-is@^16.13.1:
+react-is@^16.13.1, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@@ -5750,11 +5769,27 @@ react-native-fs@^2.20.0:
     base-64 "^0.1.0"
     utf8 "^3.0.0"
 
+react-native-gesture-handler@^2.8.0:
+  version "2.8.0"
+  resolved "https://registry.yarnpkg.com/react-native-gesture-handler/-/react-native-gesture-handler-2.8.0.tgz#ef9857871c10663c95a51546225b6e00cd4740cf"
+  integrity sha512-poOSfz/w0IyD6Qwq7aaIRRfEaVTl1ecQFoyiIbpOpfNTjm2B1niY2FLrdVQIOtIOe+K9nH55Qal04nr4jGkHdQ==
+  dependencies:
+    "@egjs/hammerjs" "^2.0.17"
+    hoist-non-react-statics "^3.3.0"
+    invariant "^2.2.4"
+    lodash "^4.17.21"
+    prop-types "^15.7.2"
+
 react-native-gradle-plugin@^0.70.3:
   version "0.70.3"
   resolved "https://registry.yarnpkg.com/react-native-gradle-plugin/-/react-native-gradle-plugin-0.70.3.tgz#cbcf0619cbfbddaa9128701aa2d7b4145f9c4fc8"
   integrity sha512-oOanj84fJEXUg9FoEAQomA8ISG+DVIrTZ3qF7m69VQUJyOGYyDZmPqKcjvRku4KXlEH6hWO9i4ACLzNBh8gC0A==
 
+react-native-swipe-gestures@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/react-native-swipe-gestures/-/react-native-swipe-gestures-1.0.5.tgz#a172cb0f3e7478ccd681fd36b8bfbcdd098bde7c"
+  integrity sha512-Ns7Bn9H/Tyw278+5SQx9oAblDZ7JixyzeOczcBK8dipQk2pD7Djkcfnf1nB/8RErAmMLL9iXgW0QHqiII8AhKw==
+
 react-native-swiper@^1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/react-native-swiper/-/react-native-swiper-1.6.0.tgz#59fdbdf95addee49630312f27077622c27776819"