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 (
+
+
+
+ Toggle
+
+
+
+
+ Toggle (no animation)
+
+
+
+
+
+
+ );
+ }
+}
+
const GreenSquare = () => (
Green square
@@ -299,6 +353,12 @@ exports.examples = [
return ;
},
},
+ {
+ title: 'Animate Reparenting Update',
+ render(): React.Element {
+ return ;
+ },
+ },
{
title: 'Cross fade views',
render(): React.Element {