feat: improve example app with a parallax effect

2025-02-16 16:37:29 +00:00 · 2023-05-06 13:50:14 -03:00 · 2023-05-06 13:50:14 -03:00 · 05e54cfe21
commit 05e54cfe21
parent 4496ad19e3
8 changed files with 196 additions and 44 deletions
--- a/example/babel.config.js
+++ b/example/babel.config.js
@ -13,5 +13,7 @@ module.exports = {
        },
      },
    ],
+    '@babel/plugin-proposal-export-namespace-from',
+    'react-native-reanimated/plugin',
  ],
 };
--- a/example/ios/Podfile.lock
+++ b/example/ios/Podfile.lock
@ -339,6 +339,33 @@ PODS:
    - React-jsi (= 0.67.5)
    - React-logger (= 0.67.5)
    - React-perflogger (= 0.67.5)
+  - RNReanimated (2.9.1):
+    - DoubleConversion
+    - FBLazyVector
+    - FBReactNativeSpec
+    - glog
+    - RCT-Folly
+    - RCTRequired
+    - RCTTypeSafety
+    - React-callinvoker
+    - React-Core
+    - React-Core/DevSupport
+    - React-Core/RCTWebSocket
+    - React-CoreModules
+    - React-cxxreact
+    - React-jsi
+    - React-jsiexecutor
+    - React-jsinspector
+    - React-RCTActionSheet
+    - React-RCTAnimation
+    - React-RCTBlob
+    - React-RCTImage
+    - React-RCTLinking
+    - React-RCTNetwork
+    - React-RCTSettings
+    - React-RCTText
+    - ReactCommon/turbomodule/core
+    - Yoga
  - Yoga (1.14.0)
  - YogaKit (1.18.1):
    - Yoga (~> 1.14)
@ -398,6 +425,7 @@ DEPENDENCIES:
  - React-RCTVibration (from `../node_modules/react-native/Libraries/Vibration`)
  - React-runtimeexecutor (from `../node_modules/react-native/ReactCommon/runtimeexecutor`)
  - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
+  - RNReanimated (from `../node_modules/react-native-reanimated`)
  - Yoga (from `../node_modules/react-native/ReactCommon/yoga`)

 SPEC REPOS:
@ -478,6 +506,8 @@ EXTERNAL SOURCES:
    :path: "../node_modules/react-native/ReactCommon/runtimeexecutor"
  ReactCommon:
    :path: "../node_modules/react-native/ReactCommon"
+  RNReanimated:
+    :path: "../node_modules/react-native-reanimated"
  Yoga:
    :path: "../node_modules/react-native/ReactCommon/yoga"

@ -512,7 +542,7 @@ SPEC CHECKSUMS:
  React-jsiexecutor: e9895ccae253323ca70f693945fecbba091f0abd
  React-jsinspector: ec4fe4f65ccf9d67c8429dda955d3412db8a25ef
  React-logger: 85f4ef06b9723714b2dfa5b0e5502b673b271b58
-  react-native-transparent-video: 54d0f657780b0a79a9113167342520cc28954ee0
+  react-native-transparent-video: e484ad11ace8e5f62516e2c5e15efd3cb4df24b0
  React-perflogger: d32ee13196f4ae2e4098fb7f8e7ed4f864c6fb0f
  React-RCTActionSheet: 81779c09e34a6a3d6b15783407ba9016a774f535
  React-RCTAnimation: b778eaaa42a884abcc5719035a7a0b2f54672658
@ -525,6 +555,7 @@ SPEC CHECKSUMS:
  React-RCTVibration: c3b8a3245267a3849b0c7cb91a37606bf5f3aa65
  React-runtimeexecutor: 434efc9e5b6d0f14f49867f130b39376c971c1aa
  ReactCommon: a30c2448e5a88bae6fcb0e3da124c14ae493dac1
+  RNReanimated: b5b17149593e7c05e4ec5c0efea1f21e05829510
  Yoga: 099a946cbf84c9b32ffdc4278d72db26710ecf92
  YogaKit: f782866e155069a2cca2517aafea43200b01fd5a

--- a/example/package.json
+++ b/example/package.json
@ -9,13 +9,15 @@
    "pods": "pod-install --quiet"
  },
  "dependencies": {
+    "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
    "react": "17.0.2",
-    "react-native": "0.67.5"
+    "react-native": "0.67.5",
+    "react-native-reanimated": "2.9.1"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@babel/runtime": "^7.12.5",
-    "metro-react-native-babel-preset": "^0.66.2",
-    "babel-plugin-module-resolver": "^4.1.0"
+    "babel-plugin-module-resolver": "^4.1.0",
+    "metro-react-native-babel-preset": "^0.66.2"
  }
