React Native Reanimated

https://docs.swmansion.com/react-native-reanimated/
Admin
React Native Reanimated is a declarative and performant animation library for React Native that...
Tokens:174,704
Snippets:1,457
Trust Score:10
Update:2 weeks ago
Show doc for...
Tokens:
Raw
### Start web example app

Source: https://docs.swmansion.com/react-native-reanimated/docs/guides/web-support

Run this command inside the apps/web-example directory to start the web example app.

```bash
yarn start  
```

--------------------------------

### Local setup commands for documentation

Source: https://docs.swmansion.com/react-native-reanimated/docs/guides/contributing

Commands to clone the repository, install dependencies, and start the local Docusaurus server for the documentation.

```bash
cd react-native-reanimated

yarn

cd docs/docs-reanimated

yarn && yarn start
```

--------------------------------

### iOS setup commands

Source: https://docs.swmansion.com/react-native-reanimated/docs/guides/contributing

Commands to install dependencies, install iOS Pods, and start the Metro bundler for iOS development. Run these before opening the project in Xcode.

```bash
yarn && yarn build-all
```

```bash
(cd apps/fabric-example/ios && bundle install && bundle exec pod install)
```

```bash
cd apps/fabric-example && yarn start
```

--------------------------------

### Install dependencies and build example app

Source: https://docs.swmansion.com/react-native-reanimated/docs/guides/web-support

Run these commands in the repository root to install dependencies and build the example app.

```bash
yarn && yarn build  
```

--------------------------------

### Android setup commands

Source: https://docs.swmansion.com/react-native-reanimated/docs/guides/contributing

Commands to install dependencies and start the Metro bundler for Android development. Run these before opening the project in Android Studio.

```bash
yarn && yarn build-all
```

```bash
cd apps/fabric-example
```

```bash
yarn start
```

--------------------------------

### Starting point: Animated box with withTiming

Source: https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/applying-modifiers

Initial example that moves an Animated.View 40px to the right on button press using useAnimatedStyle and withTiming. This is the base for the shake animation.

```tsx
export default function App() {  
  const offset = useSharedValue<number>(0);  
  
  const style = useAnimatedStyle(() => ({  
    transform: [{ translateX: offset.value }],  
  }));  
  
  const OFFSET = 40;  
  
  const handlePress = () => {  
    offset.value = withTiming(OFFSET);  
  };  
  
  return (  
    <View style={styles.container}>  
      <Animated.View style={[styles.box, style]} />  
      <Button title="shake" onPress={handlePress} />  
    </View>  
  );  
}  

```

--------------------------------

### Install iOS pods

Source: https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started

For iOS development, install pods before running the app.

```bash
cd ios && pod install && cd ..
```

--------------------------------

### withDelay with withSequence shake animation

Source: https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/applying-modifiers

Full example combining withDelay and withSequence to add a delay before the shake animation starts.

```tsx
  const OFFSET = 40;  
  const TIME = 250;  
  const DELAY = 400;  
  
  const handlePress = () => {  
    offset.value = withDelay(  
      DELAY,  
      withSequence(  
        // start from -OFFSET  
        withTiming(-OFFSET, { duration: TIME / 2 }),  
        // shake between -OFFSET and OFFSET 5 times  
        withRepeat(withTiming(OFFSET, { duration: TIME }), 5, true),  
        // go back to 0 at the end  
        withTiming(0, { duration: TIME / 2 })  
      )  
    );  
  };  

```

--------------------------------

### Custom entering animation example

Source: https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/custom-animations

Example of a custom entering animation function. It animates originX, opacity, borderRadius, and transform properties using withTiming and withDelay. The initialValues set the starting state before the animation begins.

```javascript
const customEntering = (targetValues) => {  
  'worklet';  
  const animations = {  
    originX: withTiming(targetValues.targetOriginX, { duration: 3000 }),  
    opacity: withTiming(1, { duration: 2000 }),  
    borderRadius: withDelay(1500, withTiming(40, { duration: 3000 })),  
    transform: [  
      { rotate: withTiming('0deg', { duration: 4000 }) },  
      { scale: withTiming(1, { duration: 3500 }) },  
    ],  
  };  
  const initialValues = {  
    originX: -WIDTH,  
    opacity: 0,  
    borderRadius: 10,  
    transform: [{ rotate: '90deg' }, { scale: 0.2 }],  
  };  
  return {  
    initialValues,  
    animations,  
  };  
};  
```

--------------------------------

### Install raf polyfill

