The width button adjusts to the length of the text inside, and I want it to smoothly resize when I change the test in it. It can be done easily using css, but when I switched to react native I had difficulties. How can I do this in react-native?
1 Answers
You can use LayoutAnimation to achieve such functionality https://reactnative.dev/docs/layoutanimation
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);
}
const App = () => {
const [expanded, setExpanded] = useState(false);
return (
<View style={style.container}>
<TouchableOpacity
style={{backgroundColor:'red',height:90,justifyContent:'center',alignItems:'center',borderRadius:7}}
onPress={() => {
LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
setExpanded(!expanded);
}}
>
<Text>Press me to {expanded ? "collapse" : "expand"}!</Text>
</TouchableOpacity>
</View>
);
};
const style = StyleSheet.create({
tile: {
backgroundColor: "lightgrey",
borderWidth: 0.5,
borderColor: "#d6d7da"
},
container: {
flex: 1,
justifyContent: "center",
alignItems: "center",
overflow: "hidden"
}
});
export default App;
Related