Co-authored-by: Kacper Kapuściak <39658211+kacperkapusciak@users.noreply.github.com>

Co-authored-by: Kacper Kapuściak <39658211+kacperkapusciak@users.noreply.github.com>

## Summary

This PR aims to fix the issue when Release builds would fail on Paper on
iOS.
The reason this regression happened is #5113.

XCode ships by default to new projects `DEBUG` macro for Debug
Configuration. Due to some issues (#4902) we decided to switch over to
`NDEBUG` macro. However, the `NDEBUG` is not provided by XCode out of
the box. Incidentally, it's provided by React Native which puts its
install script into project's Podfile - however, [only in
Fabric](facebook/react-native@421df9f).
What is more, some time ago React Native made it so `PRODUCTION=1 pod
install` is [no longer a necessary
step](facebook/react-native@93fdcba)
to make a release build, therefore we cannot rely on it. Until React
Native defines `NDEBUG` for Paper too we have to detect, based on
available options, whether we potentially have a Release build and this
pull request does this.

Thanks to
#5383 we
finally figures out how to do it the most agreeable way. We hardcode
that for a build config named `Release` NDEBUG=1 will be set. If the
user uses some custom release build config e.g. "MyRelease", NDEBUG=1
will not be set - in this situation we'll require the user to use
`PRODUCTION=1`.

## Test plan

