Ran prettier

.eslintrc.js

@@ -13,4 +13,4 @@ module.exports = {
       },
     },
   ],
-};
+}

.prettierrc.js

@@ -4,4 +4,5 @@ module.exports = {
   bracketSpacing: false,
   singleQuote: true,
   trailingComma: 'all',
-};
+  semi: false,
+}

App.tsx

@@ -1,49 +1,51 @@
-import {useState} from 'react';
+import {useState} from 'react'
-import {Button, View} from 'react-native';
+import {Button, View} from 'react-native'
-import AppIntroSlider from 'react-native-app-intro-slider';
+import AppIntroSlider from 'react-native-app-intro-slider'
 import DocumentPicker, {
   DocumentPickerResponse,
-} from 'react-native-document-picker';
+} from 'react-native-document-picker'
-import {backgroundColor} from './constants';
+import {backgroundColor} from './constants'
-import Item from './Item';
+import Item from './Item'
 
 export default function App() {
-  const [files, setFiles] = useState<DocumentPickerResponse[]>([]);
+  const [files, setFiles] = useState<DocumentPickerResponse[]>([])
-  const [slide, setSlide] = useState(0);
+  const [slide, setSlide] = useState(0)
 
   const pick = async () => {
-    const picked = await DocumentPicker.pickMultiple();
+    const picked = await DocumentPicker.pickMultiple()
-    console.log(`Picked ${picked.length} files.`);
+    console.log(`Picked ${picked.length} files.`)
-    setFiles(picked);
+    setFiles(picked)
-  };
+  }
 
   const renderItem = ({
     item,
     index,
   }: {
-    item: DocumentPickerResponse;
+    item: DocumentPickerResponse
-    index: number;
+    index: number
   }) => {
-    return <Item index={index} slide={slide} value={item} />;
+    return <Item index={index} slide={slide} value={item} />
-  };
+  }
-
-  const slideChange = (index: number) => {
-    setSlide(index);
-  };
 
   return (
-    <View style={{height: '100%'}}>
+    <View
+      style={{
+        backgroundColor,
+        justifyContent: 'space-between',
+        flex: 1,
+        flexGrow: 1,
+        padding: 10,
+      }}>
+      <Item />
       <AppIntroSlider
         style={{backgroundColor}}
         data={files}
         renderItem={renderItem}
+        onSlideChange={setSlide}
         showDoneButton={false}
-        showNextButton={false}
+        initialNumToRender={3}
-        onSlideChange={slideChange}
       />
-      <View style={{padding: 20, backgroundColor}}>
+      <Button title="Pick" onPress={pick} />
-        <Button title="Pick" onPress={pick} />
-      </View>
     </View>
-  );
+  )
 }

Item.tsx

@@ -1,34 +1,35 @@
-import {Dimensions, View} from 'react-native';
+import {useState} from 'react'
-import {DocumentPickerResponse} from 'react-native-document-picker';
+import {Dimensions, View} from 'react-native'
-import Video from 'react-native-video';
+import {DocumentPickerResponse} from 'react-native-document-picker'
-import {backgroundColor} from './constants';
+import Video from 'react-native-video'
 
 export default function Item({
   slide,
   value,
   index,
 }: {
-  slide: number;
+  slide: number
-  value: DocumentPickerResponse;
+  value: DocumentPickerResponse
-  index: number;
+  index: number
 }) {
-  const height = Dimensions.get('screen').height;
+  const [paused, setPaused] = useState(false)
+  const [width, setWidth] = useState(0)
 
   return (
-    <View
+    <View style={{alignItems: 'center'}}>
-      style={{
-        height: '100%',
-        width: '100%',
-        justifyContent: 'center',
-        alignItems: 'center',
-        backgroundColor,
-      }}>
       <Video
-        key={value.name}
         paused={slide !== index}
-        style={{width: 200, height: height / 2}}
+        style={{
+          height: Dimensions.get('screen').height - 125,
+          width,
+          alignItems: 'center',
+        }}
         source={{uri: value.uri}}
+        resizeMode="contain"
+        onLoad={response => {
+          setWidth(response.naturalSize.width)
+        }}
       />
     </View>
-  );
+  )
 }