-}
+}
--- a/example/src/App.tsx
+++ b/example/src/App.tsx
@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';

 import { StyleSheet, View } from 'react-native';
-import TransparentVideo from 'react-native-transparent-video';
+import Parallax from './components/Parallax';

 const video1 = require('../assets/videos/1.mp4');
 const video2 = require('../assets/videos/2.mp4');
@ -31,10 +31,7 @@ export default () => {

  return (
    <View style={{ ...styles.container, ...{ backgroundColor: background } }}>
-      <TransparentVideo source={video1} style={styles.video1} />
-      <TransparentVideo source={video2} style={styles.video2} />
-      <TransparentVideo source={video3} style={styles.video3} />
-      <TransparentVideo source={video4} style={styles.video4} />
+      <Parallax layers={[video1, video2, video3, video4]} />
    </View>
  );
 };
@ -44,36 +41,11 @@ const styles = StyleSheet.create({
    flex: 1,
    alignItems: 'center',
  },
-  video1: {
+  video: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
-    zIndex: 0,
-  },
-  video2: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    zIndex: 1,
-  },
-  video3: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    zIndex: 2,
-  },
-  video4: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    zIndex: 3,
  },
 });
--- a/example/src/components/Parallax.tsx
+++ b/example/src/components/Parallax.tsx
@ -0,0 +1,15 @@
+import React from 'react';
+
+import ParallaxVideo from './ParallaxVideo';
+
+const Parallax = ({ layers }: any) => {
+  return (
+    <>
+      {layers.map((layer: any, index: number) => (
+        <ParallaxVideo key={'layer' + index} source={layer} zIndex={++index} />
+      ))}
+    </>
+  );
+};
+
+export default Parallax;
--- a/example/src/components/ParallaxVideo.tsx
+++ b/example/src/components/ParallaxVideo.tsx
@ -0,0 +1,84 @@
+import React from 'react';
+
+import { StyleSheet } from 'react-native';
+import TransparentVideo from 'react-native-transparent-video';
+import Animated, {
+  useAnimatedSensor,
+  SensorType,
+  useAnimatedStyle,
+  interpolate,
+  withTiming,
+} from 'react-native-reanimated';
+
+const OFFSET = 50;
+const PI = Math.PI;
+const HALF_PI = PI / 2;
+
+const ParallaxVideo = ({ source, zIndex }: any) => {
+  const sensor = useAnimatedSensor(SensorType.ROTATION, { interval: 10 });
+
+  const layerStyle = useAnimatedStyle(() => {
+    const { yaw, pitch, roll } = sensor.sensor.value;
+    console.log(yaw, pitch, roll, 99);
+
+    const top = withTiming(
+      interpolate(
+        pitch,
+        [-HALF_PI, HALF_PI],
+        [-OFFSET / zIndex - OFFSET, OFFSET / zIndex - OFFSET]
+      ),
+      { duration: 100 }
+    );
+    const left = withTiming(
+      interpolate(
+        roll,
+        [-PI, PI],
+        [(-OFFSET * 2) / zIndex - OFFSET, (OFFSET * 2) / zIndex - OFFSET]
+      ),
+      { duration: 100 }
+    );
+    const right = withTiming(
+      interpolate(
+        roll,
+        [-PI, PI],
+        [(OFFSET * 2) / zIndex - OFFSET, (-OFFSET * 2) / zIndex - OFFSET]
+      ),
+      { duration: 100 }
+    );
+    const bottom = withTiming(
+      interpolate(
+        pitch,
+        [-HALF_PI, HALF_PI],
+        [OFFSET / zIndex - OFFSET, -OFFSET / zIndex - OFFSET]
+      ),
+      { duration: 10 }
+    );
+    return {
+      top,
+      left,
+      right,
+      bottom,
+    };
+  });
+
+  return (
+    <Animated.View style={[styles.container, layerStyle]}>
+      <TransparentVideo source={source} style={styles.video} />
+    </Animated.View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+  },
+  video: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+  },
+});
+
+export default ParallaxVideo;
--- a/example/yarn.lock
+++ b/example/yarn.lock
@ -169,7 +169,7 @@
  dependencies:
    "@babel/types" "^7.18.6"

