diff --git a/docs/layoutanimation.md b/docs/layoutanimation.md
index e55cddae38e..838735475cc 100644
--- a/docs/layoutanimation.md
+++ b/docs/layoutanimation.md
@@ -17,44 +17,56 @@ if (Platform.OS === 'android') {
}
```
-Example usage:
+## Example
-```jsx
-import React, {Component} from 'react';
-import {
- View,
- Text,
- TouchableOpacity,
- Platform,
- UIManager,
- LayoutAnimation,
-} from 'react-native';
+```SnackPlayer name=LayoutAnimation
+import React, { useState } from "react";
+import { LayoutAnimation, Platform, StyleSheet, Text, TouchableOpacity, UIManager, View } from "react-native";
if (
- Platform.OS === 'android' &&
+ Platform.OS === "android" &&
UIManager.setLayoutAnimationEnabledExperimental
) {
UIManager.setLayoutAnimationEnabledExperimental(true);
}
-class AnimatedCollapsible extends Component {
- state = {expanded: false};
- render() {
- return (
-
- {
- LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
- this.setState({expanded: !this.state.expanded});
- }}>
-
- Press me to {this.state.expanded ? 'collapse' : 'expand'}!
-
-
- {this.state.expanded && I disappear sometimes!}
-
- );
+const App = () => {
+ const [expanded, setExpanded] = useState(false);
+
+ return (
+
+ {
+ LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
+ setExpanded(!expanded);
+ }}
+ >
+ Press me to {expanded ? "collapse" : "expand"}!
+
+ {expanded && (
+
+ I disappear sometimes!
+
+ )}
+
+ );
+};
+
+const style = StyleSheet.create({
+ tile: {
+ background: "lightGrey",
+ borderWidth: 0.5,
+ borderColor: "#d6d7da"
+ },
+ container: {
+ flex: 1,
+ justifyContent: "center",
+ alignItems: "center",
+ overflow: "hidden"
}
-}
+});
+
+export default App;
+
```
---