I am using View More Text from react-native-view-more-text and I would like everything beneath the text to be pushed down when View More Text is selected. Originally everything was positioned with 'absolute' so I thought changing that would push things down but the text still overlaps everything.

I have provided a snack example here that reproduces the exact issue I am having as well as provided the code below. The reason ViewMoreText has a height of 100 is so the hidden text shows below rather than moving than entire text block above. Removing the height will show you what I am referring to.

Thank you for any insight at all, I appreciate it more than you know!

export default function App() {
  return (
    <View style={styles.container}>
      
      <View style={{position: 'absolute', bottom: 510, height: 100}}>
        <ViewMoreText 
          numberOfLines={3}
          renderViewMore={this.renderViewMore}
          renderViewLess={this.renderViewLess}
        >
          <Text>
             Lorem ipsum dolor sit amet, in quo dolorum ponderum, nam veri molestie constituto eu. Eum enim tantas sadipscing ne, ut omnes malorum nostrum cum. Errem populo qui ne, ea ipsum antiopam definitionem eos.  Lorem ipsum dolor sit amet, in quo dolorum ponderum, nam veri molestie constituto eu. Eum enim tantas sadipscing ne, ut omnes malorum nostrum cum. Errem populo qui ne, ea ipsum antiopam definitionem eos.
          </Text>
        </ViewMoreText>
        </View>
      
      <View style={{position: 'absolute', bottom: 500}}>
        <Text>
          I want this to move down when I hit View More
        </Text>
      </View>


    </View>
  );
}

CodePudding user response：

you can use library callback function

• afterCollapse(func): Callback after collapsing

• afterExpand(func): Callback after expanding

const [isExtend,setIsExtend] = useState(false);
...
<ViewMoreText 
          ...
  afterExpand={() => {
    setIsExtend(true)
  }}
  afterCollapse={() => {
    setIsExtend(false)
  }} 
>
...

<View style={{position: 'absolute', bottom: isExtend ? 400 : 500}}>
      ....
</View>