diff --git a/example/babel.config.js b/example/babel.config.js index e438930..02f8028 100644 --- a/example/babel.config.js +++ b/example/babel.config.js @@ -2,5 +2,12 @@ * @type {import('@babel/core').TransformOptions} */ module.exports = { + // added reanimated plugin + // https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started#step-2-add-reanimateds-babel-plugin + plugins: [ + "@babel/plugin-proposal-export-namespace-from", // -> reanimated for web support + "react-native-paper/babel", // Bundle excluding modules you don't use: https://callstack.github.io/react-native-paper/docs/guides/getting-started + "react-native-reanimated/plugin", + ], presets: ["@rnx-kit/babel-preset-metro-react-native"], }; diff --git a/example/ios/Podfile.lock b/example/ios/Podfile.lock index 61fe4a3..aa6255e 100644 --- a/example/ios/Podfile.lock +++ b/example/ios/Podfile.lock @@ -935,6 +935,8 @@ PODS: - React-Mapbuffer (0.74.3): - glog - React-debug + - react-native-safe-area-context (5.1.0): + - React-Core - React-nativeconfig (0.74.3) - React-NativeModulesApple (0.74.3): - glog @@ -1164,6 +1166,93 @@ PODS: - React-logger (= 0.74.3) - React-perflogger (= 0.74.3) - React-utils (= 0.74.3) + - RNReanimated (3.16.7): + - DoubleConversion + - glog + - hermes-engine + - RCT-Folly (= 2024.01.01.00) + - RCTRequired + - RCTTypeSafety + - React-Codegen + - React-Core + - React-debug + - React-Fabric + - React-featureflags + - React-graphics + - React-ImageManager + - React-NativeModulesApple + - React-RCTFabric + - React-rendererdebug + - React-utils + - ReactCommon/turbomodule/bridging + - ReactCommon/turbomodule/core + - RNReanimated/reanimated (= 3.16.7) + - RNReanimated/worklets (= 3.16.7) + - Yoga + - RNReanimated/reanimated (3.16.7): + - DoubleConversion + - glog + - hermes-engine + - RCT-Folly (= 2024.01.01.00) + - RCTRequired + - RCTTypeSafety + - React-Codegen + - React-Core + - React-debug + - React-Fabric + - React-featureflags + - React-graphics + - React-ImageManager + - React-NativeModulesApple + - React-RCTFabric + - React-rendererdebug + - React-utils + - ReactCommon/turbomodule/bridging + - ReactCommon/turbomodule/core + - RNReanimated/reanimated/apple (= 3.16.7) + - Yoga + - RNReanimated/reanimated/apple (3.16.7): + - DoubleConversion + - glog + - hermes-engine + - RCT-Folly (= 2024.01.01.00) + - RCTRequired + - RCTTypeSafety + - React-Codegen + - React-Core + - React-debug + - React-Fabric + - React-featureflags + - React-graphics + - React-ImageManager + - React-NativeModulesApple + - React-RCTFabric + - React-rendererdebug + - React-utils + - ReactCommon/turbomodule/bridging + - ReactCommon/turbomodule/core + - Yoga + - RNReanimated/worklets (3.16.7): + - DoubleConversion + - glog + - hermes-engine + - RCT-Folly (= 2024.01.01.00) + - RCTRequired + - RCTTypeSafety + - React-Codegen + - React-Core + - React-debug + - React-Fabric + - React-featureflags + - React-graphics + - React-ImageManager + - React-NativeModulesApple + - React-RCTFabric + - React-rendererdebug + - React-utils + - ReactCommon/turbomodule/bridging + - ReactCommon/turbomodule/core + - Yoga - RNSVG (15.4.0): - React-Core - SocketRocket (0.7.0) @@ -1202,6 +1291,7 @@ DEPENDENCIES: - React-jsitracing (from `../node_modules/react-native/ReactCommon/hermes/executor/`) - React-logger (from `../node_modules/react-native/ReactCommon/logger`) - React-Mapbuffer (from `../node_modules/react-native/ReactCommon`) + - react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`) - React-nativeconfig (from `../node_modules/react-native/ReactCommon`) - React-NativeModulesApple (from `../node_modules/react-native/ReactCommon/react/nativemodule/core/platform/ios`) - React-perflogger (from `../node_modules/react-native/ReactCommon/reactperflogger`) @@ -1225,6 +1315,7 @@ DEPENDENCIES: - React-runtimescheduler (from `../node_modules/react-native/ReactCommon/react/renderer/runtimescheduler`) - React-utils (from `../node_modules/react-native/ReactCommon/react/utils`) - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`) + - RNReanimated (from `../node_modules/react-native-reanimated`) - RNSVG (from `../node_modules/react-native-svg`) - Yoga (from `../node_modules/react-native/ReactCommon/yoga`) @@ -1294,6 +1385,8 @@ EXTERNAL SOURCES: :path: "../node_modules/react-native/ReactCommon/logger" React-Mapbuffer: :path: "../node_modules/react-native/ReactCommon" + react-native-safe-area-context: + :path: "../node_modules/react-native-safe-area-context" React-nativeconfig: :path: "../node_modules/react-native/ReactCommon" React-NativeModulesApple: @@ -1340,6 +1433,8 @@ EXTERNAL SOURCES: :path: "../node_modules/react-native/ReactCommon/react/utils" ReactCommon: :path: "../node_modules/react-native/ReactCommon" + RNReanimated: + :path: "../node_modules/react-native-reanimated" RNSVG: :path: "../node_modules/react-native-svg" Yoga: @@ -1376,6 +1471,7 @@ SPEC CHECKSUMS: React-jsitracing: 6b3c8c98313642140530f93c46f5a6ca4530b446 React-logger: fa92ba4d3a5d39ac450f59be2a3cec7b099f0304 React-Mapbuffer: 9f68550e7c6839d01411ac8896aea5c868eff63a + react-native-safe-area-context: 04803a01f39f31cc6605a5531280b477b48f8a88 React-nativeconfig: fa5de9d8f4dbd5917358f8ad3ad1e08762f01dcb React-NativeModulesApple: 585d1b78e0597de364d259cb56007052d0bda5e5 React-perflogger: 7bb9ba49435ff66b666e7966ee10082508a203e8 @@ -1399,6 +1495,7 @@ SPEC CHECKSUMS: React-runtimescheduler: 0c80752bceb80924cb8a4babc2a8e3ed70d41e87 React-utils: a06061b3887c702235d2dac92dacbd93e1ea079e ReactCommon: f00e436b3925a7ae44dfa294b43ef360fbd8ccc4 + RNReanimated: b0728bed09875d78b9a3a0ba0e2d1171f63f8b5a RNSVG: cb24fb322de8c1ebf59904e7aca0447bb8dbed5a SocketRocket: abac6f5de4d4d62d24e11868d7a2f427e0ef940d Yoga: 88480008ccacea6301ff7bf58726e27a72931c8d diff --git a/example/metro.config.cjs b/example/metro.config.cjs index 0fb6c63..855cc94 100644 --- a/example/metro.config.cjs +++ b/example/metro.config.cjs @@ -1,6 +1,9 @@ const { getDefaultConfig, mergeConfig } = require("@react-native/metro-config"); const { makeMetroConfig } = require("@rnx-kit/metro-config"); const MetroSymlinksResolver = require("@rnx-kit/metro-resolver-symlinks"); +const { + wrapWithReanimatedMetroConfig, +} = require("react-native-reanimated/metro-config"); /** * Metro configuration @@ -14,4 +17,8 @@ const config = makeMetroConfig({ }, }); -module.exports = mergeConfig(getDefaultConfig(__dirname), config); +// may need to wrap metro config with reanimated wrapper +// https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started#step-3-wrap-metro-config-with-reanimated-wrapper-recommended +module.exports = wrapWithReanimatedMetroConfig( + mergeConfig(getDefaultConfig(__dirname), config), +); diff --git a/example/package.json b/example/package.json index 1eb4ff0..2c254f2 100644 --- a/example/package.json +++ b/example/package.json @@ -26,6 +26,9 @@ "react-dom": "^18.3.1", "react-is": "^18.3.1", "react-native": "0.74.3", + "react-native-paper": "^5.12.5", + "react-native-reanimated": "^3.16.6", + "react-native-safe-area-context": "^5.1.0", "react-native-spotlight-tour": "workspace:^", "react-native-svg": "^15.4.0", "react-native-svg-web": "^1.0.9", diff --git a/example/src/App.tsx b/example/src/App.tsx index 68d6443..baf1f47 100644 --- a/example/src/App.tsx +++ b/example/src/App.tsx @@ -1,13 +1,9 @@ import dedent from "dedent"; import React, { ReactElement, useCallback, useMemo, useRef } from "react"; import { Alert, Animated, Button, Dimensions, SafeAreaView, Text } from "react-native"; -import { - AttachStep, - SpotlightTourProvider, - TourBox, - TourState, - TourStep, -} from "react-native-spotlight-tour"; +import { Text as TextPaper } from "react-native-paper"; +import ReAnimated, { useSharedValue, withSpring } from "react-native-reanimated"; +import { AttachStep, SpotlightTourProvider, TourBox, TourState, TourStep } from "react-native-spotlight-tour"; import { BoldText, @@ -21,6 +17,7 @@ import { DocsTooltip } from "./DocsTooltip"; export function App(): ReactElement { const gap = useRef(new Animated.Value(0)).current; + const reanimatedGap = useSharedValue(0); const showSummary = useCallback(({ index, isLast }: TourState) => { Alert.alert( @@ -86,32 +83,58 @@ export function App(): ReactElement { Animated.spring(gap, { bounciness: 100, speed: 1, - toValue: Dimensions.get("screen").height * 0.25, + toValue: Dimensions.get("screen").height * 0.20, useNativeDriver: false, // Translate animation not supported native by native driver }) .start(() => resolve()); }); }, - render: ({ previous, stop }) => ( + render: ({ next, previous }) => ( {"Tour: Try it!\n"} {dedent` - This is the final step of the tour example. + This is the fourth step of the tour example. You can move your view or make transitions before an step kicks off! If you want to go to the previous step, press \ `} {"Previous.\n"} - {"If you want to finish the tour, press "} - {"Finish.\n"} + {"If you want to the last step of the tour, press "} + {"Next.\n"}