Add support for delete animation in LayoutAnimation on iOS

Summary:This adds support for delete view animations in LayoutAnimation for iOS. It supports the same properties as the create animation (alpha, scale).

This allows making simple animations when removing a view which is normally hard to do in React since we need to not remove the view node immediately.

**Test plan**
Tested add/removing views in the UIExample explorer with and without setting a LayoutAnimation. Also tested that the completion callback still works properly. Tested that user interation during the animation is properly disabled.

![layout-anim2](https://cloud.githubusercontent.com/assets/2677334/14595471/86fb1654-050d-11e6-8b38-fe45cc2dcd71.gif)

I also plan to work on improving the doc for LayoutAnimation as well as making this PR for android too.
Closes https://github.com/facebook/react-native/pull/6779

Differential Revision: D3215525

Pulled By: sahrens

fb-gh-sync-id: 526120acd371c8d1af433e8f199cfed336183775
fbshipit-source-id: 526120acd371c8d1af433e8f199cfed336183775

Examples/UIExplorer/LayoutAnimationExample.js

@@ -0,0 +1,171 @@
+/**
+ * The examples provided by Facebook are for non-commercial testing and
+ * evaluation purposes only.
+ *
+ * Facebook reserves all rights not expressly granted.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+ * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
+ * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
+ * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ *
+ * @flow
+ */
+'use strict';
+
+const React = require('react');
+const ReactNative = require('react-native');
+const {
+  LayoutAnimation,
+  StyleSheet,
+  Text,
+  View,
+  TouchableOpacity,
+} = ReactNative;
+
+const AddRemoveExample = React.createClass({
+
+  getInitialState() {
+    return {
+      views: [],
+    };
+  },
+
+  componentWillUpdate() {
+    LayoutAnimation.easeInEaseOut();
+  },
+
+  _onPressAddView() {
+    this.setState((state) => ({views: [...state.views, {}]}));
+  },
+
+  _onPressRemoveView() {
+    this.setState((state) => ({views: state.views.slice(0, -1)}));
+  },
+
+  render() {
+    const views = this.state.views.map((view, i) =>
+      <View key={i} style={styles.view}>
+        <Text>{i}</Text>
+      </View>
+    );
+    return (
+      <View style={styles.container}>
+        <TouchableOpacity onPress={this._onPressAddView}>
+          <View style={styles.button}>
+            <Text>Add view</Text>
+          </View>
+        </TouchableOpacity>
+        <TouchableOpacity onPress={this._onPressRemoveView}>
+          <View style={styles.button}>
+            <Text>Remove view</Text>
+          </View>
+        </TouchableOpacity>
+        <View style={styles.viewContainer}>
+          {views}
+        </View>
+      </View>
+    );
+  },
+});
+
+const GreenSquare = () =>
+  <View style={styles.greenSquare}>
+    <Text>Green square</Text>
+  </View>;
+
+const BlueSquare = () =>
+  <View style={styles.blueSquare}>
+    <Text>Blue square</Text>
+  </View>;
+
+const CrossFadeExample = React.createClass({
+
+  getInitialState() {
+    return {
+      toggled: false,
+    };
+  },
+
+  _onPressToggle() {
+    LayoutAnimation.easeInEaseOut();
+    this.setState((state) => ({toggled: !state.toggled}));
+  },
+
+  render() {
+    return (
+      <View style={styles.container}>
+        <TouchableOpacity onPress={this._onPressToggle}>
+          <View style={styles.button}>
+            <Text>Toggle</Text>
+          </View>
+        </TouchableOpacity>
+        <View style={styles.viewContainer}>
+          {
+            this.state.toggled ?
+            <GreenSquare /> :
+            <BlueSquare />
+          }
+        </View>
+      </View>
+    );
+  },
+});
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  button: {
+    borderRadius: 5,
+    backgroundColor: '#eeeeee',
+    padding: 10,
+    marginBottom: 10,
+  },
+  buttonText: {
+    fontSize: 16,
+  },
+  viewContainer: {
+    flex: 1,
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  view: {
+    height: 54,
+    width: 54,
+    backgroundColor: 'red',
+    margin: 8,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  greenSquare: {
+    width: 150,
+    height: 150,
+    backgroundColor: 'green',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  blueSquare: {
+    width: 150,
+    height: 150,
+    backgroundColor: 'blue',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
+
+exports.title = 'Layout Animation';
+exports.description = 'Layout animation';
+exports.examples = [{
+  title: 'Add and remove views',
+  render(): ReactElement {
+    return <AddRemoveExample />;
+  },
+}, {
+  title: 'Cross fade views',
+  render(): ReactElement {
+    return <CrossFadeExample />;
+  },
+}];

Examples/UIExplorer/UIExplorerList.android.js

@@ -138,6 +138,10 @@ const APIExamples = [
     key: 'LinkingExample',
     module: require('./LinkingExample'),
   },
+  {
+    key: 'LayoutAnimationExample',
+    module: require('./LayoutAnimationExample'),
+  },
   {
     key: 'LayoutExample',
     module: require('./LayoutExample'),

Examples/UIExplorer/UIExplorerList.ios.js

@@ -192,6 +192,10 @@ var APIExamples: Array<UIExplorerExample> = [
     key: 'ImageEditingExample',
     module: require('./ImageEditingExample'),
   },
+  {
+    key: 'LayoutAnimationExample',
+    module: require('./LayoutAnimationExample'),
+  },
   {
     key: 'LayoutExample',
     module: require('./LayoutExample'),