Source: https://docs.swmansion.com/react-native-reanimated/docs/guides/web-support

Install the raf package to polyfill requestAnimationFrame for Next.js/Solito compatibility.

```bash
yarn add raf  
```

--------------------------------

### Example: useAnimatedRef with Animated.View

Source: https://docs.swmansion.com/react-native-reanimated/docs/core/useAnimatedRef

Example showing how to use useAnimatedRef with a typed Animated.View and access the current component in an onLayout handler.

```javascript
export default function App() {  
  const animatedRef = useAnimatedRef<Animated.View>();  
  
  return (  
    <View style={styles.container}>  
      <Animated.View  
        ref={animatedRef}  
        style={styles.box}  
        onLayout={() => {  
          // Returns a reference to the component  
          const component = animatedRef.current;  
        }}  
      />  
    </View>  
  );  
}  

```

--------------------------------

### Predefined timing function example

Source: https://docs.swmansion.com/react-native-reanimated/docs/css-transitions/transition-timing-function

Example of using a predefined timing function string, here 'linear'.

```css
transitionTimingFunction: 'linear',  

```

--------------------------------

### Array of timing functions example

Source: https://docs.swmansion.com/react-native-reanimated/docs/css-animations/animation-timing-function

Example of using an array of timing functions, where the order corresponds to the array of style properties in `transitionProperty`.

```javascript
animationTimingFunction: ['linear', steps(60, 'jump-none'), 'ease-in-out'];  
transitionProperty: [bounceIn, move, slide];  

```

--------------------------------

### Array of timing functions example

Source: https://docs.swmansion.com/react-native-reanimated/docs/css-transitions/transition-timing-function

Example of using an array of timing functions corresponding to an array of style properties in transitionProperty.

```tsx
transitionTimingFunction: ['linear', steps(60, 'jump-none'), 'ease-in-out'];  
transitionProperty: ['width', 'transform', 'borderRadius'];  

```

--------------------------------

### useAnimatedProps adapter example

Source: https://docs.swmansion.com/react-native-reanimated/docs/core/useAnimatedProps

Example of defining an adapter as a worklet function and passing it to useAnimatedProps to convert props before they reach the native side.

```javascript
const adapter = (props) => {  
  'worklet';  
  // reshape props here  
};  
  
const animatedProps = useAnimatedProps(updater, [], adapter);  

```

--------------------------------

### Custom Layout Transition Example

Source: https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/custom-animations

Example implementation of a custom layout transition function. It animates the view's origin and size using withTiming, withDelay, and withSpring, and sets initial values from the current layout properties.

```javascript
const customLayoutTransition = (values) => {  
  'worklet';  
  return {  
    animations: {  
      originX: withTiming(values.targetOriginX, { duration: 1000 }),  
      originY: withDelay(  
        1000,  
        withTiming(values.targetOriginY, { duration: 1000 })  
      ),  
      width: withSpring(values.targetWidth),  
      height: withSpring(values.targetHeight),  
    },  
  
    initialValues: {  
      originX: values.currentOriginX,  
      originY: values.currentOriginY,  
      width: values.currentWidth,  
      height: values.currentHeight,  
    },  
  };  
};  
```

--------------------------------

### withSequence shake animation

Source: https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/applying-modifiers

Full example of a shake animation using withSequence, withRepeat, and withTiming. The box moves left, shakes 5 times, and returns to start.

```tsx
  const TIME = 250;  
  
  const handlePress = () => {  
    offset.value = withSequence(  
      // start from -OFFSET  
      withTiming(-OFFSET, { duration: TIME / 2 }),  
      // shake between -OFFSET and OFFSET 5 times  
      withRepeat(withTiming(OFFSET, { duration: TIME }), 5, true),  
      // go back to 0 at the end  
      withTiming(0, { duration: TIME / 2 })  
    );  
  };  

```

--------------------------------

### prepare argument example

Source: https://docs.swmansion.com/react-native-reanimated/docs/advanced/useAnimatedReaction

Example showing the prepare function returning a computed value from a shared value, which is used as the first parameter of the react function.

```jsx
function App() {
  useAnimatedReaction(
    () => {
      return Math.floor(sv.value);
    },
    (currentValue, previousValue) => {
      // ...
    }
  );
}
```

--------------------------------

### steps timing function example

Source: https://docs.swmansion.com/react-native-reanimated/docs/css-animations/animation-timing-function

Example of using the `steps` parametrized timing function with 4 steps and the 'jump-end' modifier.

