Creating a special text component that starts as 2 lines and expands to full length when tapped, then collapses back on a second tap.
The return function code includes:
<TouchableWithoutFeedback
onPress={() => {
toggleExpansion();
}}
>
<Animated.View style={[{ height: animationHeight }]}>
<Text
style={styles.textStyle}
onLayout={event => setHeight(event.nativeEvent.layout.height)}
numberOfLines={numberOfLines}
>
{longText}
</Text>
</Animated.View>
</TouchableWithoutFeedback>
The state variables and toggleExpansion function are:
const [expanded, setExpanded] = useState(false);
const [height, setHeight] = useState(0);
const [numberOfLines, setNumberOfLines] = useState();
const toggleExpansion = () => {
setExpanded(!expanded);
if (expanded) {
setNumberOfLines(undefined);
} else {
setNumberOfLines(2);
}
};
Expanding and collapsing works, but struggling with Animated.timing for smooth transitions. Attempted code snippet:
const animationHeight = useRef(new Animated.Value(0)).current;
useEffect(() => {
Animated.timing(animationHeight, {
duration: 1000,
toValue: height,
easing: Easing.linear
}).start();
}, [height]);
Encountering issues where text doesn't display correctly and animations are not smooth. Seeking advice on improving the animated expansion and collapse functionality.