aykutkardas/react-icomoon

Rendering issue within a <Text> wrapper

ericpolkadoc opened this issue · 2 comments

ericpolkadoc commented

Hi,

I have the following code:

 <Text>
    <Icon icon={IconFonts.SOMEICON} style={quote} size={10} marginLeft={10}/>
    <Text style={myStyle}>{someText}</Text>
    <Icon icon={IconFonts.ANOTHERICON} style={quote} size={10} marginRight={10}/>
</Text>

The icons are styled quotation marks, that are expected to be in the sentence, around the inner text.

However it doesn't render correctly. If I comment out the icons, the inner text shows. If I comment out the inner Text, the icons show.

If I comment out the outer wrapper Text, both the icons and text show, but they are inline, as views, and not inline as expected in a sentence.

It seems to me that somehow the Icons are not being treated as Text. Is there are way to make this work?

Thanks!

aykutkardas commented

Icons are not text. Maybe wrapping with 'View' can solve your problem.

<View>
    <Icon icon={IconFonts.SOMEICON} style={quote} size={10} marginLeft={10}/>
    <Text style={myStyle}>{someText}</Text>
    <Icon icon={IconFonts.ANOTHERICON} style={quote} size={10} marginRight={10}/>
</View>
ericpolkadoc commented

ok thanks, great to know. As I mentioned, if I wrap them in a View, they will align as views, inline. My goal was to used the icons as characters in a sentence.