```javascript
import { steps } from 'react-native-reanimated';  
  
animationTimingFunction: steps(4, 'jump-end'),  

```

--------------------------------

### Predefined timing function example

Source: https://docs.swmansion.com/react-native-reanimated/docs/css-animations/animation-timing-function

Example of using a predefined timing function string, here 'linear'.

```javascript
animationTimingFunction: 'linear',  

```

--------------------------------

### CustomExitTransition

Source: https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/custom-animations

Reference for custom exiting animations, including type definitions, arguments, and an example.

```APIDOC
## CustomExitTransition

### Description
Defines a custom exiting animation function that returns a LayoutAnimation.

### Signature
```typescript
function CustomExitTransition(values: ExitAnimationsValues): LayoutAnimation
```

### Parameters
- **values** (ExitAnimationsValues) - Required - Contains information about where the view was displayed and its dimensions.
  - `values.currentOriginX` (number) - X coordinate of top left corner in parent's coordinate system.
  - `values.currentOriginY` (number) - Y coordinate of top left corner in parent's coordinate system.
  - `values.currentWidth` (number) - View's width.
  - `values.currentHeight` (number) - View's height.
  - `values.currentBorderRadius` (number) - View's border radius.
  - `values.currentGlobalOriginX` (number) - X coordinate of top left corner in global coordinate system.
  - `values.currentGlobalOriginY` (number) - Y coordinate of top left corner in global coordinate system.

### Returns
- **LayoutAnimation** - An object with `initialValues`, `animations`, and optional `callback`.

### Example
```typescript
const customExiting = (values) => {
  'worklet';
  const animations = {
    originX: withTiming(2 * WIDTH, { duration: 3000 }),
    opacity: withTiming(0, { duration: 2000 }),
    transform: [{ scale: withTiming(0.2, { duration: 3500 }) }],
  };
  const initialValues = {
    originX: values.currentOriginX,
    opacity: 1,
    transform: [{ scale: 1 }],
  };
  return {
    initialValues,
    animations,
  };
};
```
```

--------------------------------

### Infinite loop example

Source: https://docs.swmansion.com/react-native-reanimated/docs/advanced/useAnimatedReaction

Warning example showing that mutating the same shared value in the react function that was used in the prepare function leads to an infinite loop.

```jsx
function App() {
  useAnimatedReaction(
    () => {
      return width.value;
    },
    (currentValue) => {
      // 🚨 An infinite loop!
      width.value += currentValue;
    }
  );
}
```

--------------------------------

### createAnimatedComponent

Source: https://docs.swmansion.com/react-native-reanimated/docs/core/createAnimatedComponent

Documentation for the createAnimatedComponent function, including its signature, parameters, return value, and usage example.

```APIDOC
## createAnimatedComponent

### Description
Creates an Animated version of any React Native component, allowing Reanimated to animate any prop or style associated with that component.

### Signature
```typescript
function createAnimatedComponent<P extends object>(
  component: ComponentClass<P>
): ComponentClass<AnimateProps<P>>;

function createAnimatedComponent<P extends object>(
  component: FunctionComponent<P>
): FunctionComponent<AnimateProps<P>>;
```

### Parameters
- **component** (ComponentClass<P> | FunctionComponent<P>) - Required - The component you want to make animatable. Function components have to be wrapped with `React.forwardRef()`.

### Returns
Returns a component that Reanimated is capable of animating.

### Example
```typescript
import Animated from 'react-native-reanimated';
import { TextInput } from 'react-native';

const AnimatedTextInput = Animated.createAnimatedComponent(TextInput);
```

### Platform Compatibility
| Android | iOS | Web |
|---------|-----|-----|
| ✅      | ✅  | ✅  |
```

--------------------------------

### Correct and incorrect dependency arrays

Source: https://docs.swmansion.com/react-native-reanimated/docs/guides/web-support

Shows the correct way to pass dependencies: use the root dependency (sv) instead of sv.value. The bad example triggers a warning, the good example is correct.

```javascript
const sv = useSharedValue(0);  
  
// 🚨 bad, sv.value is in the array  
const dv = useDerivedValue(() => sv.value, [sv.value]);  
  
// ✅ good, sv is in the array  
const dv = useDerivedValue(() => sv.value, [sv]);  
```

--------------------------------

### cubicBezier timing function example

Source: https://docs.swmansion.com/react-native-reanimated/docs/css-animations/animation-timing-function

Example of using the `cubicBezier` parametrized timing function with control points (0.25, 0.1, 0.5, 2).