-"@babel/helper-plugin-utils@^7.12.13", "@babel/helper-plugin-utils@^7.16.7", "@babel/helper-plugin-utils@^7.18.6", "@babel/helper-plugin-utils@^7.18.9", "@babel/helper-plugin-utils@^7.19.0", "@babel/helper-plugin-utils@^7.20.2", "@babel/helper-plugin-utils@^7.21.5", "@babel/helper-plugin-utils@^7.8.0":
+"@babel/helper-plugin-utils@^7.12.13", "@babel/helper-plugin-utils@^7.16.7", "@babel/helper-plugin-utils@^7.18.6", "@babel/helper-plugin-utils@^7.18.9", "@babel/helper-plugin-utils@^7.19.0", "@babel/helper-plugin-utils@^7.20.2", "@babel/helper-plugin-utils@^7.21.5", "@babel/helper-plugin-utils@^7.8.0", "@babel/helper-plugin-utils@^7.8.3":
  version "7.21.5"
  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.21.5.tgz#345f2377d05a720a4e5ecfa39cbf4474a4daed56"
  integrity sha512-0WDaIlXKOX/3KfBK/dwP1oQGiPh6rjMkT7HIRv7i5RR2VUMwrx5ZL0dwBkKx7+SW1zwNdgjHd34IMk5ZjTeHVg==
@ -281,6 +281,14 @@
    "@babel/helper-plugin-utils" "^7.18.9"
    "@babel/plugin-syntax-export-default-from" "^7.18.6"

+"@babel/plugin-proposal-export-namespace-from@^7.17.12", "@babel/plugin-proposal-export-namespace-from@^7.18.9":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-export-namespace-from/-/plugin-proposal-export-namespace-from-7.18.9.tgz#5f7313ab348cdb19d590145f9247540e94761203"
+  integrity sha512-k1NtHyOMvlDDFeb9G5PhUXuGj8m/wiwojgQVEhJ/fsVsMCpLyOP4h0uGEjYJKrRI+EVPlb5Jk+Gt9P97lOGwtA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.9"
+    "@babel/plugin-syntax-export-namespace-from" "^7.8.3"
+
 "@babel/plugin-proposal-nullish-coalescing-operator@^7.0.0", "@babel/plugin-proposal-nullish-coalescing-operator@^7.1.0":
  version "7.18.6"
  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.18.6.tgz#fdd940a99a740e577d6c753ab6fbb43fdb9467e1"
@ -338,6 +346,13 @@
  dependencies:
    "@babel/helper-plugin-utils" "^7.18.6"

+"@babel/plugin-syntax-export-namespace-from@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-export-namespace-from/-/plugin-syntax-export-namespace-from-7.8.3.tgz#028964a9ba80dbc094c915c487ad7c4e7a66465a"
+  integrity sha512-MXf5laXo6c1IbEbegDmzGPwGNTsHZmEy6QGznu5Sh2UCWvueywb2ee+CCE4zQiZstxU9BMoQO9i6zUFSY0Kj0Q==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.3"
+
 "@babel/plugin-syntax-flow@^7.0.0", "@babel/plugin-syntax-flow@^7.18.6", "@babel/plugin-syntax-flow@^7.2.0":
  version "7.21.4"
  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-flow/-/plugin-syntax-flow-7.21.4.tgz#3e37fca4f06d93567c1cd9b75156422e90a67107"
@ -502,7 +517,7 @@
    "@babel/helper-plugin-utils" "^7.21.5"
    "@babel/helper-simple-access" "^7.21.5"

-"@babel/plugin-transform-object-assign@^7.0.0":
+"@babel/plugin-transform-object-assign@^7.0.0", "@babel/plugin-transform-object-assign@^7.16.7":
  version "7.18.6"
  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-assign/-/plugin-transform-object-assign-7.18.6.tgz#7830b4b6f83e1374a5afb9f6111bcfaea872cdd2"
  integrity sha512-mQisZ3JfqWh2gVXvfqYCAAyRs6+7oev+myBsTwW5RnPhYXOTuCEw2oe3YgxlXMViXUS53lG8koulI7mJ+8JE+A==
@ -639,7 +654,7 @@
    "@babel/helper-validator-option" "^7.21.0"
    "@babel/plugin-transform-flow-strip-types" "^7.21.0"

