adding a Read More button at the end of the 3rd line of a big text-CodePudding

working on a react-native app, I have a component that has text and at the end of the text you can click on read more, to go to another screen. Even if the text is not more than 3 lines I have to show read more at the end. This is what I have so far:

const ShowReadMore = () => {
  const SOME_LONG_TEXT_BLOCK =
    'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.';

  return (
    <View style={{flexDirection: 'row'}}>
      <Text numberOfLines={3} style={{flex: 1, alignItems: 'center'}}>
        {SOME_LONG_TEXT_BLOCK}
      </Text>
      <Text onPress={() => navigationRef.navigate('somepage')} style={{alignSelf: 'flex-end'}}>
        Read More
      </Text>
    </View>
  );
};

and it gives me this:

It's not exactly what I want, I want the text to be a of full length for the first 2 lines, and then on the 3rd line I want to see the 'read more' at the end of the sentences. If there is only 1 line of text it works good but more than 2 lines, I will always have for the first 2 lines some empty spaces on the right, how can I fill that with the text like:

CodePudding user response：

You can try to replace View to Text

return (
<Text style={{flexDirection: 'row'}}>
  <Text numberOfLines={3} style={{flex: 1, alignItems: 'center'}}>
    {SOME_LONG_TEXT_BLOCK}
  </Text>
  <Text onPress={() => navigationRef.navigate('somepage')} style={{alignSelf: 'flex-end'}}>
    Read More
  </Text>
</Text>

);

You might need View outside as a container

CodePudding user response：

Have you tried to put <Text> like this:

 <View style={{flexDirection: 'row'}}>
      <Text numberOfLines={3} style={{flex: 1, alignItems: 'center'}}>
        {SOME_LONG_TEXT_BLOCK}
        <Text onPress={() => navigationRef.navigate('somepage')} style {{alignSelf: 'flex-end'}}>
        Read More
        </Text>
      </Text>
    </View>

Then, modify your style to achieve want you want.