-
-
Notifications
You must be signed in to change notification settings - Fork 1.3k
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
Conversation
docs/src/components/InteractivePlayground/useClampPlayground/index.jsx
Outdated
Show resolved
Hide resolved
docs/src/components/InteractivePlayground/useClampPlayground/index.jsx
Outdated
Show resolved
Hide resolved
docs/src/components/InteractivePlayground/useClampPlayground/example.tsx
Outdated
Show resolved
Hide resolved
docs/src/components/InteractivePlayground/useClampPlayground/example.tsx
Outdated
Show resolved
Hide resolved
docs/src/components/InteractivePlayground/useClampPlayground/example.tsx
Outdated
Show resolved
Hide resolved
docs/src/components/InteractivePlayground/useClampPlayground/example.tsx
Outdated
Show resolved
Hide resolved
Co-authored-by: Kacper Kapuściak <39658211+kacperkapusciak@users.noreply.github.com>
Co-authored-by: Kacper Kapuściak <39658211+kacperkapusciak@users.noreply.github.com>
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 |
## 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 <!-- 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. -->
There was a problem hiding this 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
docs/src/components/InteractivePlayground/useClampPlayground/Example.tsx
Outdated
Show resolved
Hide resolved
docs/src/components/InteractivePlayground/useClampPlayground/Example.tsx
Outdated
Show resolved
Hide resolved
docs/src/components/InteractivePlayground/useClampPlayground/Example.tsx
Outdated
Show resolved
Hide resolved
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>
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🎉
Summary
Add documentation of withClamp animation modifier
Interactive playround
Test plan