React-native not rendering string

Question

So,I'm fetching html from my server and I render it with library:react-native-render-html

Some parts of the string are rendering fine but some of them are like this :

Here is the code:

 <Text style={styles.description}>
          {/* <Text>Testing...</Text> */}
          {currentPostDetails === null || currentPostDetails === undefined ? (
            'Loading...'
          ) : (
            <HTML
              html={currentPostDetails.text.replaceAll(
                'font-family:',
                '&quot;";',
              )}
            />
          )}
        </Text>

Any suggestions please?

it seems like a library issue. Did you. try creating an issue on this library's github page ? — Bora Sumer
– Bora Sumer, Commented Dec 16, 2020 at 17:12
@BoraSumer not yet,I'm not sure yet, maybe the problem is in me — user14587589
– user14587589, Commented Dec 17, 2020 at 5:50
@user14587589 i’ve just noticed that you’ve used the html prop instead of the source one which was listed on the docs. Any reason for this? — kenmistry
– kenmistry, Commented Dec 17, 2020 at 5:56
<HTML baseFontStyle={{fontFamily: 'normal'}} source={{ html: currentPostDetails.text.replaceAll( 'font-family:', '"";', ), }} /> — user14587589
– user14587589, Commented Dec 17, 2020 at 5:58

kenmistry · Accepted Answer · 2020-12-17 04:40:53Z

1

I believe the <Text> component you used to wrap the child components is at fault. <Text> works best when it is rendering plain text instead of complex component like <HTML>.

Try wrapping the child components with the <View> component instead, like this:

<View style={styles.description}>
  {/* <Text>Testing...</Text> */}
  {currentPostDetails === null || currentPostDetails === undefined ? (
    <Text>Loading...</Text>
  ) : (
    <HTML
      html={currentPostDetails.text.replaceAll(
        'font-family:',
        '&quot;";',
      )}
    />
  )}
</View>

answered Dec 17, 2020 at 4:40

kenmistry

2,1731 gold badge24 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React-native not rendering string

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related