```javascript
import { cubicBezier } from 'react-native-reanimated';  
  
animationTimingFunction: cubicBezier(0.25, 0.1, 0.5, 2),  

```

--------------------------------

### Custom exiting animation example

Source: https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/custom-animations

Example of a custom exiting animation. It animates originX, opacity, and scale using withTiming, with initial values taken from the provided values object.

```javascript
const customExiting = (values) => {  
  'worklet';  
  const animations = {  
    originX: withTiming(2 * WIDTH, { duration: 3000 }),  
    opacity: withTiming(0, { duration: 2000 }),  
    transform: [{ scale: withTiming(0.2, { duration: 3500 }) }],  
  };  
  const initialValues = {  
    originX: values.currentOriginX,  
    opacity: 1,  
    transform: [{ scale: 1 }],  
  };  
  return {  
    initialValues,  
    animations,  
  };  
};  

```

--------------------------------

### useTimestamp example with isActive

Source: https://docs.swmansion.com/react-native-reanimated/docs/advanced/useTimestamp

Example component PulsingDot that uses useTimestamp with a visible prop to control updates, and uses the timestamp in useAnimatedStyle to create a pulsing opacity effect.

```javascript
function PulsingDot({ visible }) {
  const timestamp = useTimestamp(visible);

  const animatedStyle = useAnimatedStyle(() => ({
    opacity: 0.5 + 0.5 * Math.sin(timestamp.value / 300),
  }));

  return <Animated.View style={[styles.dot, animatedStyle]} />;
}
```

--------------------------------

### LightSpeedInLeft springify configuration

Source: https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/entering-exiting-animations

Spring-based modifier example for LightSpeedInLeft. Uses withSpring and configures damping, mass, stiffness, overshootClamping, and energyThreshold.

```javascript
LightSpeedInLeft.springify()
  .damping(30)
  .mass(5)
  .stiffness(10)
  .overshootClamping(false)
  .energyThreshold(6e-8);

```

--------------------------------

### BounceIn and BounceOut basic usage

Source: https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/entering-exiting-animations

Use BounceIn and BounceOut to add a bouncing enter and exit animation to a view. The example shows the basic usage with the entering and exiting props.

```jsx
import { BounceIn, BounceOut } from 'react-native-reanimated';

function App() {
  return <Animated.View entering={BounceIn} exiting={BounceOut} />;
}
```

--------------------------------

### Spring-based modifier example: FlipInXUp.springify()

Source: https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/entering-exiting-animations

Spring-based modifiers rely on the withSpring function. .springify() enables spring configuration. Defaults: damping 120, mass 4, stiffness 900, overshootClamping false, energyThreshold 6e-9.

```javascript
FlipInXUp.springify()
  .damping(2)
  .mass(3)
  .stiffness(10)
  .overshootClamping(false)
  .energyThreshold(6e-8);
```

--------------------------------

### Pinwheel entering and exiting animation

Source: https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/entering-exiting-animations

Use PinwheelIn and PinwheelOut to animate a view's entering and exiting with rotation, scale, and opacity. The example shows the basic usage in a React component.

```jsx
import { PinwheelIn, PinwheelOut } from 'react-native-reanimated';

function App() {
  return <Animated.View entering={PinwheelIn} exiting={PinwheelOut} />;
}
```

--------------------------------

### RollOutLeft time-based modifiers

Source: https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/entering-exiting-animations

Time-based modifier example for RollOutLeft. Uses withTiming under the hood. The easing function defaults to Easing.inOut(Easing.quad). Time-based modifiers have no effect when .springify() is used.

```javascript
RollOutLeft.duration(500).easing(Easing.ease);
```

--------------------------------

### Common modifier example: FlipInEasyY.delay().randomDelay().reduceMotion()

Source: https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/entering-exiting-animations

Common modifiers apply to all presets. .duration() defaults to 300, .delay() to 0, .randomDelay() uses 1000 ms if no delay provided. .withInitialValues() and .withTargetValues() accept only the properties the preset animates. .withCallback() fires after animation ends, setting finished to true if no interruptions.

```javascript
FlipInEasyY.delay(500)
  .randomDelay()
  .reduceMotion(ReduceMotion.Never)
  .withInitialValues({ perspective: 100, rotateY: '123deg' })
  .withTargetValues({ rotateY: '0deg' })
  .withCallback((finished) => {
    console.log(`finished without interruptions: ${finished}`);
  });
```

--------------------------------

### React Compiler compliant access with get and set

