Not working with Parsed Text

[fawaz-ahmed]

Referencing issue from https://github.com/fawaz-ahmed/react-native-read-more/issues/36#issuecomment-897476068

[fawaz-ahmed]

Sample code:

import React from 'react';
import {SafeAreaView, StyleSheet, View} from 'react-native';
import ReadMore from '@fawazahmed/react-native-read-more';
import ParsedText from 'react-native-parsed-text';

const App = () => {
  return (
    <SafeAreaView style={styles.safe}>
      <View style={styles.root}>
        <ReadMore numberOfLines={3}>
          <ParsedText
            parse={[
              {type: 'url', style: styles.url},
              {type: 'phone', style: styles.phone},
              {type: 'email', style: styles.email},
              {pattern: /Bob|David/, style: styles.name},
              {pattern: /42/, style: styles.magicNumber},
              {pattern: /#(\w+)/, style: styles.hashTag},
            ]}>
            Hello this is an example of the ParsedText, links like
            http://www.google.com or http://www.facebook.com are clickable and
            phone number 444-555-6666 can call too. But you can also do more
            with this package, for example Bob will change style and David too.
            foo@gmail.com And the magic number is 42! #react #react-native
          </ParsedText>
        </ReadMore>
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  safe: {
    flex: 1,
  },
  root: {
    flex: 1,
    padding: 16,
  },
  textStyle: {
    fontSize: 14,
  },
  url: {
    color: 'red',
    textDecorationLine: 'underline',
  },
  email: {
    textDecorationLine: 'underline',
  },
  phone: {
    color: 'blue',
    textDecorationLine: 'underline',
  },
  name: {
    color: 'red',
  },
  magicNumber: {
    fontSize: 42,
    color: 'pink',
  },
  hashTag: {
    fontStyle: 'italic',
  },
});

export default App;

[fawaz-ahmed]

However, formatting goes away while collapsed:

[Bayramito]

This issue still exists, in my case sometimes show “read more” button even the text is 1 word long

[fawaz-ahmed]

Hi @Bayramito. Yes, I can explain a bit. Incase you get a chance to fix. See this method getTextByChildren in file It re-constructs the paragraph in collapsed state. While doing so it clones the Text element and that's where it loses the component properties and becomes a regular text component. If the component can be cloned with it's original state somehow, this issue can be resolved.

[carl0shd]

This issue is persistent :(