Leo Nikkilä f6e2f13f4b Handle layout updates during LayoutAnimation animations on Android
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
2018-04-12 14:03:02 -07:00
2018-03-16 17:22:05 -07:00
2018-04-11 18:34:07 -07:00
2018-02-16 18:31:53 -08:00
2017-05-22 13:03:50 -07:00
2016-10-19 16:58:36 -07:00
2017-12-05 13:02:54 -08:00
2018-03-29 06:54:06 -07:00
2018-02-16 18:31:53 -08:00
2017-10-26 16:47:27 -07:00
2018-02-16 18:31:53 -08:00
2017-04-12 16:31:35 -07:00
2017-10-20 13:05:26 -07:00
2018-02-16 18:31:53 -08:00
2018-04-11 10:47:39 -07:00
2018-04-04 13:30:35 -07:00
2018-02-16 18:31:53 -08:00
2018-01-24 22:18:34 -08:00
2017-07-28 07:51:09 -07:00

React Native · Circle CI Status npm version PRs Welcome

Learn once, write anywhere: Build mobile apps with React.

  • Build native mobile apps using JavaScript and React: React Native lets you build mobile apps using only JavaScript. It uses the same design as React, letting you compose a rich mobile UI from declarative components.
  • A React Native app is a real mobile app: With React Native, you don't build a "mobile web app", an "HTML5 app", or a "hybrid app". You build a real mobile app that's indistinguishable from an app built using Objective-C, Java, or Swift. React Native uses the same fundamental UI building blocks as regular iOS and Android apps. You just put those building blocks together using JavaScript and React.
  • Don't waste time recompiling: React Native lets you build your app faster. Instead of recompiling, you can reload your app instantly. With hot reloading, you can even run new code while retaining your application state. Give it a try - it's a magical experience.
  • Use native code when you need to: React Native combines smoothly with components written in Objective-C, Java, or Swift. It's simple to drop down to native code if you need to optimize a few aspects of your application. It's also easy to build part of your app in React Native, and part of your app using native code directly - that's how the Facebook app works.

The focus of React Native is on developer efficiency across all the platforms you care about - learn once, write anywhere. Facebook uses React Native in multiple production apps and will continue investing in React Native.

See the official React Native website for an introduction to React Native.

Supported operating systems are >= Android 4.1 (API 16) and >= iOS 8.0.


Getting Started

Follow the Getting Started guide. The recommended way to install React Native depends on your project. Here you can find short guides for the most common scenarios:


Documentation

The websites documentation is divided into multiple sections.

Another great way to learn more about the components and APIs included with React Native is to read their source. Look under the Libraries/Components directory for components like ScrollView and TextInput, for example. The RNTester example is also here to demonstrate some of the ways to use these components. From the source you can get an accurate understanding of each components behavior and API.

The React Native documentation only discusses the components, APIs and topics specific to React Native (React on iOS and Android). For further documentation on the React API that is shared between React Native and React DOM, refer to the React documentation.


Upgrading

React Native is under active development. See the guide on upgrading React Native to keep your project up-to-date.


Contributing

Read below to learn how you can take part in improving React Native.

Code of Conduct

Facebook has adopted a Code of Conduct that we expect project participants to adhere to. Please read the full text so that you can understand what actions will and will not be tolerated.

Contributing Guide

Read our contributing guide to learn about our development process, how to propose bug fixes and improvements, and how to build and test your changes to React Native.

Beginner Friendly Bugs

We have a list of beginner friendly issues to help you get your feet wet in the React Native codebase and familiar with our contribution process. This is a great place to get started.


License

React Native is MIT licensed.

React Native documentation is Creative Commons licensed.


Description
A framework for building native apps with React.
http://facebook.github.io/react-native/
Readme BSD-3-Clause
Languages
JavaScript 47.5%
Java 26.5%
Objective-C 13.7%
C++ 7.2%
C 1.5%
Other 3.5%