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 {