Update wp-fork to version 2.2.4
#11
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
## Description This PR is a response for the problem with `useAnimatedReaction` hook. The problem is with using reference inside of that hook, because it persists the mapper's input values between rerenders. This may even work if we don't change the type of the input but the problem occurred when the input changed from `undefined` to `number`. Reproducing code is in the issue. Fixes software-mansion#1399
## Description This PR adds the first iteration of Reanimated 2 jest tests and improves plugin readability a bit. ## Changes - Added more jest tests for the plugin - Minor plugin readability improvements - Extracted adding `_closure` in the worklet body to function.
…nsion#1421) Co-authored-by: Krzysztof Piaskowy <[email protected]> ## Description Update of documentation. I added information about possible exceptions in measure() function. It is related with issue: software-mansion#1390 <!-- Description and motivation for this PR. Inlude Fixes #<number> if this is fixing some issue. Fixes # . --> ## Changes in file `docs/docs/api/nativeMethods/measure.md`
## Description Fixes: software-mansion#1394 Why there won't be any deadlocks anymore? Because we don't schedule anything in locked sections of the code. ## Changes Add Mutex to the `EventHandlerRegistry::isAnyHandlerWaitingForEvent` method as it can be called from different threads. Copy handlers registered for an event before processing and wrap only that part in the lock. ## Test code and steps to reproduce <details> <summary> Repro </summary> ```Js import Animated, { scrollTo, useAnimatedGestureHandler, useAnimatedScrollHandler, useAnimatedRef, } from 'react-native-reanimated'; import { View } from 'react-native'; import React from 'react'; import { PanGestureHandler } from 'react-native-gesture-handler'; export default function Repro() { const aref = useAnimatedRef(); const handler = useAnimatedGestureHandler({ onActive: (e, ctx) => { console.log('active', e.translationX, aref, aref()); scrollTo(aref, e.translationX * 2, 0, false); } }) const scrollHandler = useAnimatedScrollHandler( { onScroll: (e, ctx) => { if (!(ctx.ctr)) { ctx.ctr = 1; } else { ctx.ctr = ctx.ctr + 1; } console.log("onScroll", ctx.ctr); } } ); return ( <View> <PanGestureHandler onGestureEvent={handler}> <Animated.View style={{ width: 300, height: 100, backgroundColor: 'purple' }} /> </PanGestureHandler> <View style={{ width: 200, height: 200, backgroundColor: 'red' }}> < Animated.ScrollView ref = { aref } horizontal = { true } onScroll = { scrollHandler } scrollEventThrottle={16} > {Array(20) .fill(null) .map((item, i) => { return ( <View key={i} style={{ width: 30, height: 30, backgroundColor: 'black', margin: 10, }} /> ); })} </Animated.ScrollView> </View> </View> ); } ``` </details> ## Checklist - [x] Included code example that can be used to test this change - [x] Updated TS types - [x] Added TS types tests - [x] Added unit / integration tests - [x] Updated documentation - [x ] Ensured that CI passes
**To test:** ```sh npm pack --dry-run ``` **Diff:** | | package size | unpacked size | |---|---|---| |Before| 184.4 kB | 1.1 MB | |After| 175.4 kB | 1.1 MB | - [See package content on the web](https://unpkg.com/browse/react-native-reanimated/)
## Description Add run on js docs note
## Description fixes: software-mansion#1313 ## Changes - pause CADisplayLink instead of invalidating - call mappers after frame callbacks (call onFrame instantly if an animation has been started during onRender call) - provide a monotonous timer by injecting a new method `getTimestamp `. It's done by injecting _frameTimestamp for the duration of the frame and similarly, we inject _eventTimestamp. ## Test code and steps to reproduce https://github.com/terrysahaidak/react-native-gallery-toolkit/tree/tr-add-pager-example ## Checklist - [x] Included code example that can be used to test this change - [x] Updated TS types - [x] Added TS types tests - [x] Added unit / integration tests - [x] Updated documentation - [x] Ensured that CI passes
## Description The first goal of this PR was to fetch the name of the component for the prop updater what's needed on iOS. Until now we've provided `RCTView` for any component. Quoting the issue: > Where we always assume that we update props for RCTView component. Hence custom properties are added to some other view types, the props aren't properly applied and are filtered out The component's name is obtained in `createAnimatedComponent`, on the javascript side, from the mounted component's props. During creating animated component out of a regular one also UI props whitelist is being update dynamically(once for every unique component name detected). Thanks to this solution we are able to update props, specific for the certain components, on UI thread without hardcoding them. Solves software-mansion#1387 ## Reproducing The issue occurs when there are some custom animated components which props are being updated on UI thread. To reproduce you can use the following code: <details> <summary>code</summary> ``` import Animated, { useSharedValue, withTiming, useAnimatedStyle, useAnimatedProps, } from 'react-native-reanimated'; import { View, Button } from 'react-native'; import React from 'react'; import { Svg, Circle, Rect, Ellipse } from 'react-native-svg'; export default function AnimatedStyleUpdateExample() { const ACircle = Animated.createAnimatedComponent(Circle); const ARect = Animated.createAnimatedComponent(Rect); const AEllipse = Animated.createAnimatedComponent(Ellipse); const randomWidth = useSharedValue(10); const style = useAnimatedStyle(() => { return { width: withTiming(randomWidth.value), }; }); const circleProps = useAnimatedProps(() => { return { fill: 'red', cx: 50, cy: 50, r: withTiming(randomWidth.value / 2), }; }); const ellipseProps = useAnimatedProps(() => { return { cx: 200, cy: 200, rx: withTiming(randomWidth.value / 4), ry: 200, stroke: 'black', strokeWidth: 2, fill: 'purple', }; }); const rectProps = useAnimatedProps(() => { return { x: withTiming(randomWidth.value / 4), y: 50, width: 50, height: 50, stroke: 'orange', strokeWidth: 2, fill: 'green', }; }); return ( <View style={{ flex: 1, flexDirection: 'column', }}> <Animated.View style={[ { width: 100, height: 80, backgroundColor: 'black', margin: 30 }, style, ]} /> <Button title="toggle" onPress={() => { randomWidth.value = Math.random() * 350; }} /> <Svg> <ACircle animatedProps={circleProps} /> <ARect animatedProps={rectProps} /> <AEllipse animatedProps={ellipseProps} /> </Svg> </View> ); } ``` </details> Also you have to add updated props to `UI_THREAD_PROPS_WHITELIST` in `ConfigHelper.js`, like this: ``` let UI_THREAD_PROPS_WHITELIST = { // ... rx: true, r: true, } ``` If the view name in `NativeProxy.mm` is hardcoded to `RCTView` the props are not set but with proper view names they do work. ## Testing Some cases from svg library have been tested like rect, circle or ellipse as well as a regular `RCTView`. ## Changes Basically the main idea is placed in `createAnimatedComponent` where the view name is obtained(not directly but still) in `componentDidMount` so there's an access to a mounted component(and therefore to `viewConfig`). The code extending UI props list dynamically is placed in `CodeHelper.js`
…#1441) Co-authored-by: apswak <apswak>
…-mansion#1437) Co-authored-by: chj_damon <[email protected]>
## Description Update version to alpha 9 + some bug fixes
## Description Related to software-mansion#1253 Only allows style objects to be used, no more arrays, `false`, `undefined`, whatever ## Changes * Added type `AnimatedStyleProp` which is essentially a stripped-down version of react-native's `StyleProp` which also has animated properties inside. This new style prop disallows arrays (and `false, `undefined`, `null`) as return values for `useAnimatedStyle`
## Description Adds new github action which validates every issue when they are `labeled`/`unlabeled`/`edited`(no need to launch it when an issue is created since it's being triggered by `labeled` event anyway). For every specific label there are some sections required - `bug` label requires sections: - Description - Steps To Reproduce - Expected behavior - Actual behavior - Package versions - `Feature request` label requires sections: - Description - Motivation - `Question` label requires section: - Description A section is defined by any type of header(which is made using any number of `#` signs in the beginning of the line) When there are any requirements that aren't fulfilled, the bot adds a comment and it keeps updating it/adding new ones until they are. It adds a new comment if there are no comments or the last one isn't made by the bot. If the last comment is made by them, it updates it. If there were any errors in the past but the issue is correct now, it gives a proper message. The validator's code is available [here](https://github.com/karol-bisztyga/issue-validator)
## Description the name of issue validator action should be `Validate issues`, not `Check versions`
## Description
Workletize polyfills for spread operator. Blacklisting plugins which polyfill spread operator would be a perfect solution. Unfortunately, It's not possible with our current blacklisting solutions as the plugin is added by other plugins that we cannot blacklist. For instance Typescript plugin. We still want to provide the spread operator inside our worklets. In order to do this, I replace spread polyfills with workletized versions of them in `global.__reanimatedWorkletInit` method.
## Changes
core.js
## Test code and steps to reproduce
```Js
import React, { useState, useEffect } from 'react';
import { View, Button } from 'react-native';
import { withTiming, withRepeat, useSharedValue, useDerivedValue, runOnUI } from 'react-native-reanimated';
export default function Animation() {
runOnUI(worklet_worklet)();
return (
<View style={{padding: 30}}>
<Button title="change Message" onPress={() => {}}/>
</View>
);
}
const worklet_worklet = () => {
'worklet';
const tab = ['a', 'b'];
console.log("c", ...tab, "c");
const cc = {
pie: 'pie',
apple: 'apple',
}
console.log({...cc, bb:'bb'});
}
```
## Checklist
- [x] Included code example that can be used to test this change
- [x] Updated TS types
- [x] Added TS types tests
- [x] Added unit / integration tests
- [x] Updated documentation
- [ ] Ensured that CI passes
## Description Add icons for the issue labels' names for the issue validator.
## Description Bump version to alpha 9.1
## Description
We don't want to process events with the `NativeMap` field set to `null`. Even though we use the `Nullable` annotation it still causes crashes on Android in some cases.
### Reproducing code
<details>
<summary>Tested with the following code</summary>
```
import React from 'react';
import { SafeAreaView, View, Text, StatusBar, Modal } from 'react-native';
const App = () => {
return (
<>
<StatusBar barStyle="dark-content" />
<SafeAreaView>
<Modal animationType="slide" transparent={true} visible={true}>
<View style={{ flex: 1 }}>
<Text>Content modal</Text>
</View>
</Modal>
</SafeAreaView>
</>
);
};
export default App;
```
</details>
Fixes software-mansion#1444
Fixes software-mansion#1447
…ngs (software-mansion#1467) Co-authored-by: chj_damon <[email protected]>
…re-mansion#1378) ## Description 1. Fixes software-mansion#1377 issue: Can't resolve 'react-native/Libraries/Utilities/setAndForwardRef' Reanimated used `setAndForwardRef` of react-native internal function which is not on react-native-web. So that is completely wrong because react-native in a minor update can remove that. 2. Fixes software-mansion#1364 issue: 'TurboModuleRegistry' is not exported from 'react-native' react-native-web To take TurboModuleRegistry I used require into a condition which is not running on the web platform. ## Changes - Added `setAndForwardRef` method to the reanimated. Which is working on both web and native. Co-authored-by: Jakub Gonet <[email protected]>
## Description fix the problem with unknown reference to `_updatePropsJS`
## Description Currently, we use scheduler's instance variable `module` in order to recognize if scheduling still makes sense (). However, if the scheduler has been cleaned we are actually accessing the field of the freed object. In order to get rid of the problem, I've changed the code so we capture module variable instead of the pointer to scheduler instance. fixes: software-mansion#1459 ## Changes Capture a local copy of weak module ref. (REAIOSScheduler.mm) ## Test code and steps to reproduce Rapidly change sth in worklets. (hard to reproduce) ## Checklist - [x] Included code example that can be used to test this change - [x] Updated TS types - [x] Added TS types tests - [x] Added unit / integration tests - [x] Updated documentation - [x] Ensured that CI passes
## Description Improve error handling. By using a proper `module` we omit the crash which used to occur on error catching before - the module is caught by copy instead of by reference in lambda thus there are no crashes when the `module` is no longer accessible but is used in the inner scope.
# Conflicts: # android/build.gradle # package.json
The original configuration tries to fetch the RN version of the app and find a matching AAR. In our case, since we control the RN version, we can simplify the configuration by providing a single and specific RN version.
8 tasks
geriux
approved these changes
Feb 28, 2022
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR updates the
wp-forkbranch with upstream version2.2.4and applies the required changes to publish the Android library associated with the package.Since the PR contains a massive amount of changed files, in order to review this PR, it's better to compare the branch with the upstream repository and validate that we apply the same changes we have in
wp-fork:2.2.4version of upstream repositorywp-forkNOTE: Once this PR is ready, we should also merge #10 so the diff showed in
wp-forkdoesn't contain the2.2.4version changes.Changes
Update build configuration
Similarly, as we do in other forked repositories of dependencies, the Android build configuration, located in
android/build.gradle, has been updated to use the RN version we support in Gutenberg.Different publishing method
Unlike other dependencies, and introduced in Reanimated v2, the library now includes the AAR files (i.e. Android library binaries) along with the source code. The library has two different Android projects due to this structure:
android: This project is used only for building the library and producing the AAR files, it's not really used in the app.android-npm: This is the project that is imported within the app, basically, it loads the AAR that was previously generated.Additionally, for generating the NPM package, it uses the script
./createNPMPackage.sh, which generates AARs for different RN versions and engines (i.e.jscandhermes) (reference).In our case, since we control the RN version and use
hermes, I simplified the build configuration and the script for generating the NPM package.Generate custom AAR
As mentioned in the previous section, the AAR is included in the NPM package. For this reason, I generated one for the current Gutenberg specifications:
0.66.2hermesAAR location:
android-npm/react-native-reanimated-66-hermes.aarIf in the future, we need to change the RN version, we could do it just by updating the script
createNPMPackage.sh.Add Jitpack custom configuration
In order to publish the library, I created the file
jitpack.ymlto make Jitpack run the commandandroid/gradlew -p android-npm publishToMavenLocalwhich basically sets the AARandroid-npm/react-native-reanimated-66-hermes.aaras the artifact to be published.Update podspec
The podspec of this library tries to fetch the React Native version from the
node_modulesfolder, which produces an error upon installing the pods in the WordPress-iOS app. In this case, the library assumes that the iOS project where the library is added will have access to the npm packages, specifically toreact-native. However, this is not the case for the WordPress-iOS project, as we don't install npm dependencies as part of the build process. For this reason, the React Native version is manually set in the podspec to prevent this issue.