how to add icon beside see more/less text

[iamhaaamed]

how can I add icon beside see more/less text?
I have used customTextComponent like this:

<ReadMore seeMoreStyle={styles.button} seeLessStyle={styles.button} numberOfLines={3} customTextComponent={props => ( <> <Text {...props} /> <MaterialCommunityIcon name="chevron-down" size={Spacing.large} color={Colors.blueViolet} /> </> )}> {userInfo.about_me} </ReadMore>

but it's not working properly:
https://i.imgur.com/CktRJtN.png
https://i.imgur.com/HFHGHrq.png

[fawaz-ahmed]

@iamhaamed To pass any custom text component, you pass like this
customTextComponent={Text}
It means it will use this component to display the underlying text.
Same component is then used to render the main text itself, see more text and see less text.

You can try this, though I haven't tested myself:

<ReadMore
  seeMoreStyle={styles.button}
  seeLessStyle={styles.button}
  numberOfLines={3}
  seeMoreText={(
    <>
      {'see more'}
      <MaterialCommunityIcon name="chevron-down" size={Spacing.large} color={Colors.blueViolet} />
    </>
  )}
  >
  {userInfo.about_me}
</ReadMore>

[iamhaaamed]

Thank you it is working now, but it seems we have alignment issue for See more because marginTop and paddingTop is not working properly:

<ReadMore seeMoreStyle={styles.button} seeLessStyle={styles.button} numberOfLines={3} seeMoreText={ <> <Text style={[styles.button]}>See more</Text> <View> <MaterialCommunityIcon style={{marginTop: Spacing.smallest}} name="chevron-down" size={Spacing.large} color={Colors.blueViolet} /> </View> </> } seeLessText={ <View style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center', }}> <Text style={styles.button}>See less</Text> <MaterialCommunityIcon name="chevron-down" size={Spacing.large} color={Colors.blueViolet} /> </View> }> {userInfo.about_me} </ReadMore>

https://imgur.com/XfXUJUf