software-mansion · xnameTM · May 27, 2024 · Apr 8, 2024 · Apr 8, 2024 · Apr 9, 2024
diff --git a/cspell.json b/cspell.json
@@ -32,7 +32,12 @@
     "pressable",
     "inout",
     "workletizes",
-    "worklets"
+    "worklets",
+    "runtimes",
+    "overdamped",
+    "automagically",
+    "threejs",
+    "nomalized"
   ],
   "ignorePaths": ["node_modules", "docs/src/components/Testimonials"],
   "useGitignore": true

diff --git a/docs/docs/advanced/measure.mdx b/docs/docs/advanced/measure.mdx
@@ -73,7 +73,7 @@ or returns `null` when the measurement couldn't be performed.
 import MeasureBasic from '@site/src/examples/MeasureBasic';
 import MeasureBasicSrc from '!!raw-loader!@site/src/examples/MeasureBasic';
 
-<InteractiveExample src={MeasureBasicSrc} component={<MeasureBasic />} />
+<InteractiveExample src={MeasureBasicSrc} component={MeasureBasic} />
 
 ## Remarks
 

diff --git a/docs/docs/advanced/setNativeProps.mdx b/docs/docs/advanced/setNativeProps.mdx
@@ -63,7 +63,7 @@ An object with properties you want to update. These could be both style props (e
 import SetNativeProps from '@site/src/examples/SetNativeProps';
 import SetNativePropsSrc from '!!raw-loader!@site/src/examples/SetNativeProps';
 
-<InteractiveExample src={SetNativePropsSrc} component={<SetNativeProps />} />
+<InteractiveExample src={SetNativePropsSrc} component={SetNativeProps} />
 
 ## Remarks
 

diff --git a/docs/docs/advanced/useAnimatedReaction.mdx b/docs/docs/advanced/useAnimatedReaction.mdx
@@ -99,7 +99,7 @@ import AnimatedReactionMeasureSrc from '!!raw-loader!@site/src/examples/Animated
 
 <InteractiveExample
   src={AnimatedReactionMeasureSrc}
-  component={<AnimatedReactionMeasure />}
+  component={AnimatedReactionMeasure}
 />
 
 ## Remarks

diff --git a/docs/docs/advanced/useFrameCallback.mdx b/docs/docs/advanced/useFrameCallback.mdx
@@ -11,7 +11,7 @@ import FrameCallbackSimpleSrc from '!!raw-loader!@site/src/examples/FrameCallbac
 
 <InteractiveExample
   src={FrameCallbackSimpleSrc}
-  component={<FrameCallbackSimple />}
+  component={FrameCallbackSimple}
 />
 
 ## Reference
@@ -87,7 +87,7 @@ import FrameCallbackDinoSrc from '!!raw-loader!@site/src/examples/FrameCallbackD
 
 <InteractiveExample
   src={FrameCallbackDinoSrc}
-  component={<FrameCallbackDino />}
+  component={FrameCallbackDino}
   label="Tap to jump"
 />
 

diff --git a/docs/docs/animations/withDecay.mdx b/docs/docs/animations/withDecay.mdx
@@ -11,7 +11,7 @@ import DecayBasicSrc from '!!raw-loader!@site/src/examples/DecayBasic';
 
 <InteractiveExample
   src={DecayBasicSrc}
-  component={<DecayBasic />}
+  component={DecayBasic}
   label="Grab and drag the square"
 />
 
@@ -62,6 +62,10 @@ enum ReduceMotion {
 
 The decay animation configuration.
 
+import { useDecayPlayground } from '@site/src/components/InteractivePlayground';
+
+<InteractivePlayground usePlayground={useDecayPlayground} />
+
 Available properties:
 
 | Name                          | Type               | Default               | Description                                                                                                                                                                                                             |
@@ -89,7 +93,7 @@ import DecayTrainSrc from '!!raw-loader!@site/src/examples/DecayTrain';
 
 <InteractiveExample
   src={DecayTrainSrc}
-  component={<DecayTrain />}
+  component={DecayTrain}
   label="Grab and drag the train"
 />
 

diff --git a/docs/docs/animations/withDelay.mdx b/docs/docs/animations/withDelay.mdx
@@ -61,7 +61,7 @@ A parameter that determines how the animation responds to the device's reduced m
 import DelayText from '@site/src/examples/DelayText';
 import DelayTextSrc from '!!raw-loader!@site/src/examples/DelayText';
 
-<InteractiveExample src={DelayTextSrc} component={<DelayText />} />
+<InteractiveExample src={DelayTextSrc} component={DelayText} />
 
 ## Platform compatibility
 

diff --git a/docs/docs/animations/withRepeat.mdx b/docs/docs/animations/withRepeat.mdx
@@ -9,7 +9,7 @@ sidebar_position: 5
 import RepeatBasic from '@site/src/examples/RepeatBasic';
 import RepeatBasicSrc from '!!raw-loader!@site/src/examples/RepeatBasic';
 
-<InteractiveExample src={RepeatBasicSrc} component={<RepeatBasic />} />
+<InteractiveExample src={RepeatBasicSrc} component={RepeatBasic} />
 
 ## Reference
 
@@ -71,6 +71,10 @@ A function called on animation complete. In case the animation is cancelled, the
 
 A parameter that determines how the animation responds to the device's reduced motion accessibility setting.
 
+import { useRepeatPlayground } from '@site/src/components/InteractivePlayground';
+
+<InteractivePlayground usePlayground={useRepeatPlayground} />
+
 ### Returns
 
 `withRepeat` returns an [animation object](/docs/fundamentals/glossary#animation-object) which holds the current state of the animation. It can be either assigned directly to a [shared value](/docs/fundamentals/glossary#shared-value) or can be used as a value for a style object returned from [useAnimatedStyle](docs/core/useAnimatedStyle).
@@ -80,7 +84,7 @@ A parameter that determines how the animation responds to the device's reduced m
 import SequenceWobble from '@site/src/examples/SequenceWobble';
 import SequenceWobbleSrc from '!!raw-loader!@site/src/examples/SequenceWobble';
 
-<InteractiveExample src={SequenceWobbleSrc} component={<SequenceWobble />} />
+<InteractiveExample src={SequenceWobbleSrc} component={SequenceWobble} />
 
 ## Remarks
 

diff --git a/docs/docs/animations/withSequence.mdx b/docs/docs/animations/withSequence.mdx
@@ -9,7 +9,7 @@ sidebar_position: 4
 import SequenceBasic from '@site/src/examples/SequenceBasic';
 import SequenceBasicSrc from '!!raw-loader!@site/src/examples/SequenceBasic';
 
-<InteractiveExample src={SequenceBasicSrc} component={<SequenceBasic />} />
+<InteractiveExample src={SequenceBasicSrc} component={SequenceBasic} />
 
 ## Reference
 
@@ -61,7 +61,7 @@ Any number of [animation objects](docs/fundamentals/glossary#animation-object) t
 import SequenceWobble from '@site/src/examples/SequenceWobble';
 import SequenceWobbleSrc from '!!raw-loader!@site/src/examples/SequenceWobble';
 
-<InteractiveExample src={SequenceWobbleSrc} component={<SequenceWobble />} />
+<InteractiveExample src={SequenceWobbleSrc} component={SequenceWobble} />
 
 ## Platform compatibility
 

diff --git a/docs/docs/animations/withSpring.mdx b/docs/docs/animations/withSpring.mdx
@@ -9,7 +9,7 @@ sidebar_position: 2
 import SpringBasic from '@site/src/examples/SpringBasic';
 import SpringBasicSrc from '!!raw-loader!@site/src/examples/SpringBasic';
 
-<InteractiveExample src={SpringBasicSrc} component={<SpringBasic />} />
+<InteractiveExample src={SpringBasicSrc} component={SpringBasic} />
 
 ## Reference
 
@@ -116,7 +116,7 @@ A function called upon animation completion. If the animation is cancelled, the
 import SpringCarousel from '@site/src/examples/SpringCarousel';
 import SpringCarouselSrc from '!!raw-loader!@site/src/examples/SpringCarousel';
 
-<InteractiveExample src={SpringCarouselSrc} component={<SpringCarousel />} />
+<InteractiveExample src={SpringCarouselSrc} component={SpringCarousel} />
 
 ## Remarks
 

diff --git a/docs/docs/animations/withTiming.mdx b/docs/docs/animations/withTiming.mdx
@@ -9,7 +9,7 @@ sidebar_position: 1
 import TimingBasic from '@site/src/examples/TimingBasic';
 import TimingBasicSrc from '!!raw-loader!@site/src/examples/TimingBasic';
 
-<InteractiveExample src={TimingBasicSrc} component={<TimingBasic />} />
+<InteractiveExample src={TimingBasicSrc} component={TimingBasic} />
 
 ## Reference
 
@@ -84,7 +84,7 @@ import TimingEasingCompareSrc from '!!raw-loader!@site/src/examples/TimingEasing
 
 <InteractiveExample
   src={TimingEasingCompareSrc}
-  component={<TimingEasingCompare />}
+  component={TimingEasingCompare}
 />
 
 Reanimated provides a selection of ready-to-use easing functions in the `Easing` module. You can find a visualization of some common easing functions at [http://easings.net/](http://easings.net/).
@@ -133,7 +133,7 @@ A function called upon animation completion. If the animation is cancelled, the
 import TimingTabs from '@site/src/examples/TimingTabs';
 import TimingTabsSrc from '!!raw-loader!@site/src/examples/TimingTabs';
 
-<InteractiveExample src={TimingTabsSrc} component={<TimingTabs />} />
+<InteractiveExample src={TimingTabsSrc} component={TimingTabs} />
 
 ## Remarks
 

diff --git a/docs/docs/core/cancelAnimation.mdx b/docs/docs/core/cancelAnimation.mdx
@@ -47,7 +47,7 @@ The shared value of a running animation that you want to cancel. If no animation
 import CancelAnimation from '@site/src/examples/CancelAnimation';
 import CancelAnimationSrc from '!!raw-loader!@site/src/examples/CancelAnimation';
 
-<InteractiveExample src={CancelAnimationSrc} component={<CancelAnimation />} />
+<InteractiveExample src={CancelAnimationSrc} component={CancelAnimation} />
 
 ## Remarks
 

diff --git a/docs/docs/core/createAnimatedComponent.mdx b/docs/docs/core/createAnimatedComponent.mdx
@@ -57,7 +57,7 @@ import CreateAnimatedComponentSrc from '!!raw-loader!@site/src/examples/CreateAn
 
 <InteractiveExample
   src={CreateAnimatedComponentSrc}
-  component={<CreateAnimatedComponent />}
+  component={CreateAnimatedComponent}
   showCode
 />
 

diff --git a/docs/docs/core/useAnimatedProps.mdx b/docs/docs/core/useAnimatedProps.mdx
@@ -80,7 +80,7 @@ import AnimatedPropAdapterSrc from '!!raw-loader!@site/src/examples/AnimatedProp
 import AnimatingProps from '@site/src/examples/AnimatingProps';
 import AnimatingPropsSrc from '!!raw-loader!@site/src/examples/AnimatingProps';
 
-<InteractiveExample src={AnimatingPropsSrc} component={<AnimatingProps />} />
+<InteractiveExample src={AnimatingPropsSrc} component={AnimatingProps} />
 
 ## Remarks
 

diff --git a/docs/docs/core/useAnimatedStyle.mdx b/docs/docs/core/useAnimatedStyle.mdx
@@ -71,7 +71,7 @@ import AnimatingStylesSrc from '!!raw-loader!@site/src/examples/AnimatingStyles'
 
 <InteractiveExample
   src={AnimatingStylesSrc}
-  component={<AnimatingStyles />}
+  component={AnimatingStyles}
   showCode
 />
 

diff --git a/docs/docs/core/useDerivedValue.mdx b/docs/docs/core/useDerivedValue.mdx
@@ -54,7 +54,7 @@ Only relevant when using Reanimated [without the Babel plugin on the Web](https:
 import DerivedValue from '@site/src/examples/DerivedValue';
 import DerivedValueSrc from '!!raw-loader!@site/src/examples/DerivedValue';
 
-<InteractiveExample src={DerivedValueSrc} component={<DerivedValue />} />
+<InteractiveExample src={DerivedValueSrc} component={DerivedValue} />
 
 ## Remarks
 

diff --git a/docs/docs/core/useSharedValue.mdx b/docs/docs/core/useSharedValue.mdx
@@ -61,7 +61,7 @@ Values stored in shared values can be accessed and modified by their `.value` pr
 import SharedValue from '@site/src/examples/SharedValue';
 import SharedValueSrc from '!!raw-loader!@site/src/examples/SharedValue';
 
-<InteractiveExample src={SharedValueSrc} component={<SharedValue />} showCode />
+<InteractiveExample src={SharedValueSrc} component={SharedValue} showCode />
 
 ## Remarks
 

diff --git a/docs/docs/device/useReducedMotion.mdx b/docs/docs/device/useReducedMotion.mdx
@@ -34,10 +34,7 @@ function App() {
 import UseReducedMotion from '@site/src/examples/UseReducedMotion';
 import UseReducedMotionSrc from '!!raw-loader!@site/src/examples/UseReducedMotion';
 
-<InteractiveExample
-  src={UseReducedMotionSrc}
-  component={<UseReducedMotion />}
-/>
+<InteractiveExample src={UseReducedMotionSrc} component={UseReducedMotion} />
 
 ## Remarks
 

diff --git a/docs/docs/fundamentals/animating-styles-and-props.mdx b/docs/docs/fundamentals/animating-styles-and-props.mdx
@@ -65,7 +65,7 @@ import AnimatingStylesSrc from '!!raw-loader!@site/src/examples/AnimatingStyles'
 
 You can see it in action in the example below:
 
-<InteractiveExample src={AnimatingStylesSrc} component={<AnimatingStyles />} />
+<InteractiveExample src={AnimatingStylesSrc} component={AnimatingStyles} />
 
 ## Animating props
 
@@ -119,7 +119,7 @@ In a function which `useAnimatedProps` takes as an argument, we return an object
 
 Check out the full example below:
 
-<InteractiveExample src={AnimatingPropsSrc} component={<AnimatingProps />} />
+<InteractiveExample src={AnimatingPropsSrc} component={AnimatingProps} />
 
 ## Summary
 

diff --git a/docs/docs/fundamentals/applying-modifiers.mdx b/docs/docs/fundamentals/applying-modifiers.mdx
@@ -21,7 +21,7 @@ import TimingSrc from '!!raw-loader!@site/src/examples/ApplyingModifiers/Timing'
 
 <CollapsibleCode showLines={[8, 32]} src={TimingSrc} />
 
-<InteractiveExample src={TimingSrc} component={<Timing />} />
+<InteractiveExample src={TimingSrc} component={Timing} />
 
 ## Repeating an animation
 
@@ -49,7 +49,7 @@ import RepeatSrc from '!!raw-loader!@site/src/examples/ApplyingModifiers/Repeat'
 
 When we run this code we can see that the box jiggles left to right between the set offset and a starting position. After the animation finishes the box doesn't come back to its initial place. It's not really how we imagined a shake animation but we'll get there in a second!
 
-<InteractiveExample src={RepeatSrc} component={<Repeat />} />
+<InteractiveExample src={RepeatSrc} component={Repeat} />
 
 ## Running animations in a sequence
 
@@ -75,7 +75,7 @@ import SequenceSrc from '!!raw-loader!@site/src/examples/ApplyingModifiers/Seque
 
 <CollapsibleCode showLines={[18, 32]} src={SequenceSrc} />
 
-<InteractiveExample src={SequenceSrc} component={<Sequence />} />
+<InteractiveExample src={SequenceSrc} component={Sequence} />
 
 ## Starting the animation with delay
 
@@ -100,7 +100,7 @@ import DelaySrc from '!!raw-loader!@site/src/examples/ApplyingModifiers/Delay';
 
 import Delay from '@site/src/examples/ApplyingModifiers/Delay';
 
-<InteractiveExample src={DelaySrc} component={<Delay />} />
+<InteractiveExample src={DelaySrc} component={Delay} />
 
 ## Summary
 

diff --git a/docs/docs/fundamentals/customizing-animation.mdx b/docs/docs/fundamentals/customizing-animation.mdx
@@ -34,7 +34,7 @@ import TimingEasingCompareSrc from '!!raw-loader!@site/src/examples/TimingEasing
 
 <InteractiveExample
   src={TimingEasingCompareSrc}
-  component={<TimingEasingCompare />}
+  component={TimingEasingCompare}
 />
 
 Reanimated comes with a handful of predefined easing functions. You can play around with them in the interactive playground below or check the full [`withTiming` API reference](/docs/animations/withTiming).
@@ -69,10 +69,7 @@ The mass of a spring influences how hard is it to make an object move and to bri
 import SpringMassCompare from '@site/src/examples/SpringMassCompare';
 import SpringMassCompareSrc from '!!raw-loader!@site/src/examples/SpringMassCompare';
 
-<InteractiveExample
-  src={SpringMassCompareSrc}
-  component={<SpringMassCompare />}
-/>
+<InteractiveExample src={SpringMassCompareSrc} component={SpringMassCompare} />
 
 Stiffness affects how bouncy the spring is. As an example, think about the difference between a steel spring (with very high stiffness) and a spring made out of soft plastic (with low stiffness).
 

diff --git a/docs/docs/fundamentals/handling-gestures.mdx b/docs/docs/fundamentals/handling-gestures.mdx
@@ -51,7 +51,7 @@ And that's it! Pretty straightforward, isn't it? Let's see it in the full glory
 
 <InteractiveExample
   src={TapGestureSrc}
-  component={<TapGesture />}
+  component={TapGesture}
   label="Tap the circle"
 />
 
@@ -78,7 +78,7 @@ You can play around with the example below and see how the circle changes and re
 
 <InteractiveExample
   src={PanGestureSrc}
-  component={<PanGesture />}
+  component={PanGesture}
   label="Grab and drag the circle"
 />
 
@@ -101,7 +101,7 @@ Play around and see how the square decelerates when let go with some speed!
 
 <InteractiveExample
   src={DecayBasicSrc}
-  component={<DecayBasic />}
+  component={DecayBasic}
   label="Grab and release the square"
 />
 

diff --git a/docs/docs/fundamentals/your-first-animation.mdx b/docs/docs/fundamentals/your-first-animation.mdx
@@ -149,7 +149,7 @@ And voilà, we've made our first animation using Reanimated! You can see how it
 import FirstAnimation from '@site/src/examples/FirstAnimation';
 import FirstAnimationSrc from '!!raw-loader!@site/src/examples/FirstAnimation';
 
-<InteractiveExample src={FirstAnimationSrc} component={<FirstAnimation />} />
+<InteractiveExample src={FirstAnimationSrc} component={FirstAnimation} />
 
 ## Summary
 

diff --git a/docs/docs/scroll/scrollTo.mdx b/docs/docs/scroll/scrollTo.mdx
@@ -67,7 +67,7 @@ Whether the scroll should be smooth (`true`) or instant (`false`).
 import ScrollTo from '@site/src/examples/ScrollTo';
 import ScrollToSrc from '!!raw-loader!@site/src/examples/ScrollTo';
 
-<InteractiveExample src={ScrollToSrc} component={<ScrollTo />} />
+<InteractiveExample src={ScrollToSrc} component={ScrollTo} />
 
 ## Remarks
 

diff --git a/docs/docs/scroll/useScrollViewOffset.mdx b/docs/docs/scroll/useScrollViewOffset.mdx
@@ -55,7 +55,7 @@ import ScrollViewOffsetSrc from '!!raw-loader!@site/src/examples/ScrollViewOffse
 
 <InteractiveExample
   src={ScrollViewOffsetSrc}
-  component={<ScrollViewOffset />}
+  component={ScrollViewOffset}
   showCode
 />
 

diff --git a/docs/docs/threading/runOnJS.mdx b/docs/docs/threading/runOnJS.mdx
@@ -49,7 +49,7 @@ Don't forget to call the function returned from `runOnJS`.
 import RunOnJS from '@site/src/examples/RunOnJS';
 import RunOnJSSrc from '!!raw-loader!@site/src/examples/RunOnJS';
 
-<InteractiveExample src={RunOnJSSrc} component={<RunOnJS />} />
+<InteractiveExample src={RunOnJSSrc} component={RunOnJS} />
 
 ## Remarks