}
}
-
Example usage:
-
import React, {Component} from 'react';
-import {
- View,
- Text,
- TouchableOpacity,
- Platform,
- UIManager,
- LayoutAnimation,
-} from 'react-native';
+Example
+import React, { useState } from "react";
+import { LayoutAnimation, Platform, StyleSheet, Text, TouchableOpacity, UIManager, View } from "react-native";
-if (
- 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>
- );
- }
-}
-
-
+
if (
+ Platform.OS ===
"android" &&
+ UIManager.setLayoutAnimationEnabledExperimental
+) {
+ UIManager.setLayoutAnimationEnabledExperimental(
true);
+}
+
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;
+
+
Reference
Methods
configureNext()
@@ -213,7 +239,7 @@
spring()
Calls configureNext() with Presets.spring.
-