Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add withClamp documentation #5381

Merged
merged 76 commits into from
Dec 21, 2023
Merged

Add withClamp documentation #5381

merged 76 commits into from
Dec 21, 2023

Conversation

Latropos
Copy link
Contributor

@Latropos Latropos commented Nov 16, 2023

Summary

Add documentation of withClamp animation modifier

Interactive playround

☀️ 🌙
image image

Test plan

@Latropos Latropos closed this Nov 16, 2023
@Latropos Latropos reopened this Nov 21, 2023
@Latropos Latropos marked this pull request as ready for review November 21, 2023 16:26
docs/docs/animations/withClamp.mdx Show resolved Hide resolved
docs/docs/animations/withClamp.mdx Outdated Show resolved Hide resolved
docs/src/theme/DocSidebarItems/index.js Outdated Show resolved Hide resolved
docs/docs/animations/withClamp.mdx Show resolved Hide resolved
@kacperkapusciak kacperkapusciak changed the title With clamp documentation Add withClamp documentation Nov 23, 2023
Latropos and others added 6 commits November 27, 2023 15:00
Co-authored-by: Kacper Kapuściak <39658211+kacperkapusciak@users.noreply.github.com>
Co-authored-by: Kacper Kapuściak <39658211+kacperkapusciak@users.noreply.github.com>
docs/docs/animations/withClamp.mdx Outdated Show resolved Hide resolved
docs/docs/animations/withClamp.mdx Outdated Show resolved Hide resolved
docs/docs/animations/withClamp.mdx Show resolved Hide resolved
@piaskowyk
Copy link
Member

piaskowyk commented Dec 1, 2023

I think that this example is overcomplicated. Although I understand how clamp works, but when I look at this particular example, I feel confused. Is it possible to simplify it? Maybe we can use vertical lines as a clamp boundaries instead of rectangles, similar to the example with interpolation. cc @kacperkapusciak

tjzel and others added 7 commits December 12, 2023 14:27
## 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>
wodin and others added 11 commits December 12, 2023 14:27
<!-- 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. -->
Copy link
Member

@kacperkapusciak kacperkapusciak left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think after these changes the PR will be ready to merge

src/reanimated2/layoutReanimation/web/componentUtils.ts Outdated Show resolved Hide resolved
docs/docs/animations/withClamp.mdx Outdated Show resolved Hide resolved
docs/docs/animations/withClamp.mdx Outdated Show resolved Hide resolved
Aleksandra Cynk and others added 11 commits December 19, 2023 14:13
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
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>
Copy link
Member

@kacperkapusciak kacperkapusciak left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎉

@Latropos Latropos added this pull request to the merge queue Dec 21, 2023
Merged via the queue into main with commit ea5c667 Dec 21, 2023
7 checks passed
@Latropos Latropos deleted the acynk/clamp-hoa-docs branch December 21, 2023 11:52
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.