Run all example apps (except TVOS cause I couldn't make it cooperate
with me, and Web) on both iOS and Android in both Release and Debug and
see if they work properly (e.g. add a throw in #ifndef fragment).

…#5308)

Requires #5320.

## Summary

I induced a regression accidentally in #5031 regarding FlatList. 

This PR:
- fixes this regression,
- improves the type structure of other components,
- adds a new test suite to detect such mistakes in the future.

It also automatically fixes failing future RN version typecheck CI.

## Test plan

All the new & old tests should work.

## Summary

Based on the changes in our libraries mentioned in this PR
(software-mansion/react-native-gesture-handler#2635),
we need to make adjustments to our `.podspec` file. We should utilize
the `install_modules_dependencies` feature available in React Native
since version 0.72.

Backward compatibility:
<img width="126" alt="image"
src="https://github.com/software-mansion/react-native-reanimated/assets/36106620/ce5c1c67-8251-47d6-8d4b-98c959a4dfb8">

## Test plan

Check CI

---------

Co-authored-by: Tomek Zawadzki <tomasz.zawadzki@swmansion.com>

## Summary

Building on release mode using react-native 0.73.0-rc.4 results in a
build error due to undefined symbols

> Undefined symbols for architecture x86_64:

"facebook::hermes::inspector_modern::chrome::enableDebugging(std::__1::unique_ptr<facebook::hermes::inspector_modern::RuntimeAdapter,
std::__1::default_delete<facebook::hermes::inspector_modern::RuntimeAdapter>>,
std::__1::basic_string<char, std::__1::char_traits<char>,
std::__1::allocator<char>> const&)", referenced from:

reanimated::ReanimatedHermesRuntime::ReanimatedHermesRuntime(std::__1::unique_ptr<facebook::hermes::HermesRuntime,
std::__1::default_delete<facebook::hermes::HermesRuntime>>,
std::__1::shared_ptr<facebook::react::MessageQueueThread> const&,
std::__1::basic_string<char, std::__1::char_traits<char>,
std::__1::allocator<char>> const&) in
libRNReanimated.a(ReanimatedHermesRuntime.o)
"facebook::hermes::inspector_modern::chrome::disableDebugging(int)",
referenced from:
reanimated::ReanimatedHermesRuntime::~ReanimatedHermesRuntime() in
libRNReanimated.a(ReanimatedHermesRuntime.o)

This happens because react native only sets `HERMES_ENABLE_DEBUGGER` in
debug mode
https://github.com/facebook/react-native/blob/23cf10428eb58cfcbf614b8b0728f2535f2d252f/packages/react-native/scripts/cocoapods/utils.rb#L44-L47

So in order to fix this I believe that instead of always adding the
`HERMES_ENABLE_DEBUGGER` flag we should only it on debug mode as well,
using `GCC_PREPROCESSOR_DEFINITIONS[config=Debug]`

## Test plan

Build using react-native 0.73.0-rc.4 on release mode

---------

Co-authored-by: Tomek Zawadzki <tomekzawadzki98@gmail.com>

<!-- Thanks for submitting a pull request! We appreciate you spending
the time to work on these changes. Please follow the template so that
the reviewers can easily understand what the code changes affect. -->

## Summary

This PR changes the babel plugin to remove `initData` on web. It aims to
reduce the bundle size.

❗ EDIT: I reworked this PR to instead have a more narrow configuration
option (`omitNativeOnlyData`). This will work well in conjunction with
our babel preset which will be able to configure the plugin
automatically based on the target platform.

## Test plan
Modify the `NextExample/babel.config.js` file:
```js
['react-native-reanimated/plugin', { omitWorkletInitData: true }]
```
Run `yarn build` in NextExample and verify that the difference between
reanimated and noreanimated is around 35KB.

## Summary

Since with [this
PR](#5380),
a missing easing mock was added, I figured I can extend this a little
bit and add some more mock functions to `BaseAnimationMock`.

PS: I can also add the rest if that's fine with the
maintainers(Including everything that is accessible from
`ComplexAnimationBuilder` and `BaseAnimationBuilder` via dot property
accessor).

---------

Co-authored-by: Uğurcan Emre Ataş <ugurcan.atas@kollex.de>

## Summary

This PR fixes error:
```bash
[!] Invalid `Podfile` file: 
[!] Invalid `RNReanimated.podspec` file: undefined local variable or method `config' for Pod:Module
Did you mean?  concerning.

 #  from /Users/runner/work/react-native-reanimated/react-native-reanimated/Example/node_modules/react-native-reanimated/RNReanimated.podspec:90
 #  -------------------------------------------
 #    gcc_debug_definitions =  "$(inherited)"
 >    if config[:react_native_minor_version] >= 73 || !is_release
 #      gcc_debug_definitions << " HERMES_ENABLE_DEBUGGER=1"
 #  -------------------------------------------
.

 #  from /Users/runner/work/react-native-reanimated/react-native-reanimated/Example/ios/Podfile:31
 #  -------------------------------------------
 #  target 'ReanimatedExample' do
 >    config = use_native_modules!
 #  
 #  -------------------------------------------
 ```

Related to PRs: #5383 and #5334

It is because we renamed `config` to global variable `$config`

## Test plan

Build Example app

---------

Co-authored-by: Tomek Zawadzki <tomasz.zawadzki@swmansion.com>

<!-- Thanks for submitting a pull request! We appreciate you spending
the time to work on these changes. Please follow the template so that
the reviewers can easily understand what the code changes affect. -->

## Summary

Pretty self-explanatory 😭 

## Test plan

<!-- Provide a minimal but complete code snippet that can be used to
test out this change along with instructions how to run it and a
description of the expected behavior. -->

## Summary

This PR introduces `runOnRuntime` function which lets you queue worklets
to run in a worklet runtime on a separate thread. This can be used for
instance to offload the JS thread when performing time-expensive
computations.

The function `runOnRuntime` can be called both from RN runtime as well
as from other worklet runtimes (including the UI runtime). Note that if
you call `runOnRuntime` from a worklet, you might need to enable
`processNestedWorklets` flag in Reanimated Babel plugin so the nested
worklet is also properly transformed. For now, `runOnRuntime` does not
suppport auto-workletization of its argument but most likely this
improvement will be added in a subsequent PR.

Here's how to use this API:

```ts
const runtime = createWorkletRuntime('fibonacci runtime', () => {
  'worklet';
  // initialize runtime if needed
  // this worklet is called on worklet runtime but synchronously on the same thread
  global.fib = (n: number) => { /* ... */ };
});

runOnRuntime(runtime, () => {
  'worklet';
  // this worklet is queued and run asynchronously on a separate thread
  const result = fib(40);
  runOnJS(setResult)(result);
});
```

Analogously to already existing `runOnUI` and `runOnJS` functions,
`runOnRuntime` returns a new function that accepts an arbitrary number
of arguments:
```ts
runOnRuntime(runtime, (x: number, y: string) => {
  'worklet';
  console.log(x, y);
})(42, "foo");
```

Here's the idea behind memory management of worklet runtimes and async
queue:
* `WorkletRuntime` keeps `std::shared_ptr<AsyncQueue>` which is
initialized during first call to `runOnRuntime`
* In its constructor, `AsyncQueue` spins up a new `std::thread` which
runs the run loop provided as C++ lambda.
* It was a deliberate decision not to call `thread.join()` in
`~AsyncQueue` because this could potentially delay the cleanup of other
parts of the library. Instead, we call `thread.detach()` and let the
thread run even after `AsyncQueue` instance is destroyed.
* This means that the queue may be still running even after the app
reload is complete.
* In this approach, the run loop lambda can still access task queue,
mutex and conditional variable after `AsyncQueue` is deallocated, so we
needed to extract these objects into a separate structure,
`AsyncQueueState`, which we pass as a `shared_ptr` to the lambda as well
as hold it as a field in `AsyncQueue` class. All usages of these objects
from `AsyncQueue` methods are delegated to `state_->` object.
* There's no way to terminate worklet runtime or async queue thread
while it's still performing some tasks, so the user is responsible for
keeping the tasks finite.
* `AsyncQueueState` holds a FIFO queue of tasks (as
`std::function<void()>`) which retain `WorkletRuntime`. This prevents
deallocating worklet runtime (as C++ object) when user no longer holds
it in JS code.
* Once all tasks are complete and the queue is empty, there is no strong
pointers to worklet runtime, so it can be properly deallocated along
with async queue and async queue state.

## Test plan

1. Convert `struct AsyncQueueState` into a `class`, add the following
destructor and set a breakpoint side:
```cpp
~AsyncQueueState() {
  int x = 42;
  (void)x;
}
```
2. Add destructor in `AsyncQueue` and set a breakpoint inside
3. Add destructor in `WorkletRuntime` and set a breakpoint inside
4. Launch the app
5. Reload the app (e.g. press <kbd>r</kbd> in Metro console or in iOS
simulator)
6. Confirm that the breakpoint in `~WorkletRuntime` is hit (because it
destroys the UI runtime)
7. Open WorkletRuntimeExample
8. Press "createWorkletRuntime"
9. Reload the app
10. Confirm that the breakpoint in `~WorkletRuntime` is hit twice
(because now it also destroys worklet runtime)
11. Press "runOnRuntime from JS"
12. Reload the app
10. Confirm that the breakpoint in `~WorkletRuntime` is hit twice as
well as breakpoints in `~AsyncQueue` and `~AsyncQueueState` are also hit
once

This PR adds a pretty & cool layout animation showcase to the Example
app.

Works on iOS, Android and the Web 🎉 


https://github.com/software-mansion/react-native-reanimated/assets/39658211/289d8fa9-d408-4ed8-83dc-061da7623064

## Summary

This PR changes where we set component visibility at the beginning on
entering animation. Moving it to `onanimationstart` prevents flickering.

## Test plan

Tested on example app and provided repro:

<details>
<summary> Repro code </summary>

```jsx
import React from 'react';
import { StyleSheet, View, Text } from 'react-native';
import Animated, {
  FadeIn,
  FadeInLeft,
  FadeInRight,
  FadeInUp,
  FadeInDown,
  FadeOut,
  FadeOutLeft,
  FadeOutRight,
  FadeOutUp,
  FadeOutDown,
} from 'react-native-reanimated';

const DELAY = 500;

const fadeAnimation = [
  {
    enteringName: 'FadeIn',
    enteringAnimation: FadeIn,
    exitingName: 'FadeOut',
    exitingAnimation: FadeOut,
  },
  {
    enteringName: 'FadeInLeft',
    enteringAnimation: FadeInLeft,
    exitingName: 'FadeOutLeft',
    exitingAnimation: FadeOutLeft,
  },
  {
    enteringName: 'FadeInRight',
    enteringAnimation: FadeInRight,
    exitingName: 'FadeOutRight',
    exitingAnimation: FadeOutRight,
  },
  {
    enteringName: 'FadeInUp',
    enteringAnimation: FadeInUp,
    exitingName: 'FadeOutUp',
    exitingAnimation: FadeOutUp,
  },
  {
    enteringName: 'FadeInDown',
    enteringAnimation: FadeInDown,
    exitingName: 'FadeOutDown',
    exitingAnimation: FadeOutDown,
  },
];

export default function App() {
  const [showExiting, setShowExiting] = React.useState(false);

  React.useEffect(() => {
    const timeout = setTimeout(() => {
      setShowExiting(true);
    }, DELAY * fadeAnimation.length);
    return () => clearTimeout(timeout);
  }, []);

  return (
    <View style={styles.container}>
      {showExiting
        ? fadeAnimation.map((animation) => (
            <View
              style={[styles.box, styles.exitingBox]}
              key={animation.exitingName}>
              <Text style={styles.exitingText}>{animation.exitingName}</Text>
            </View>
          ))
        : fadeAnimation.map((animation, i) => (
            <Animated.View
              entering={animation.enteringAnimation.delay(DELAY * i)}
              exiting={animation.exitingAnimation.delay(500 * i)}
              key={animation.enteringName}
              style={[styles.box, styles.enteringBox]}>
              <Text style={styles.enteringText}>{animation.enteringName}</Text>
            </Animated.View>
          ))}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  box: {
    height: 50,
    width: 250,
    margin: 4,
    alignItems: 'center',
    justifyContent: 'center',
  },
  enteringBox: {
    backgroundColor: '#b58df1',
  },
  enteringText: {
    fontSize: 16,
    color: 'white',
  },
  exitingBox: {
    borderColor: '#b58df1',
    borderStyle: 'dashed',
    borderWidth: 1,
  },
  exitingText: {
    fontSize: 16,
    color: '#b58df1',
  },
});
```
</details>

Requires #5282.

## Summary

Some TS shenanigans as a necessary bonus.

<table>
<tr><td>BEFORE</td><td>AFTER</td></tr>
<tr><td>


https://github.com/software-mansion/react-native-reanimated/assets/40713406/d13c9186-f1e5-4e12-bbb1-704b1eac0c08

</td><td>


https://github.com/software-mansion/react-native-reanimated/assets/40713406/804fbcfb-f0f0-4b3f-9af3-c46617ffed18

</td></tr>
</table>




## Test plan

<details>

```tsx
import { StyleSheet, View, Button } from 'react-native';

import Animated, { FadeIn } from 'react-native-reanimated';

import React from 'react';

export default function EmptyExample() {
  const [shouldBeUseEntering, setShouldBeUseEntering] = React.useState(false);

  function handlePress() {
    setShouldBeUseEntering(!shouldBeUseEntering);
  }

  return (
    <View style={styles.container}>
      <Button title="ShouldBeUseEntering" onPress={handlePress} />
      <Animated.View
        style={styles.box}
        entering={shouldBeUseEntering ? FadeIn : undefined}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  box: {
    width: 100,
    height: 100,
    backgroundColor: 'blue',
  },
});
```

</details>

---------

Co-authored-by: Michał Bert <michal.bert@swmansion.com>

<!-- Thanks for submitting a pull request! We appreciate you spending
the time to work on these changes. Please follow the template so that
the reviewers can easily understand what the code changes affect. -->

## Summary

We've lost our searchbar on Android 😱 But once we bump
`react-native-screens` it works again 💪
<!-- Explain the motivation for this PR. Include "Fixes #<number>" if
applicable. -->

|BEFORE|AFTER|
|--|--|
|![Screenshot 2023-11-09 at 10 21
15](https://github.com/software-mansion/react-native-reanimated/assets/56199675/971d8b2f-6e4c-49c7-bd2f-6b3406dc5739)|![Screenshot
2023-11-09 at 10 21
41](https://github.com/software-mansion/react-native-reanimated/assets/56199675/67ee4825-eb8b-403d-915b-a9f5efd982f2)|

## Test plan
I've tested on Android (Example and Fabric Exampe)
<!-- Provide a minimal but complete code snippet that can be used to
test out this change along with instructions how to run it and a
description of the expected behavior. -->

---------

Co-authored-by: Aleksandra Cynk <aleksandracynk@Aleksandras-MacBook-Pro-3.local>

## Summary

Sometimes entering animations flicker. This happens because we've
recently merged [this
PR](#5278),
which always sets component visibility of the component on its first
render, even though now we are doing it inside `onanimationstart`.

## Test plan

Tested on example app on [LA] examples

<!-- Thanks for submitting a pull request! We appreciate you spending
the time to work on these changes. Please follow the template so that
the reviewers can easily understand what the code changes affect. -->

## Summary

tl;dr

## Test plan

### To make DEBUG bundle in RELEASE app

in `metro/Server.js` add

```js
transformOptions.dev = true;
```

below

```js
  async build(options) {
    const {
      entryFile,
      graphOptions,
      onProgress,
      resolverOptions,
      serializerOptions,
      transformOptions,
    } = splitBundleOptions(options);
```

and add `RCT_DEV=1` flag to pods in XCode

### To make RELEASE bundle in DEBUG app

```
Manually create release bundle with Metro, put it as e.g. `CUSTOM_BUNDLE.jsbundle` in `ios` and load it from file in AppDelegate.mm like this:

```mm
//#if DEBUG
// return [[RCTBundleURLProvider sharedSettings]
jsBundleURLForBundleRoot:@"index"];
//#else
return [[NSBundle mainBundle] URLForResource:@"CUSTOM_BUNDLE"
withExtension:@"jsbundle"];
//#endif
```

```

---------

Co-authored-by: Tomek Zawadzki <tomekzawadzki98@gmail.com>

<!-- Thanks for submitting a pull request! We appreciate you spending
the time to work on these changes. Please follow the template so that
the reviewers can easily understand what the code changes affect. -->

## Summary
Fix withClamp on android, there was a bug when clamp limits where
prefixed strings
<!-- Explain the motivation for this PR. Include "Fixes #<number>" if
applicable. -->

## Test plan

<!-- Provide a minimal but complete code snippet that can be used to
test out this change along with instructions how to run it and a
description of the expected behavior. -->

Co-authored-by: Aleksandra Cynk <aleksandracynk@Aleksandras-MacBook-Pro-3.local>

## Summary

Latest changes introduces `hasReducedMotion` function. The, problem is,
now we set component visibility to hidden even if `entering` prop is not
present. This PR fixes that.

## Test plan

Tested on example app.

🧑‍💻

## Summary

The modifications made in PR
#5306
cause the `_updateDataSynchronously` method to be called after every
`modify()` call. However, this method is slow for larger objects because
it involves copying the entire structure. This PR includes an additional
option to skip force updates if desired.

| before | after |
| --- | --- |
| <video
src="https://github.com/software-mansion/react-native-reanimated/assets/36106620/52f3c996-6d4c-4441-9085-2f488886ebff"
/> | <video
src="https://github.com/software-mansion/react-native-reanimated/assets/36106620/a48ebd44-22fd-4c7b-ae4f-37e6ca4496d6"
/> |

## Summary

In Fabric version 0.73, this flag is necessary. Without it, all
animations won't work properly since our animation logic heavily relies
on the commit and mount hooks.

## Summary

Release 3.6.0

Package build:
https://github.com/software-mansion/react-native-reanimated/actions/runs/6982688924

<!-- Thanks for submitting a pull request! We appreciate you spending
the time to work on these changes. Please follow the template so that
the reviewers can easily understand what the code changes affect. -->

## Summary

This PR adds RN 0.73 to the compatibility table as well as updates some
cells with correct information.

## Test plan

<img width="1492" alt="Zrzut ekranu 2023-11-27 o 11 15 00"
src="https://github.com/software-mansion/react-native-reanimated/assets/20516055/a1d6561a-2e22-4b65-9f3d-0a0112d874d6">

<img width="1492" alt="Zrzut ekranu 2023-11-27 o 11 15 28"
src="https://github.com/software-mansion/react-native-reanimated/assets/20516055/b37e6baa-ad1a-41b5-bf63-281b418690c0">

<!-- Thanks for submitting a pull request! We appreciate you spending
the time to work on these changes. Please follow the template so that
the reviewers can easily understand what the code changes affect. -->

## Summary

Just a small change in the docs.

## Test plan

<!-- Provide a minimal but complete code snippet that can be used to
test out this change along with instructions how to run it and a
description of the expected behavior. -->

<!-- Thanks for submitting a pull request! We appreciate you spending
the time to work on these changes. Please follow the template so that
the reviewers can easily understand what the code changes affect. -->

## Summary

This PR renames `Supported` and `NotSupported` components in
compatibility table to `Yes` and `No`. Shorter is better.

## Test plan

<!-- Provide a minimal but complete code snippet that can be used to
test out this change along with instructions how to run it and a
description of the expected behavior. -->

<!-- Thanks for submitting a pull request! We appreciate you spending
the time to work on these changes. Please follow the template so that
the reviewers can easily understand what the code changes affect. -->

## Summary

This PR removes the last include guard in our codebase.

<!-- Explain the motivation for this PR. Include "Fixes #<number>" if
applicable. -->

## Test plan

<!-- Provide a minimal but complete code snippet that can be used to
test out this change along with instructions how to run it and a
description of the expected behavior. -->

This PR aims to cover the entirety of Reanimated public API with short,
descriptive TSDoc comments. This will allow developers to stay longer in
their editors and save some time searching and googling.

Under each function there's a link to the documentation.

## Summary
This PR uses string interpolation to construct keyframe keys in
`Keyframe.ts` as requested it [PR
comment](#5363 (comment)).
Additionally it extracts it to a helper function

---------

Co-authored-by: Tomek Zawadzki <tomekzawadzki98@gmail.com>

<!-- Thanks for submitting a pull request! We appreciate you spending
the time to work on these changes. Please follow the template so that
the reviewers can easily understand what the code changes affect. -->

## Summary
Deprecate
`const Flatlist = Animated.createAnimatedComponent(FlatList)`

<!-- Explain the motivation for this PR. Include "Fixes #<number>" if
applicable. -->

## Test plan
I've tested that some calls are properly marked as deprecated:

![Screenshot 2023-11-30 at 11 15
44](https://github.com/software-mansion/react-native-reanimated/assets/56199675/c4a39ea9-125f-49b7-8fc2-1185de8809b6)

---------

Co-authored-by: Aleksandra Cynk <aleksandracynk@Aleksandras-MacBook-Pro-3.local>
Co-authored-by: Tomek Zawadzki <tomasz.zawadzki@swmansion.com>

<!-- Thanks for submitting a pull request! We appreciate you spending
the time to work on these changes. Please follow the template so that
the reviewers can easily understand what the code changes affect. -->

## Summary

This PR fixes the type of argument of `_log` function.

## Test plan

```ts
_log(42);
```

This PR reworks the `interpolate` documentation page. 

It adds two new interactive examples, refreshed descriptions and type
definitions.

## Before



https://github.com/software-mansion/react-native-reanimated/assets/39658211/ba12409b-138f-4c59-8191-d8af9bc8202b



## After



https://github.com/software-mansion/react-native-reanimated/assets/39658211/f6a90159-8182-4f9f-bd52-6fc0f38f2322

<!-- Thanks for submitting a pull request! We appreciate you spending
the time to work on these changes. Please follow the template so that
the reviewers can easily understand what the code changes affect. -->

## Summary

This PR fixes the following error by adding a missing cast.


![](https://github.com/software-mansion/react-native-reanimated/assets/20516055/9251987e-ccad-4a5e-b91f-eb43be068d8d)

## Test plan

<!-- Provide a minimal but complete code snippet that can be used to
test out this change along with instructions how to run it and a
description of the expected behavior. -->

<!-- Thanks for submitting a pull request! We appreciate you spending
the time to work on these changes. Please follow the template so that
the reviewers can easily understand what the code changes affect. -->

## Summary

Fixes #5425. 

## Test plan

Added a new test suite.

## Summary

Web layout animations crash if someone passes style prop which is an
array that contains undefined.

## Test plan

Tested on [this
code](#5429 (comment)).

## Summary

This PR aims to fix wrong positions of elements during `exiting` layout
animation.

## Test plan

Tested on example app (and other LA examples provided by
@kacperkapusciak)

## Summary

While fixing `entering` animations on web, I removed
`handleEnteringAnimation` and used `setElementAnimation` instead.
However, I didn't pass `transform` parameter, so it couldn't be applied.

## Test plan

Tested on mounting/unmounting example.

## Summary

[Recent
changes](#5376)
in Keyframe.ts introduced crashes on iOS and Android, because of calling
non-worklet function from UI thread.

## Test plan

Tested on Olympic example.

<!-- Thanks for submitting a pull request! We appreciate you spending
the time to work on these changes. Please follow the template so that
the reviewers can easily understand what the code changes affect. -->

## Summary

Fixes #5446.

## Test plan

<!-- Provide a minimal but complete code snippet that can be used to
test out this change along with instructions how to run it and a
description of the expected behavior. -->

## Summary

In implementation of web layout animations I used
`getSnapshotBeforeUpdate` to get position of element before its
re-render. However, this function lacks checks for platform and whether
component is null or not.

## Test plan

Tested on provided repro

<details>
<summary> Code from issue </summary>

```jsx
import React, {useRef, useState} from 'react'
import {StyleSheet, Text, TouchableOpacity, View, ViewStyle} from 'react-native'
import Animated from "react-native-reanimated"
import FastImage from "react-native-fast-image"

export const ReanimatedFastImage = Animated.createAnimatedComponent(FastImage)
const App = () => {

  const [value, setValue] = useState(false)
  const cardImageRef = useRef<any>(null)

  const onPress = () => {
    setValue(!value)
  }

  return (
    <View style={styles.container}>
      <ReanimatedFastImage ref={cardImageRef} />
      {value ? <View /> : null}
      <TouchableOpacity onPress={onPress} style={styles.buttonStyle}>
        <Text>Toggle Set State</Text>
      </TouchableOpacity>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
    padding: 8,
    alignItems: 'center'
  } as ViewStyle,
  buttonStyle: {
    backgroundColor: 'grey',
    width: 200,
    height: 50,
    marginVertical: 20,
    borderRadius: 8,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default App

```

</details>

## Summary

Update habits example as it now works fine on web.

## Test plan

Tested on Habits example

🚀

---------

Co-authored-by: Tomek Zawadzki <tomasz.zawadzki@swmansion.com>

<!-- Thanks for submitting a pull request! We appreciate you spending
the time to work on these changes. Please follow the template so that
the reviewers can easily understand what the code changes affect. -->

## Summary
Fix a function in the sample code
<!-- Explain the motivation for this PR. Include "Fixes #<number>" if
applicable. -->

## Test plan

<!-- Provide a minimal but complete code snippet that can be used to
test out this change along with instructions how to run it and a
description of the expected behavior. -->

---------

Co-authored-by: Kacper Kapuściak <39658211+kacperkapusciak@users.noreply.github.com>

<!-- Thanks for submitting a pull request! We appreciate you spending
the time to work on these changes. Please follow the template so that
the reviewers can easily understand what the code changes affect. -->

## Summary

<!-- Explain the motivation for this PR. Include "Fixes #<number>" if
applicable. -->
Fix a minor grammatical error: "could be [...] ran" is incorrect. At
minimum it should be "could be [...] run".

## Test plan

<!-- Provide a minimal but complete code snippet that can be used to
test out this change along with instructions how to run it and a
description of the expected behavior. -->
N/A

## Summary

In exiting animation, we create a dummy - clone of the original element
that will be removed. When animation ends, we remove dummy from parent.
The problem is, if something cancels animation, our dummy component
won't be removed.

I've stumbled upon this problem while working on custom keyframes.

## Test plan

Tested on example app. Mostly on Keyframe animation example (on branch
with custom keyframes implementation).

## Summary
The general idea here is that we can avoid the `makeMutable` call on
every single render. This change is also compatible with hot reloading.

We (at Discord) have been running this patch on top of our own
reanimated now for a few weeks and haven't noticed any side effects of
the change.

There has been a bit of additional discussion I've seen surrounding this
issue here:
#3199

## Test plan
N/A

## Summary

After analyzing the code it seems that `apply` doesn't serve any purpose
in Keyframe. I noticed it here because it was causing problems when
`processNestedWorklets` option was enabled, but this will be a subject
of a separate investigation.

## Testplan

Check that `KeyframeAnimation` and `OlympicAnimation` Examples are
working properly.

## Summary
This PR fixes most of the TS and ESLint errors in Examples.

---------

Co-authored-by: Tomasz Żelawski <tomasz.zelawski@swmansion.com>

<!-- Thanks for submitting a pull request! We appreciate you spending
the time to work on these changes. Please follow the template so that
the reviewers can easily understand what the code changes affect. -->

## Summary
This PR adds a warning that is displayed in dev mode when the reduced
motion accessibility feature is enabled on the device.

![Screenshot 2023-12-08 at 11 21
46](https://github.com/software-mansion/react-native-reanimated/assets/56109050/cbb12bb6-df28-4f31-a3b7-02b9ed79bc8d)


## Test plan

<!-- Provide a minimal but complete code snippet that can be used to
test out this change along with instructions how to run it and a
description of the expected behavior. -->

---------

Co-authored-by: Tomek Zawadzki <tomasz.zawadzki@swmansion.com>

## Summary
 
Right now, if element has any `transform` (for example `translateX`),
exiting won't work correctly. This happens because during animations we
write transform directly into components' style to avoid [problems with
delay](#5298).
On the other hand, exiting works with `snapshots` which already take
care about components position, including transforms.

In order to fix that we can ignore creating animation with transform and
reset `dummy.style.transform`.

## Test plan

<details>
<summary> Test code </summary>

```jsx
import React from 'react';
import { StyleSheet, View, Text, Pressable } from 'react-native';
import Animated, {
  FadeIn,
  FadeInDown,
  FadeOutDown,
} from 'react-native-reanimated';

export default function App() {
  const [showExiting, setShowExiting] = React.useState(false);

  return (
    <View style={styles.container}>
      {showExiting ? (
        <View style={[styles.box, styles.exitingBox]} key={'FadeOutDown'}>
          <Text style={styles.exitingText}>{'FadeOutDown'}</Text>
        </View>
      ) : (
        <Animated.View
          entering={FadeIn}
          exiting={FadeOutDown}
          key={'FadeIn'}
          style={[
            styles.box,
            styles.enteringBox,
            { transform: [{ translateX: 20 }] },
          ]}>
          <Text style={styles.enteringText}>{'FadeIn'}</Text>
        </Animated.View>
      )}

      <Pressable
        style={styles.button}
        onPress={() => setShowExiting(!showExiting)}>
        <Text style={{ color: 'white' }}> Click me! </Text>
      </Pressable>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  box: {
    height: 50,
    width: 250,
    margin: 4,
    alignItems: 'center',
    justifyContent: 'center',
  },
  enteringBox: {
    backgroundColor: '#b58df1',
  },
  enteringText: {
    fontSize: 16,
    color: 'white',
  },
  exitingBox: {
    borderColor: '#b58df1',
    borderStyle: 'dashed',
    borderWidth: 1,
  },
  exitingText: {
    fontSize: 16,
    color: '#b58df1',
  },
  button: {
    width: 100,
    height: 40,
    marginTop: 50,
    backgroundColor: '#b58df1',
    borderRadius: 5,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'space-around',
  },
});

```

</details>

<!-- Thanks for submitting a pull request! We appreciate you spending
the time to work on these changes. Please follow the template so that
the reviewers can easily understand what the code changes affect. -->

## Summary

This PR extends the reduced motion warning to inform that it is only
displayed in development mode and adds a note in docs that explains why
the warning is displayed and how it can be disabled.

## Test plan

<!-- Provide a minimal but complete code snippet that can be used to
test out this change along with instructions how to run it and a
description of the expected behavior. -->

Co-authored-by: Kacper Kapuściak <39658211+kacperkapusciak@users.noreply.github.com>

…xample.tsx

Co-authored-by: Kacper Kapuściak <39658211+kacperkapusciak@users.noreply.github.com>

…xample.tsx

Co-authored-by: Kacper Kapuściak <39658211+kacperkapusciak@users.noreply.github.com>

Building on release mode using react-native 0.73.0-rc.4 results in a
build error due to undefined symbols

> Undefined symbols for architecture x86_64:

"facebook::hermes::inspector_modern::chrome::enableDebugging(std::__1::unique_ptr<facebook::hermes::inspector_modern::RuntimeAdapter,
std::__1::default_delete<facebook::hermes::inspector_modern::RuntimeAdapter>>,
std::__1::basic_string<char, std::__1::char_traits<char>,
std::__1::allocator<char>> const&)", referenced from:

reanimated::ReanimatedHermesRuntime::ReanimatedHermesRuntime(std::__1::unique_ptr<facebook::hermes::HermesRuntime,
std::__1::default_delete<facebook::hermes::HermesRuntime>>,
std::__1::shared_ptr<facebook::react::MessageQueueThread> const&,
std::__1::basic_string<char, std::__1::char_traits<char>,
std::__1::allocator<char>> const&) in
libRNReanimated.a(ReanimatedHermesRuntime.o)
"facebook::hermes::inspector_modern::chrome::disableDebugging(int)",
referenced from:
reanimated::ReanimatedHermesRuntime::~ReanimatedHermesRuntime() in
libRNReanimated.a(ReanimatedHermesRuntime.o)

This happens because react native only sets `HERMES_ENABLE_DEBUGGER` in
debug mode
https://github.com/facebook/react-native/blob/23cf10428eb58cfcbf614b8b0728f2535f2d252f/packages/react-native/scripts/cocoapods/utils.rb#L44-L47

So in order to fix this I believe that instead of always adding the
`HERMES_ENABLE_DEBUGGER` flag we should only it on debug mode as well,
using `GCC_PREPROCESSOR_DEFINITIONS[config=Debug]`

Build using react-native 0.73.0-rc.4 on release mode

---------

Co-authored-by: Tomek Zawadzki <tomekzawadzki98@gmail.com>

This PR fixes error:
```bash
[!] Invalid `Podfile` file:
[!] Invalid `RNReanimated.podspec` file: undefined local variable or method `config' for Pod:Module
Did you mean?  concerning.

 #  from /Users/runner/work/react-native-reanimated/react-native-reanimated/Example/node_modules/react-native-reanimated/RNReanimated.podspec:90
 #  -------------------------------------------
 #    gcc_debug_definitions =  "$(inherited)"
 >    if config[:react_native_minor_version] >= 73 || !is_release
 #      gcc_debug_definitions << " HERMES_ENABLE_DEBUGGER=1"
 #  -------------------------------------------
.

 #  from /Users/runner/work/react-native-reanimated/react-native-reanimated/Example/ios/Podfile:31
 #  -------------------------------------------
 #  target 'ReanimatedExample' do
 >    config = use_native_modules!
 #
 #  -------------------------------------------
 ```

Related to PRs: #5383 and #5334

It is because we renamed `config` to global variable `$config`

Build Example app

---------

Co-authored-by: Tomek Zawadzki <tomasz.zawadzki@swmansion.com>

This PR adds a pretty & cool layout animation showcase to the Example
app.

Works on iOS, Android and the Web 🎉

https://github.com/software-mansion/react-native-reanimated/assets/39658211/289d8fa9-d408-4ed8-83dc-061da7623064

…s' into acynk/clamp-hoa-docs

This PR changes where we set component visibility at the beginning on
entering animation. Moving it to `onanimationstart` prevents flickering.

Tested on example app and provided repro:

<details>
<summary> Repro code </summary>

```jsx
import React from 'react';
import { StyleSheet, View, Text } from 'react-native';
import Animated, {
  FadeIn,
  FadeInLeft,
  FadeInRight,
  FadeInUp,
  FadeInDown,
  FadeOut,
  FadeOutLeft,
  FadeOutRight,
  FadeOutUp,
  FadeOutDown,
} from 'react-native-reanimated';

const DELAY = 500;

const fadeAnimation = [
  {
    enteringName: 'FadeIn',
    enteringAnimation: FadeIn,
    exitingName: 'FadeOut',
    exitingAnimation: FadeOut,
  },
  {
    enteringName: 'FadeInLeft',
    enteringAnimation: FadeInLeft,
    exitingName: 'FadeOutLeft',
    exitingAnimation: FadeOutLeft,
  },
  {
    enteringName: 'FadeInRight',
    enteringAnimation: FadeInRight,
    exitingName: 'FadeOutRight',
    exitingAnimation: FadeOutRight,
  },
  {
    enteringName: 'FadeInUp',
    enteringAnimation: FadeInUp,
    exitingName: 'FadeOutUp',
    exitingAnimation: FadeOutUp,
  },
  {
    enteringName: 'FadeInDown',
    enteringAnimation: FadeInDown,
    exitingName: 'FadeOutDown',
    exitingAnimation: FadeOutDown,
  },
];

export default function App() {
  const [showExiting, setShowExiting] = React.useState(false);

  React.useEffect(() => {
    const timeout = setTimeout(() => {
      setShowExiting(true);
    }, DELAY * fadeAnimation.length);
    return () => clearTimeout(timeout);
  }, []);

  return (
    <View style={styles.container}>
      {showExiting
        ? fadeAnimation.map((animation) => (
            <View
              style={[styles.box, styles.exitingBox]}
              key={animation.exitingName}>
              <Text style={styles.exitingText}>{animation.exitingName}</Text>
            </View>
          ))
        : fadeAnimation.map((animation, i) => (
            <Animated.View
              entering={animation.enteringAnimation.delay(DELAY * i)}
              exiting={animation.exitingAnimation.delay(500 * i)}
              key={animation.enteringName}
              style={[styles.box, styles.enteringBox]}>
              <Text style={styles.enteringText}>{animation.enteringName}</Text>
            </Animated.View>
          ))}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  box: {
    height: 50,
    width: 250,
    margin: 4,
    alignItems: 'center',
    justifyContent: 'center',
  },
  enteringBox: {
    backgroundColor: '#b58df1',
  },
  enteringText: {
    fontSize: 16,
    color: 'white',
  },
  exitingBox: {
    borderColor: '#b58df1',
    borderStyle: 'dashed',
    borderWidth: 1,
  },
  exitingText: {
    fontSize: 16,
    color: '#b58df1',
  },
});
```
</details>