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: