feat: add pan switch fullscreen

alantoa · Feb 10, 2022 · 9fb3ba9 · 9fb3ba9
1 parent 25b18ce
commit 9fb3ba9
Show file tree

Hide file tree

Showing 8 changed files with 114 additions and 80 deletions.
diff --git a/example/ios/Podfile.lock b/example/ios/Podfile.lock
@@ -278,6 +278,8 @@ PODS:
     - glog
   - react-native-orientation-locker (1.4.0):
     - React-Core
+  - react-native-root-view-background-color (1.0.2):
+    - React
   - react-native-safe-area-context (3.3.2):
     - React-Core
   - react-native-video (5.2.0):
@@ -430,6 +432,7 @@ DEPENDENCIES:
   - React-jsinspector (from `../node_modules/react-native/ReactCommon/jsinspector`)
   - React-logger (from `../node_modules/react-native/ReactCommon/logger`)
   - react-native-orientation-locker (from `../node_modules/react-native-orientation-locker`)
+  - react-native-root-view-background-color (from `../node_modules/react-native-root-view-background-color`)
   - react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`)
   - react-native-video (from `../node_modules/react-native-video`)
   - React-perflogger (from `../node_modules/react-native/ReactCommon/reactperflogger`)
@@ -506,6 +509,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon/logger"
   react-native-orientation-locker:
     :path: "../node_modules/react-native-orientation-locker"
+  react-native-root-view-background-color:
+    :path: "../node_modules/react-native-root-view-background-color"
   react-native-safe-area-context:
     :path: "../node_modules/react-native-safe-area-context"
   react-native-video:
@@ -577,6 +582,7 @@ SPEC CHECKSUMS:
   React-jsinspector: d0374f7509d407d2264168b6d0fad0b54e300b85
   React-logger: 933f80c97c633ee8965d609876848148e3fef438
   react-native-orientation-locker: 2da91e5391971dace445495821c899c111dcad7a
+  react-native-root-view-background-color: e7ba21b82c8b7b2a1f902750f08c9dc1a5b38cea
   react-native-safe-area-context: 584dc04881deb49474363f3be89e4ca0e854c057
   react-native-video: a4c2635d0802f983594b7057e1bce8f442f0ad28
   React-perflogger: 93075d8931c32cd1fce8a98c15d2d5ccc4d891bd

diff --git a/example/ios/example.xcodeproj/project.pbxproj b/example/ios/example.xcodeproj/project.pbxproj
@@ -431,6 +431,7 @@
 			baseConfigurationReference = 6C97AB639B58BBB4B15BBE30 /* Pods-example-exampleTests.debug.xcconfig */;
 			buildSettings = {
 				BUNDLE_LOADER = "$(TEST_HOST)";
+				"CODE_SIGN_IDENTITY[sdk=macosx*]" = "Apple Development";
 				GCC_PREPROCESSOR_DEFINITIONS = (
 					"DEBUG=1",
 					"$(inherited)",
@@ -458,6 +459,7 @@
 			baseConfigurationReference = 1D0AE47A65C8663E3B452821 /* Pods-example-exampleTests.release.xcconfig */;
 			buildSettings = {
 				BUNDLE_LOADER = "$(TEST_HOST)";
+				"CODE_SIGN_IDENTITY[sdk=macosx*]" = "Apple Development";
 				COPY_PHASE_STRIP = NO;
 				INFOPLIST_FILE = exampleTests/Info.plist;
 				IPHONEOS_DEPLOYMENT_TARGET = 11.0;
@@ -562,7 +564,7 @@
 				COPY_PHASE_STRIP = NO;
 				ENABLE_STRICT_OBJC_MSGSEND = YES;
 				ENABLE_TESTABILITY = YES;
-				"EXCLUDED_ARCHS[sdk=iphonesimulator*]" = "";
+				"EXCLUDED_ARCHS[sdk=iphonesimulator*]" = "arm64 ";
 				GCC_C_LANGUAGE_STANDARD = gnu99;
 				GCC_DYNAMIC_NO_PIC = NO;
 				GCC_NO_COMMON_BLOCKS = YES;
@@ -628,7 +630,7 @@
 				COPY_PHASE_STRIP = YES;
 				ENABLE_NS_ASSERTIONS = NO;
 				ENABLE_STRICT_OBJC_MSGSEND = YES;
-				"EXCLUDED_ARCHS[sdk=iphonesimulator*]" = "";
+				"EXCLUDED_ARCHS[sdk=iphonesimulator*]" = "arm64 ";
 				GCC_C_LANGUAGE_STANDARD = gnu99;
 				GCC_NO_COMMON_BLOCKS = YES;
 				GCC_WARN_64_TO_32_BIT_CONVERSION = YES;

diff --git a/example/package.json b/example/package.json
@@ -18,10 +18,10 @@
     "react-native": "0.66.4",
     "react-native-awesome-slider": "^0.1.14",
     "react-native-gesture-handler": "1.10.3",
-    "react-native-inkwell": "^0.4.5",
     "react-native-orientation-locker": "^1.4.0",
     "react-native-reanimated": "^2.3.1",
     "react-native-redash": "^16.2.3",
+    "react-native-root-view-background-color": "git+https://github.com/alantoa/react-native-root-view-background-color",
     "react-native-safe-area-context": "^3.3.2",
     "react-native-screens": "^3.10.1",
     "react-native-video": "*"

diff --git a/example/src/screens/home.tsx b/example/src/screens/home.tsx
@@ -1,7 +1,7 @@
 import { useNavigation, useTheme } from '@react-navigation/native';
 import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
 import React, { useEffect, useRef } from 'react';
-import { Alert, ScrollView, View } from 'react-native';
+import { ScrollView, View } from 'react-native';
 import { useSharedValue } from 'react-native-reanimated';
 import {
   useSafeAreaInsets,
@@ -11,8 +11,6 @@ import VideoPlayer from 'react-native-video-player';
 import { Text } from './../../src/components';
 import type { RootParamList, CustomTheme } from '../../App';
 import { palette } from '../theme/palette';
-import InkWell from 'react-native-inkwell';
-import Slider from 'react-native-awesome-slider';
 
 export const Home = () => {
   const navigate = useNavigation<NativeStackNavigationProp<RootParamList>>();
@@ -50,13 +48,16 @@ export const Home = () => {
           'Billie Eilish - Bad Guy - When We All Fall Asleep, Where Do We Go?'
         }
         onTapBack={() => {
-          Alert.alert('onTapBack');
+          console.log('onTapBack');
         }}
         onTapMore={() => {
-          Alert.alert('onTapMore');
+          console.log('onTapMore');
         }}
         onToggleAutoPlay={(state: boolean) => {
-          Alert.alert(`onToggleAutoPlay state: ${state}`);
+          console.log(`onToggleAutoPlay state: ${state}`);
+        }}
+        onPanEvent={({ translationY }) => {
+          // console.log(`onPanEvent translationY: ${translationY}`);
         }}
         initPaused={true}
       />
@@ -81,21 +82,6 @@ export const Home = () => {
               h4
               color={theme.dark ? palette.G2(1) : palette.G7(1)}
             />
-            <InkWell
-              style={{
-                width: 200,
-                height: 200,
-                backgroundColor: 'white',
-              }}
-              contentContainerStyle={{
-                alignItems: 'center',
-                justifyContent: 'center',
-              }}
-              onDoubleTap={() => {
-                console.log('tapped');
-              }}>
-              <Text>Tap Here</Text>
-            </InkWell>
           </View>
         </ScrollView>
       </View>

diff --git a/example/yarn.lock b/example/yarn.lock
@@ -5708,11 +5708,6 @@ react-native-gesture-handler@1.10.3:
     invariant "^2.2.4"
     prop-types "^15.7.2"
 
-react-native-inkwell@^0.4.5:
-  version "0.4.5"
-  resolved "https://registry.yarnpkg.com/react-native-inkwell/-/react-native-inkwell-0.4.5.tgz#18144267f22ce883a1ecdb0b19b4b2c9a7a3ab3e"
-  integrity sha512-4lpk3BGOJeahzn+eglQeII18FHlkuoE0d8suinHHnNrNhq+QtqGjMz9VQCskeAbXXwMBBXnRGQup7MTWiPLK9g==
-
 react-native-orientation-locker@^1.4.0:
   version "1.4.0"
   resolved "https://registry.npmjs.org/react-native-orientation-locker/-/react-native-orientation-locker-1.4.0.tgz#ac27a0cd13d5eaaf06b0a2eed2f98f52fbac2f66"
@@ -5740,6 +5735,10 @@ react-native-redash@^16.2.3:
     normalize-svg-path "^1.0.1"
     parse-svg-path "^0.1.2"
 
+"react-native-root-view-background-color@git+https://github.com/alantoa/react-native-root-view-background-color":
+  version "1.0.2"
+  resolved "git+https://github.com/alantoa/react-native-root-view-background-color#f08ba172ef6c2cf051975f574bdbf0cf2b326f27"
+
 react-native-safe-area-context@^3.3.2:
   version "3.3.2"
   resolved "https://registry.npmjs.org/react-native-safe-area-context/-/react-native-safe-area-context-3.3.2.tgz#9549a2ce580f2374edb05e49d661258d1b8bcaed"

diff --git a/package.json b/package.json
@@ -49,7 +49,8 @@
   },
   "homepage": "https://github.com/MonsterAnan/react-native-video-player",
   "dependencies": {
-    "lodash.padstart": "^4.6.1"
+    "lodash.padstart": "^4.6.1",
+    "react-native-root-view-background-color": "git+https://github.com/alantoa/react-native-root-view-background-color"
   },
   "devDependencies": {
     "@babel/core": "^7.12.9",
@@ -90,6 +91,7 @@
     "react-native-gesture-handler": "*",
     "react-native-orientation-locker": "*",
     "react-native-reanimated": ">2",
+    "react-native-root-view-background-color": ">1",
     "react-native-safe-area-context": "*",
     "react-native-video": "*"
   },