From b2ccfac62a5062d7d8bfa6eff94327ecfac2b237 Mon Sep 17 00:00:00 2001
From: Joshua Gross <joshuagross@fb.com>
Date: Thu, 16 Apr 2020 16:14:50 -0700
Subject: [PATCH] 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
---
 .../examples/Layout/LayoutAnimationExample.js | 60 +++++++++++++++++++
 1 file changed, 60 insertions(+)

diff --git a/RNTester/js/examples/Layout/LayoutAnimationExample.js b/RNTester/js/examples/Layout/LayoutAnimationExample.js
index 163a8b8c8e7..62c88324645 100644
--- a/RNTester/js/examples/Layout/LayoutAnimationExample.js
+++ b/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> {