Updated example with reanimated and paper

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"],
 };

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

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),
+);

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",

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 }) => (
       <SpotDescriptionView>
         <DescriptionText>
           <BoldText>{"Tour: Try it!\n"}</BoldText>
           {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 \
           `}
           <BoldText>{"Previous.\n"}</BoldText>
-          {"If you want to finish the tour, press "}
-          <BoldText>{"Finish.\n"}</BoldText>
+          {"If you want to the last step of the tour, press "}
+          <BoldText>{"Next.\n"}</BoldText>
         </DescriptionText>
 
         <ButtonsGroupView>
           <Button title="Previous" onPress={previous} />
-          <Button title="Finish" onPress={stop} />
+          <Button title="Next" onPress={next} />
         </ButtonsGroupView>
       </SpotDescriptionView>
     ),
+  }, {
+    before() {
+      return new Promise<void>(resolve => {
+        reanimatedGap.value = withSpring(Dimensions.get("screen").height * 0.20);
+        return resolve();
+      });
+    },
+    render: props => (
+      <TourBox
+        title="Tour: Compatibility"
+        backText="Previous"
+        nextText="Finish"
+        {...props}
+      >
+        <TextPaper>
+          {dedent`
+            This is the final step of the tour example.
+            It is compatible with other animation or design libraries!
+            If you want to go to the previous step, press \
+          `}
+          <BoldText>{"Previous.\n"}</BoldText>
+          {"If you want to finish the tour, press "}
+          <BoldText>{"Finish.\n"}</BoldText>
+        </TextPaper>
+      </TourBox>
+    ),
   }], []);
 
   return (
@@ -173,6 +196,18 @@ export function App(): ReactElement {
                 </DescriptionText>
               </SectionContainerView>
             </Animated.View>
+            <ReAnimated.View style={[{ transform: [{ translateY: reanimatedGap }] }]}>
+              <SectionContainerView>
+                  <AttachStep index={4}>
+                    <TextPaper variant="titleMedium">
+                      {"Compatibility!"}
+                    </TextPaper>
+                  </AttachStep>
+                  <DescriptionText>
+                    {"It supports other animation and design libraries"}
+                  </DescriptionText>
+              </SectionContainerView>
+            </ReAnimated.View>
           </>
         )}
       </SpotlightTourProvider>