feat(animation): Configurable animation motions

.eslintrc.json

@@ -1,4 +1,5 @@
 {
+  "root": true,
   "env": {
     "es6": true,
     "node": true
@@ -8,14 +9,14 @@
       "version": "detect"
     }
   },
-  "root": true,
   "parser": "@typescript-eslint/parser",
   "parserOptions": {
     "project": ["./tsconfig.json", "./example/tsconfig.json"],
     "sourceType": "module"
   },
   "plugins": [
     "@typescript-eslint",
+    "better-styled-components",
     "eslint-plugin-import",
     "eslint-plugin-jsdoc",
     "eslint-plugin-react",
@@ -25,10 +26,15 @@
     "eslint:recommended",
     "plugin:@typescript-eslint/recommended",
     "plugin:@typescript-eslint/recommended-requiring-type-checking",
-    "plugin:react/recommended"
+    "plugin:react/recommended",
+    "plugin:react/jsx-runtime"
   ],
   "overrides": [{
-    "files": ["*.ts", "*.tsx"]
+    "files": ["test/**/*.ts?(x)"],
+    "rules": {
+      "@typescript-eslint/no-non-null-assertion": "off",
+      "@typescript-eslint/restrict-template-expressions": "off"
+    }
   }, {
     "files": ["*.js"],
     "rules": {
@@ -74,9 +80,23 @@
     "@typescript-eslint/no-empty-interface": "error",
     "@typescript-eslint/no-explicit-any": ["error", { "ignoreRestArgs": true }],
     "@typescript-eslint/no-floating-promises": "off",
+    "@typescript-eslint/no-inferrable-types": ["error", {
+      "ignoreParameters": true,
+      "ignoreProperties": true
+    }],
     "@typescript-eslint/no-misused-new": "error",
+    "@typescript-eslint/no-namespace": "off",
+    "@typescript-eslint/no-non-null-assertion": "error",
     "@typescript-eslint/no-shadow": ["error", { "hoist": "all" }],
     "@typescript-eslint/no-unused-expressions": ["error", { "allowTernary": true }],
+    "@typescript-eslint/no-unused-vars": ["error", {
+      "destructuredArrayIgnorePattern": "^_",
+      "ignoreRestSiblings": true
+    }],
+    "@typescript-eslint/no-use-before-define": ["error", {
+      "functions": false,
+      "classes": false
+    }],
     "@typescript-eslint/no-var-requires": "error",
     "@typescript-eslint/parameter-properties": "error",
     "@typescript-eslint/prefer-for-of": "error",
@@ -95,28 +115,39 @@
     "@typescript-eslint/space-infix-ops": "error",
     "@typescript-eslint/triple-slash-reference": "error",
     "@typescript-eslint/type-annotation-spacing": "error",
-    "@typescript-eslint/unbound-method": "error",
+    "@typescript-eslint/unbound-method": ["error", { "ignoreStatic": true }],
     "@typescript-eslint/unified-signatures": "error",
     "arrow-parens": ["error", "as-needed"],
     "arrow-spacing": "error",
+    "brace-style": "error",
+    "better-styled-components/sort-declarations-alphabetically": "error",
     "camelcase": "error",
     "comma-spacing": "error",
     "constructor-super": "error",
+    "curly": "error",
     "eol-last": "error",
     "eqeqeq": "error",
+    "func-style": ["error", "declaration", { "allowArrowFunctions": true }],
     "import/order": ["error", {
+      "alphabetize": {
+        "caseInsensitive": false,
+        "order": "asc"
+      },
       "newlines-between": "always",
       "groups": ["external", "parent", "sibling"]
     }],
     "jsdoc/check-alignment": "error",
-    "jsdoc/check-indentation": "error",
+    "jsdoc/check-indentation": ["error", { "excludeTags": ["example", "param", "returns"] }],
     "jsdoc/newline-after-description": "error",
+    "jsx-quotes": "error",
     "keyword-spacing": "error",
     "linebreak-style": "error",
     "max-classes-per-file": ["error", 1],
     "max-len": ["error", {
       "code": 120,
       "comments": 80,
+      "ignoreRegExpLiterals": true,
+      "ignorePattern": "^import (\\{ )?\\w+( \\})? from \".+\";$",
       "ignoreUrls": true,
       "tabWidth": 2
     }],
@@ -132,13 +163,17 @@
     "no-labels": "error",
     "no-multi-spaces": "error",
     "no-new-wrappers": "error",
+    "no-param-reassign": "error",
     "no-throw-literal": "error",
     "no-trailing-spaces": "error",
     "no-underscore-dangle": "error",
+    "no-use-before-define": "off",
+    "no-useless-computed-key": ["error", { "enforceForClassMembers": true }],
     "no-var": "error",
     "object-shorthand": "error",
     "one-var": ["error", "never"],
     "prefer-const": "error",
+    "quote-props": ["error", "as-needed"],
     "radix": "error",
     "rest-spread-spacing": "error",
     "react/display-name": "off",
@@ -152,6 +187,7 @@
     }],
     "react/jsx-no-bind": "error",
     "react/jsx-tag-spacing": "error",
+    "react/prop-types": "off",
     "react/self-closing-comp": "error",
     "react-hooks/rules-of-hooks": "error",
     "semi-spacing": "error",

example/src/App.styles.ts

@@ -6,19 +6,19 @@ export const SectionContainerView = styled.View`
 `;
 
 export const TitleText = styled.Text`
+  align-self: flex-start;
   background-color: #D3D3D3;
+  color: black;
   font-size: 24px;
   font-weight: 600;
-  color: black;
-  align-self: flex-start;
 `;
 
 export const DescriptionText = styled.Text`
-  margin-top: 8px;
+  align-self: flex-start;
+  color: #444;
   font-size: 18px;
   font-weight: 400;
-  color: #444;
-  align-self: flex-start;
+  margin-top: 8px;
 `;
 
 export const BoldText = styled.Text`
@@ -28,7 +28,6 @@ export const BoldText = styled.Text`
 export const SpotDescriptionView = styled.View`
   background-color: #B0C4DE;
   padding: 10px;
-  margin: 10px;
 `;
 
 export const ButtonsGroupView = styled.View`

example/src/App.tsx

@@ -7,7 +7,7 @@ import {
   TourBox,
   TourStep,
 } from "@stackbuilders/react-native-spotlight-tour";
-import React, { useRef } from "react";
+import { ReactElement, useRef } from "react";
 import { Animated, Button, Dimensions, SafeAreaView, Text } from "react-native";
 
 import {
@@ -20,7 +20,7 @@ import {
 } from "./App.styles";
 import { DocsTooltip } from "./DocsTooltip";
 
-export const App: React.FC = () => {
+export function App(): ReactElement {
   const gap = useRef(new Animated.Value(0)).current;
 
   const tourSteps: TourStep[] = [{
@@ -152,4 +152,4 @@ export const App: React.FC = () => {
       </SpotlightTourProvider>
     </SafeAreaView>
   );
-};
+}

example/src/DocsTooltip.tsx

@@ -1,5 +1,5 @@
 import { useSpotlightTour } from "@stackbuilders/react-native-spotlight-tour";
-import React, { ReactElement } from "react";
+import { ReactElement } from "react";
 import { Button } from "react-native";
 
 import { BoldText, ButtonsGroupView, DescriptionText, SpotDescriptionView } from "./App.styles";

example/yarn.lock

@@ -1414,7 +1414,7 @@ __metadata:
       optional: false
     react-native-svg:
       optional: false
-  checksum: c04a556df4e1692175a64cd07701a94f63c83568e06c9ee92978d46daf2cfa5de1e32e397af37278188af1d7a04985bf8ca6e34722671afd5c731bbfd9c25e79
+  checksum: 83a0716ab59b835d0c5647c458b8c7826e4937c03704562f26ad969a24b0d44e934b1d2456986a787f7e456d9adb8ec8ee8655b47dcddd7eb04a8deeaa6fb09d
   languageName: node
   linkType: hard
 

package.json

@@ -55,6 +55,7 @@
     "@typescript-eslint/parser": "^5.45.0",
     "babel-jest": "^29.3.1",
     "eslint": "^8.28.0",
+    "eslint-plugin-better-styled-components": "^1.1.2",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-jsdoc": "^39.6.4",
     "eslint-plugin-react": "^7.31.11",

src/helpers/common.ts

@@ -1,5 +1,7 @@
 import { ReactNode } from "react";
 
+export type Optional<T> = T | undefined;
+
 export type ChildFn<T> = (value: T) => ReactNode;
 
 export function isChildFunction<T>(children: ReactNode | ChildFn<T>): children is ChildFn<T> {

src/index.ts

@@ -1,4 +1,12 @@
-export { AttachStep } from "./lib/AttachStep.component";
-export { Align, Position, RenderProps, SpotlightTour, TourStep, useSpotlightTour } from "./lib/SpotlightTour.context";
+export { AttachStep } from "./lib/components/attach-step/AttachStep.component";
+export { TourBox } from "./lib/components/tour-box/TourBox.component";
+export {
+  Align,
+  Motion,
+  Position,
+  RenderProps,
+  SpotlightTour,
+  TourStep,
+  useSpotlightTour,
+} from "./lib/SpotlightTour.context";
 export { SpotlightTourProvider } from "./lib/SpotlightTour.provider";
-export { TourBox } from "./lib/tour-box/TourBox.component";

src/lib/SpotlightTour.context.ts

@@ -13,6 +13,8 @@ export enum Position {
   TOP = "top",
 }
 
+export type Motion = "bounce" | "slide" | "fade";
+
 export type RenderProps = Pick<SpotlightTourCtx, "next" | "previous" | "stop"> & {
   current: number;
   isFirst: boolean;
@@ -41,6 +43,13 @@ export interface TourStep {
    * @default undefined
    */
   before?: () => void | Promise<void>;
+  /**
+   * Specifies the transition motion for the step. You can set the default
+   * motion globally on the `SpotlightTourProvider` props too.
+   *
+   * @default bounce
+   */
+  motion?: Motion;
   /**
    * Overrides the behavior of pressing the tour's backdrop for this specific
    * step. You can use either one of the following values:

src/lib/SpotlightTour.provider.tsx

@@ -1,18 +1,19 @@
-import React, { useCallback, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { forwardRef, useCallback, useImperativeHandle, useMemo, useRef, useState } from "react";
 import { ColorValue, LayoutRectangle } from "react-native";
 
-import { ChildFn, isChildFunction, isPromise } from "../helpers/common";
+import { ChildFn, isChildFunction } from "../helpers/common";
 
 import {
   BackdropPressBehavior,
+  Motion,
   Position,
   SpotlightTour,
   SpotlightTourContext,
   SpotlightTourCtx,
   TourStep,
   ZERO_SPOT,
 } from "./SpotlightTour.context";
-import { TourOverlay, TourOverlayRef } from "./tour-overlay/TourOverlay.component";
+import { TourOverlay, TourOverlayRef } from "./components/tour-overlay/TourOverlay.component";
 
 export interface OSConfig<T> {
   android: T;
@@ -27,6 +28,13 @@ interface SpotlightTourProviderProps {
    * argument.
    */
   children: React.ReactNode | ChildFn<SpotlightTour>;
+  /**
+   * Sets the default transition motion for all steps. You can override this
+   * value on each step too.
+   *
+   * @default bounce
+   */
+  motion?: Motion;
   /**
    * Define if the animations in the tour should use the native driver or not.
    * A boolean can be used to apply the same value to both Android and iOS, or
@@ -66,13 +74,14 @@ interface SpotlightTourProviderProps {
   steps: TourStep[];
 }
 
-export const SpotlightTourProvider = React.forwardRef<SpotlightTour, SpotlightTourProviderProps>((props, ref) => {
+export const SpotlightTourProvider = forwardRef<SpotlightTour, SpotlightTourProviderProps>((props, ref) => {
   const {
     children,
     onBackdropPress,
     overlayColor = "black",
     overlayOpacity = 0.45,
     steps,
+    motion = "bounce",
     nativeDriver = true,
   } = props;
 
@@ -84,15 +93,12 @@ export const SpotlightTourProvider = React.forwardRef<SpotlightTour, SpotlightTo
   });
 
   const renderStep = useCallback((index: number): void => {
-    if (steps[index] !== undefined) {
-      const beforeResult = steps[index]?.before?.();
-      const beforePromise = isPromise(beforeResult)
-        ? beforeResult
-        : Promise.resolve();
+    const step = steps[index];
 
+    if (step !== undefined) {
       Promise.all([
-        beforePromise,
         overlay.current.hideTooltip(),
+        Promise.resolve().then(step.before),
       ])
       .then(() => setCurrent(index));
     }
@@ -117,7 +123,7 @@ export const SpotlightTourProvider = React.forwardRef<SpotlightTour, SpotlightTo
         ? stop()
         : renderStep(current + 1);
     }
-  }, [renderStep, current, steps.length]);
+  }, [stop, renderStep, current, steps.length]);
 
   const previous = useCallback((): void => {
     if (current !== undefined && current > 0) {
@@ -169,11 +175,12 @@ export const SpotlightTourProvider = React.forwardRef<SpotlightTour, SpotlightTo
         ref={overlay}
         color={overlayColor}
         current={current}
-        opacity={overlayOpacity}
+        backdropOpacity={overlayOpacity}
         onBackdropPress={onBackdropPress}
         spot={spot}
         tourStep={currentStep}
         nativeDriver={nativeDriver}
+        motion={motion}
       />
     </SpotlightTourContext.Provider>
   );

src/lib/AttachStep.component.tsx → src/lib/components/attach-step/AttachStep.component.tsx

@@ -1,7 +1,7 @@
-import React, { ReactElement, ReactNode, RefObject, useContext, useLayoutEffect, useRef } from "react";
+import { cloneElement, ReactElement, ReactNode, RefObject, useContext, useEffect, useRef } from "react";
 import { StyleProp, View } from "react-native";
 
-import { SpotlightTourContext } from "./SpotlightTour.context";
+import { SpotlightTourContext } from "../../SpotlightTour.context";
 
 interface ChildProps<T> {
   children?: ReactNode;
@@ -40,13 +40,13 @@ export function AttachStep<T>({ children, fill = false, index }: AttachStepProps
 
   const childRef = useRef<View>(null);
 
-  useLayoutEffect(() => {
+  useEffect(() => {
     if (current === index) {
       childRef.current?.measureInWindow((x, y, width, height) => {
         changeSpot({ height, width, x, y });
       });
     }
-  }, [current]);
+  }, [changeSpot, current, index]);
 
   if (typeof children.type === "function") {
     const { style, ...rest } = children.props;
@@ -60,7 +60,7 @@ export function AttachStep<T>({ children, fill = false, index }: AttachStepProps
         collapsable={false}
         focusable={false}
       >
-        {React.cloneElement(
+        {cloneElement(
           children,
           rest,
           children.props.children,
@@ -69,7 +69,7 @@ export function AttachStep<T>({ children, fill = false, index }: AttachStepProps
     );
   }
 
-  return React.cloneElement(
+  return cloneElement(
     children,
     { ...children.props, ref: childRef },
     children.props?.children,