f6e2f13f4b
Summary: On Android, LayoutAnimation directly updates the layout since a generic scaling animation is more difficult to implement. This causes a problem if the layout is updated during an animation, as the previous layout is stored with the animation and is not updated. As a result the view gets the old layout instead once the animation completes. This commit fixes this issue by storing the layout handling animations while those animations are active, and updating the animations on the fly if one of the views receives a new layout. The resulting behaviour mirrors what iOS currently does. This bug has real world consequences, for example if a LayoutAnimation happens right after a VirtualizedList has mounted, it’s possible that some list rows are mounted while the animation is active, making the list content view bigger. If the content view is being animated, the new size will not take effect and it becomes impossible to scroll to the end of the list. I wrote a minimal test case to verify the bug, which I’ve also added to RNTester. You can find the standalone app here: <https://gist.github.com/lnikkila/18096c15b2fb99b232795ef59f8fb0cd> The app creates a 100x300 view that gets animated to 200x300 using LayoutAnimation. In the middle of that animation, the view’s dimensions are updated to 300x300. The expected result (which is currently exhibited by iOS) is that the view’s dimensions after the animation would be 300x300. On Android the view keeps the 200x300 dimensions since the animation overrides the layout update. The test app could probably be turned into an integration test by measuring the view through UIManager after the animation, however I don’t have time to do that right now... Here are some GIFs to compare, click to expand: <details> <summary><b>Current master (iOS vs Android)</b></summary> <p></p> <img src="https://user-images.githubusercontent.com/1291143/38191325-f1aeb3d4-3670-11e8-8aca-14e7b24e2946.gif" height="400" /><img src="https://user-images.githubusercontent.com/1291143/38191337-f643fd8c-3670-11e8-9aac-531a32cc0a67.gif" height="400" /> </details><p></p> <details> <summary><b>With this patch (iOS vs Android, fixed)</b></summary> <p></p> <img src="https://user-images.githubusercontent.com/1291143/38191325-f1aeb3d4-3670-11e8-8aca-14e7b24e2946.gif" height="400" /><img src="https://user-images.githubusercontent.com/1291143/38191355-07f6e972-3671-11e8-8ad2-130d06d0d64d.gif" height="400" /> </details><p></p> No documentation changes needed. [ANDROID] [BUGFIX] [LayoutAnimation] - View layout is updated correctly during an ongoing LayoutAnimation, mirroring iOS behaviour. Closes https://github.com/facebook/react-native/pull/18651 Differential Revision: D7604698 Pulled By: hramos fbshipit-source-id: 4d114682fd540419b7447e999910e05726f42b39 |
||
|---|---|---|
| .. | ||
| RNTester | ||
| RNTester-tvOS | ||
| RNTester.xcodeproj | ||
| RNTesterIntegrationTests | ||
| RNTesterUnitTests | ||
| android/app | ||
| js | ||
| README.md | ||
README.md
RNTester
The RNTester showcases React Native views and modules.
Running this app
Before running the app, make sure you ran:
git clone https://github.com/facebook/react-native.git
cd react-native
npm install
Running on iOS
Mac OS and Xcode are required.
- Open
RNTester/RNTester.xcodeprojin Xcode - Hit the Run button
See Running on device if you want to use a physical device.
Running on Android
You'll need to have all the prerequisites (SDK, NDK) for Building React Native installed.
Start an Android emulator (Genymotion is recommended).
cd react-native
./gradlew :RNTester:android:app:installDebug
./scripts/packager.sh
Note: Building for the first time can take a while.
Open the RNTester app in your emulator.
See Running on Device in case you want to use a physical device.
Running with Buck
Follow the same setup as running with gradle.
Install Buck from here.
Run the following commands from the react-native folder:
./gradlew :ReactAndroid:packageReactNdkLibsForBuck
buck fetch rntester
buck install -r rntester
./scripts/packager.sh
Note: The native libs are still built using gradle. Full build with buck is coming soon(tm).
Built from source
Building the app on both iOS and Android means building the React Native framework from source. This way you're running the latest native and JS code the way you see it in your clone of the github repo.
This is different from apps created using react-native init which have a dependency on a specific version of React Native JS and native code, declared in a package.json file (and build.gradle for Android apps).