Source: https://docs.swmansion.com/react-native-reanimated/docs/core/useSharedValue

When using the React Compiler, avoid direct access to the value property. Instead, use the get and set methods. This example shows reading with get() and updating with set() inside a worklet and a callback.

```typescript
function App() {  
  const sv = useSharedValue(100);  
  
  const animatedStyle = useAnimatedStyle(() => {  
    'worklet';  
    return { width: sv.get() * 100 };  
  });  
  
  const handlePress = () => {  
    sv.set((value) => value + 1);  
  };  
}  
```

--------------------------------

### Using ReduceMotion.System in withTiming and withDelay

Source: https://docs.swmansion.com/react-native-reanimated/docs/guides/accessibility

Shows how to set reduceMotion to ReduceMotion.System for withTiming and withDelay. By default, all animations are configured with ReduceMotion.System.

```javascript
import { withDelay, withTiming } from 'react-native-reanimated';  
  
function App() {  
  sv1.value = withTiming(0, { reduceMotion: ReduceMotion.System });  
  sv2.value = withDelay(  
    1000,  
    withTiming(toValue, { duration }),  
    ReduceMotion.System  
  );  
  // ...  
}  

```

--------------------------------

### FlipX entering and exiting animations

Source: https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/entering-exiting-animations

Use FlipInEasyX and FlipOutEasyX to animate a view's entering and exiting with a flip rotation over the X axis. The entering animation starts with rotateX: '90deg' and ends at '0deg', while the exiting animation reverses this. Apply these animations via the entering and exiting props on an Animated.View.

```jsx
import { FlipInEasyX, FlipOutEasyX } from 'react-native-reanimated';

function App() {
  return <Animated.View entering={FlipInEasyX} exiting={FlipOutEasyX} />;
}
```

--------------------------------

### Common modifier example: SlideInDown.delay().withCallback()

Source: https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/entering-exiting-animations

Common modifiers apply to all presets. .delay() defaults to 0, .randomDelay() randomizes between 0 and the provided delay (1000 ms if not provided), .reduceMotion() respects the device's reduced motion setting, .withInitialValues() and .withTargetValues() override initial and target values (only properties the preset animates), and .withCallback() fires after the animation ends with finished true if no interruptions.

```javascript
SlideInDown.delay(500)
  .randomDelay()
  .reduceMotion(ReduceMotion.Never)
  .withInitialValues({ originY: 420 })
  .withTargetValues({ originY: 0 })
  .withCallback((finished) => {
    console.log(`finished without interruptions: ${finished}`);
  });
```

--------------------------------

### Spring-based modifier example: SlideInUp.springify()

Source: https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/entering-exiting-animations

Spring-based modifiers rely on the withSpring function. .springify() enables spring-based configuration. Defaults: damping 120, mass 4, stiffness 900, overshootClamping false, energyThreshold 6e-9.

```javascript
SlideInUp.springify()
  .damping(30)
  .mass(5)
  .stiffness(10)
  .overshootClamping(false)
  .energyThreshold(6e-8);
```

--------------------------------

### All transition callbacks on Animated.View

Source: https://docs.swmansion.com/react-native-reanimated/docs/css-transitions/transition-callbacks

Reference example showing all four transition callbacks (onCSSTransitionRun, onCSSTransitionStart, onCSSTransitionEnd, onCSSTransitionCancel) attached to a single Animated.View.

```tsx
function App() {  
  return (  
    <Animated.View  
      style={{ transitionProperty: 'opacity', transitionDuration: 300 }}  
      onCSSTransitionRun={(event) => console.log('run', event.propertyName)}  
      onCSSTransitionStart={(event) => console.log('start', event.propertyName)}  
      onCSSTransitionEnd={(event) => console.log('end', event.propertyName)}  
      onCSSTransitionCancel={(event) => console.log('cancel', event.propertyName)}  
    />  
  );  
}  

```

--------------------------------

### App component with opacity pseudo selector

Source: https://docs.swmansion.com/react-native-reanimated/docs/css-transitions/pseudo-selectors

A full component example demonstrating how to transition opacity between a default state and a hover state.

```jsx
function App() {  
  return (  
    <Animated.View  
      style={{  
        opacity: {  
          default: 0.6,  
          ':hover': 1,  
        },  
        transitionDuration: 300,  
      }}  
    />  
  );  
}  
```

--------------------------------

### Common modifiers with ZoomIn

Source: https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/entering-exiting-animations