__tests__/App-test.tsx

@@ -2,13 +2,13 @@
  * @format
  */
 
-import 'react-native';
+import 'react-native'
-import React from 'react';
+import React from 'react'
-import App from '../App';
+import App from '../App'
 
 // Note: test renderer must be required after react-native.
-import renderer from 'react-test-renderer';
+import renderer from 'react-test-renderer'
 
 it('renders correctly', () => {
-  renderer.create(<App />);
+  renderer.create(<App />)
-});
+})

babel.config.js

@@ -1,3 +1,3 @@
 module.exports = {
   presets: ['module:metro-react-native-babel-preset'],
-};
+}

constants.ts

@@ -1 +1 @@
-export const backgroundColor = '#121212';
+export const backgroundColor = '#121212'

index.js

@@ -2,8 +2,8 @@
  * @format
  */
 
-import {AppRegistry} from 'react-native';
+import {AppRegistry} from 'react-native'
-import App from './App';
+import App from './App'
-import {name as appName} from './app.json';
+import {name as appName} from './app.json'
 
-AppRegistry.registerComponent(appName, () => App);
+AppRegistry.registerComponent(appName, () => App)

ios/swiper/Images.xcassets/AppIcon.appiconset/Contents.json

@@ -1,53 +1,53 @@
 {
-  "images" : [
+  "images": [
     {
-      "idiom" : "iphone",
+      "idiom": "iphone",
-      "scale" : "2x",
+      "scale": "2x",
-      "size" : "20x20"
+      "size": "20x20"
     },
     {
-      "idiom" : "iphone",
+      "idiom": "iphone",
-      "scale" : "3x",
+      "scale": "3x",
-      "size" : "20x20"
+      "size": "20x20"
     },
     {
-      "idiom" : "iphone",
+      "idiom": "iphone",
-      "scale" : "2x",
+      "scale": "2x",
-      "size" : "29x29"
+      "size": "29x29"
     },
     {
-      "idiom" : "iphone",
+      "idiom": "iphone",
-      "scale" : "3x",
+      "scale": "3x",
-      "size" : "29x29"
+      "size": "29x29"
     },
     {
-      "idiom" : "iphone",
+      "idiom": "iphone",
-      "scale" : "2x",
+      "scale": "2x",
-      "size" : "40x40"
+      "size": "40x40"
     },
     {
-      "idiom" : "iphone",
+      "idiom": "iphone",
-      "scale" : "3x",
+      "scale": "3x",
-      "size" : "40x40"
+      "size": "40x40"
     },
     {
-      "idiom" : "iphone",
+      "idiom": "iphone",
-      "scale" : "2x",
+      "scale": "2x",
-      "size" : "60x60"
+      "size": "60x60"
     },
     {
-      "idiom" : "iphone",
+      "idiom": "iphone",
-      "scale" : "3x",
+      "scale": "3x",
-      "size" : "60x60"
+      "size": "60x60"
     },
     {
-      "idiom" : "ios-marketing",
+      "idiom": "ios-marketing",
-      "scale" : "1x",
+      "scale": "1x",
-      "size" : "1024x1024"
+      "size": "1024x1024"
     }
   ],
-  "info" : {
+  "info": {
-    "author" : "xcode",
+    "author": "xcode",
-    "version" : 1
+    "version": 1
   }
 }

ios/swiper/Images.xcassets/Contents.json

@@ -1,6 +1,6 @@
 {
-  "info" : {
+  "info": {
-    "version" : 1,
+    "version": 1,
-    "author" : "xcode"
+    "author": "xcode"
   }
 }

metro.config.js

@@ -14,4 +14,4 @@ module.exports = {
       },
     }),
   },
-};
+}

package.json

@@ -4,6 +4,7 @@
   "private": true,
   "scripts": {
     "android": "react-native run-android",
+    "release": "react-native run-android --variant=release",
     "ios": "react-native run-ios",
     "start": "react-native start",
     "test": "jest",