added snackplayer/functional component with hooks LayoutAnimation

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 (
-      <View style={{overflow: 'hidden'}}>
-        <TouchableOpacity
-          onPress={() => {
-            LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
-            this.setState({expanded: !this.state.expanded});
-          }}>
-          <Text>
-            Press me to {this.state.expanded ? 'collapse' : 'expand'}!
-          </Text>
-        </TouchableOpacity>
-        {this.state.expanded && <Text>I disappear sometimes!</Text>}
-      </View>
-    );
+const App = () => {
+  const [expanded, setExpanded] = useState(false);
+
+  return (
+    <View style={style.container}>
+      <TouchableOpacity
+        onPress={() => {
+          LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
+          setExpanded(!expanded);
+        }}
+      >
+        <Text>Press me to {expanded ? "collapse" : "expand"}!</Text>
+      </TouchableOpacity>
+      {expanded && (
+        <View style={style.tile}>
+          <Text>I disappear sometimes!</Text>
+        </View>
+      )}
+    </View>
+  );
+};
+
+const style = StyleSheet.create({
+  tile: {
+    background: "lightGrey",
+    borderWidth: 0.5,
+    borderColor: "#d6d7da"
+  },
+  container: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    overflow: "hidden"
   }
-}
+});
+
+export default App;
+
 ```
 
 ---