Add a "reparenting" LayoutAnimation example that animates flattening/unflattening

Summary:
Simple test to see what it looks like when view flattening/unflattening is animated with LayoutAnimations.

Changelog: [Internal] adding another example to LayoutAnimations example

Reviewed By: mdvacca

Differential Revision: D21074805

fbshipit-source-id: 551ed740f0ab5c5adcb19f5c35e932b8983cd108

RNTester/js/examples/Layout/LayoutAnimationExample.js

@@ -143,6 +143,60 @@ class AddRemoveExample extends React.Component<{...}, AddRemoveExampleState> {
   }
 }
 
+type ReparentingExampleState = {|
+  hasBorder: boolean,
+|};
+
+class ReparentingExample extends React.Component<
+  {...},
+  ReparentingExampleState,
+> {
+  state = {
+    hasBorder: false,
+  };
+
+  _onPressToggleAnimated = () => {
+    LayoutAnimation.configureNext(
+      {
+        duration: 300,
+        create: {type: 'easeInEaseOut', property: 'opacity', duration: 1000},
+        update: {type: 'easeInEaseOut', property: 'opacity'},
+        delete: {type: 'easeInEaseOut', property: 'opacity', duration: 1000},
+      },
+      args => console.log('ReparentingExample completed', args),
+    );
+    this._onPressToggle();
+  };
+
+  _onPressToggle = () => {
+    this.setState(state => ({hasBorder: !state.hasBorder}));
+  };
+
+  render() {
+    const parentStyle = this.state.hasBorder
+      ? {borderWidth: 5, borderColor: 'red'}
+      : {};
+
+    return (
+      <View style={styles.container}>
+        <TouchableOpacity onPress={this._onPressToggleAnimated}>
+          <View style={styles.button}>
+            <Text>Toggle</Text>
+          </View>
+        </TouchableOpacity>
+        <TouchableOpacity onPress={this._onPressToggle}>
+          <View style={styles.button}>
+            <Text>Toggle (no animation)</Text>
+          </View>
+        </TouchableOpacity>
+        <View style={parentStyle}>
+          <GreenSquare />
+        </View>
+      </View>
+    );
+  }
+}
+
 const GreenSquare = () => (
   <View style={styles.greenSquare}>
     <Text>Green square</Text>
@@ -299,6 +353,12 @@ exports.examples = [
       return <AddRemoveExample />;
     },
   },
+  {
+    title: 'Animate Reparenting Update',
+    render(): React.Element<any> {
+      return <ReparentingExample />;
+    },
+  },
   {
     title: 'Cross fade views',
     render(): React.Element<any> {