Applies common modifiers to a layout animation preset. .delay() sets the delay before the animation starts (default 0), .randomDelay() randomizes the delay between 0 and the provided delay (or 1000 ms if not provided), .reduceMotion() responds to the device's reduced motion setting, .withInitialValues() and .withTargetValues() override initial and target values, and .withCallback() fires after the animation ends with a boolean indicating whether it finished without interruptions.

```javascript
ZoomIn.delay(500)
  .randomDelay()
  .reduceMotion(ReduceMotion.Never)
  .withInitialValues({ scale: 0.5 })
  .withTargetValues({ scale: 1 })
  .withCallback((finished) => {
    console.log(`finished without interruptions: ${finished}`);
  });
```

--------------------------------

### Install react-native-worklets with yarn

Source: https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started

Install the react-native-worklets dependency using yarn. This library is required and must be installed separately.

```bash
yarn add react-native-worklets
```

--------------------------------

### Install react-native-worklets with npm

Source: https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started

Install the react-native-worklets dependency using npm. This library is required and must be installed separately.

```bash
npm install react-native-worklets
```

--------------------------------

### SectionCards component rendering content sections

Source: https://docs.swmansion.com/react-native-reanimated/examples/sectionlist

The SectionCards component manages rendering of individual sections and their content. It receives sections, visibleIndex, sectionCardsRef, and tableOfContentsRef. It calculates offset starts, handles scroll events to update visibleIndex and scroll the table of contents, and renders a FlashList with estimated item size. The code is part of a larger example; the full code is available via 'Expand the full code'.

```tsx
  },  
});  
  
const SectionCards = ({  
  sections,  
  visibleIndex,  
  sectionCardsRef,  
  tableOfContentsRef,  
}) => {  
  const textColor = useThemedTextStyle();  
  const heights = sections.map((_) => SECTION_HEIGHT);  
  
  const getOffsetStarts = () =>  
    heights.map((v, i) => heights.slice(0, i).reduce((x, acc) => x + acc, 0));  
  
  const onScroll = (event) => {  
    const offset = event.nativeEvent?.contentOffset?.y;  
  
    if (offset !== undefined) {  
      const distancesFromTop = getOffsetStarts().map((v) =>  
        Math.abs(v - offset)  
      );  
      const newIndex = distancesFromTop.indexOf(  
        Math.min.apply(null, distancesFromTop)  
      );  
      if (visibleIndex.value !== newIndex) {  
        tableOfContentsRef.current?.scrollToIndex({  
          index: newIndex,  
          animated: true,  
        });  
      }  
      visibleIndex.value = newIndex;  
    }  
  };  
  
  const renderItem = ({ item }) => {  
    return (  
      <View>  
        <Animated.Text style={[sectionCardStyles.header, textColor]}>  
          {item.name}  
        </Animated.Text>  
        <SectionCardsElement>  
          <Text style={sectionCardStyles.content}>{item.content}</Text>  
        </SectionCardsElement>  
      </View>  
    );  
  };  
  
  return (  
    <View style={sectionListStyles.flex}>  
      <FlashList  
        ref={sectionCardsRef}  
        estimatedItemSize={52}  
        estimatedFirstItemOffset={0}  
        renderItem={renderItem}  
        data={sections}  
        extraData={textColor}  
        onScrollBeginDrag={onScroll}  
        onScrollEndDrag={onScroll}  

```

--------------------------------

### Mount a directory as a drive with subst

Source: https://docs.swmansion.com/react-native-reanimated/docs/guides/building-on-windows

Use this command to mount a directory (e.g., C:\Users\Tomek\AwesomeProject) as a drive (e.g., H:) to shorten the project path and avoid long path issues.

```bash
subst H: C:\Users\Tomek\AwesomeProject
```

--------------------------------

### Install react-native-reanimated with yarn

Source: https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started

Install the react-native-reanimated package using yarn. Required for Reanimated 4.

```bash
yarn add react-native-reanimated
```

--------------------------------

### Install react-native-reanimated with npm

Source: https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started

Install the react-native-reanimated package using npm. Required for Reanimated 4.

```bash
npm install react-native-reanimated
```

--------------------------------

### steps timing function example

Source: https://docs.swmansion.com/react-native-reanimated/docs/css-transitions/transition-timing-function

Example of using the steps parametrized timing function with 4 steps and the 'jump-end' modifier.

```tsx
import { steps } from 'react-native-reanimated';  
  
transitionTimingFunction: steps(4, 'jump-end'),  

```
Tokens:
Raw