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.
2022-12-18 19:55:56 +13:00 · 2022-12-18 19:55:56 +13:00 · 73c1dc3c2b
commit 73c1dc3c2b
parent ed1cb0d064
4 changed files with 124 additions and 42 deletions
--- a/App.tsx
+++ b/App.tsx
@ -1,30 +1,37 @@
 import {useState} from 'react'
-import {Button, View} from 'react-native'
-import AppIntroSlider from 'react-native-app-intro-slider'
+import {Button, Dimensions, Pressable, Text, View} from 'react-native'
 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 = ({
-    item,
-    index,
-  }: {
-    item: DocumentPickerResponse
-    index: number
-  }) => {
-    return <Item index={index} slide={slide} value={item} />
+  const prev = () => {
+    if (selected <= 0) return
+    setSelected(selected - 1)
+    setPaused(false)
+  }
+
+  const next = () => {
+    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 />
-      <AppIntroSlider
-        style={{backgroundColor}}
-        data={files}
-        renderItem={renderItem}
-        onSlideChange={setSlide}
-        showDoneButton={false}
-        initialNumToRender={3}
-      />
-      <Button title="Pick" onPress={pick} />
+      {files.length > 0 ? (
+        <View style={{alignItems: 'center'}}>
+          <Pressable onLongPress={pick} onPress={() => setPaused(!paused)}>
+            <Video
+              paused={paused}
+              style={{
+                height: height - height * 0.25,
+                width,
+                alignItems: 'center',
+              }}
+              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>
  )
 }
--- a/Item.tsx
+++ b/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
-        paused={slide !== index}
+      <Pressable onLongPress={onLongPress} onPress={() => setPaused(!paused)}>
+        <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,
-          width,
-          alignItems: 'center',
-        }}
-        source={{uri: value.uri}}
-        resizeMode="contain"
-        onLoad={response => {
-          setWidth(response.naturalSize.width)
-        }}
-      />
+          color: 'white',
+        }}>
+        {value.name}
+      </Text>
    </View>
  )
 }
--- a/package.json
+++ b/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"
--- a/yarn.lock
+++ b/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"