react-native: show more, expandable animation

import * as Animatable from 'react-native-animatable'; import React, {useState} from 'react'; import {Pressable, Text, TextStyle, View, ViewStyle} from 'react-native'; export const ShowMoreDemo = () => { return ( <View> <Text>Parent Content 1</Text> <ShowMore> <Text> Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam rem ducimus sit ipsa eligendi, beatae tempora ullam obcaecati at ab consectetur ea eveniet labore non quod fugiat itaque facilis fuga? </Text> </ShowMore> <Text>Parent Content 2</Text> </View> ); }; const ShowMore: React.FC = ({children}) => { // const minHeight = 300; const [isShowMore, setIsShowMore] = useState(false); const [measured, setMeasured] = useState(false); const [contentHeight, setContentHeight] = useState(0); const [contentStyle, setContentStyle] = useState<ViewStyle>({ opacity: 0, position: 'absolute', }); console.log('measured', measured, contentHeight); return ( <> <View style={contentStyle} onLayout={e => { if (!measured) { setContentHeight(e.nativeEvent.layout.height); setMeasured(true); } }}> {!measured ? ( children ) : ( <Animatable.View style={ { backgroundColor: 'red', height: isShowMore ? contentHeight : 0, opacity: isShowMore ? 1 : 0, } as ViewStyle } duration={300} transition={['height', 'opacity']}> {children} </Animatable.View> )} </View> <Pressable style={ { height: 48, justifyContent: 'center', alignItems: 'center', } as ViewStyle } onPress={() => { setIsShowMore(!isShowMore); setContentStyle({ opacity: 1, position: 'relative', }); }}> <Text style={ { color: '#000', fontSize: 12, fontWeight: 'bold', } as TextStyle }> {isShowMore ? 'Show Less' : 'Show More'} </Text> </Pressable> </> ); };