-"@babel/preset-typescript@^7.1.0":
+"@babel/preset-typescript@^7.1.0", "@babel/preset-typescript@^7.16.7":
  version "7.21.5"
  resolved "https://registry.yarnpkg.com/@babel/preset-typescript/-/preset-typescript-7.21.5.tgz#68292c884b0e26070b4d66b202072d391358395f"
  integrity sha512-iqe3sETat5EOrORXiQ6rWfoOg2y68Cs75B9wNxdPW4kixJxh7aXQE1KPdWLDniC24T/6dSnguF33W9j/ZZQcmA==
@ -969,6 +984,11 @@
  dependencies:
    "@types/node" "*"

+"@types/invariant@^2.2.35":
+  version "2.2.35"
+  resolved "https://registry.yarnpkg.com/@types/invariant/-/invariant-2.2.35.tgz#cd3ebf581a6557452735688d8daba6cf0bd5a3be"
+  integrity sha512-DxX1V9P8zdJPYQat1gHyY0xj3efl8gnMVjiM9iCY6y27lj+PoQWkgjt8jDqmovPqULkKVpKRg8J36iQiA+EtEg==
+
 "@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0":
  version "2.0.4"
  resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.4.tgz#8467d4b3c087805d63580480890791277ce35c44"
@ -2501,6 +2521,11 @@ lodash.debounce@^4.0.8:
  resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
  integrity sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==

+lodash.isequal@^4.5.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0"
+  integrity sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==
+
 lodash.throttle@^4.1.1:
  version "4.1.1"
  resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
@ -3320,6 +3345,20 @@ react-native-codegen@^0.0.8:
    jscodeshift "^0.11.0"
    nullthrows "^1.1.1"

+react-native-reanimated@2.9.1:
+  version "2.9.1"
+  resolved "https://registry.yarnpkg.com/react-native-reanimated/-/react-native-reanimated-2.9.1.tgz#d9a932e312c13c05b4f919e43ebbf76d996e0bc1"
+  integrity sha512-309SIhDBwY4F1n6e5Mr5D1uPZm2ESIcmZsGXHUu8hpKX4oIOlZj2MilTk+kHhi05LjChoJkcpfkstotCJmPRPg==
+  dependencies:
+    "@babel/plugin-proposal-export-namespace-from" "^7.17.12"
+    "@babel/plugin-transform-object-assign" "^7.16.7"
+    "@babel/preset-typescript" "^7.16.7"
+    "@types/invariant" "^2.2.35"
+    invariant "^2.2.4"
+    lodash.isequal "^4.5.0"
+    setimmediate "^1.0.5"
+    string-hash-64 "^1.0.3"
+
 react-native@0.67.5:
  version "0.67.5"
  resolved "https://registry.yarnpkg.com/react-native/-/react-native-0.67.5.tgz#9f2aeabf0766fb4bd5385685f4f4f2406bcdf819"
@ -3633,6 +3672,11 @@ set-value@^2.0.0, set-value@^2.0.1:
    is-plain-object "^2.0.3"
    split-string "^3.0.1"

+setimmediate@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285"
+  integrity sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==
+
 setprototypeof@1.2.0:
  version "1.2.0"
  resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.2.0.tgz#66c9a24a73f9fc28cbe66b09fed3d33dcaf1b424"
@ -3811,6 +3855,11 @@ stream-buffers@2.2.x:
  resolved "https://registry.yarnpkg.com/stream-buffers/-/stream-buffers-2.2.0.tgz#91d5f5130d1cef96dcfa7f726945188741d09ee4"
  integrity sha512-uyQK/mx5QjHun80FLJTfaWE7JtwfRMKBLkMne6udYOmvH0CawotVa7TfgYHzAnpphn4+TweIx1QKMnRIbipmUg==

+string-hash-64@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/string-hash-64/-/string-hash-64-1.0.3.tgz#0deb56df58678640db5c479ccbbb597aaa0de322"
+  integrity sha512-D5OKWKvDhyVWWn2x5Y9b+37NUllks34q1dCDhk/vYcso9fmhs+Tl3KR/gE4v5UNj2UA35cnX4KdVVGkG1deKqw==
+
 string-width@^4.1.0, string-width@^4.2.0:
  version "4.2.3"
  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
--- a/src/index.tsx
+++ b/src/index.tsx
@ -1,9 +1,6 @@
 import React from 'react';
-import {
-  requireNativeComponent,
-  Platform,
-  ViewStyle,
-} from 'react-native';
+import { requireNativeComponent, ViewStyle } from 'react-native';
+// @ts-ignore
 import resolveAssetSource from 'react-native/Libraries/Image/resolveAssetSource';

 type TransparentVideoProps = {