Icon Style Margin Not Working

[silver-surfer94]

Trying to set the 'margin' property on the Icon style does nothing. Text and Icon display inline, right next to one another.

<Text style={{ color: "#fff", fontWeight: "bold", fontSize: 14 }} > <Icon onPress={() => this._closeModal()} size={14} name="squared-cross" color="#fff" style={{ margin: 10 }} /> Bets </Text>

[ansonhoyt]

I was trying this too, but learned this is how RN <Text> works. It will work if you wrap the <Icon> in a <View> (which allows flexbox layout) instead of <Text>.

Everything inside <Text> uses text layout instead of flexbox layout. See the RN Text docs and https://github.com/facebook/react-native/issues/6728.

[xke]

This worked for me without needing to do <Text>:

      headerLeft: (
          <Icon style={{ marginLeft: 10 }} name="md-menu" size={30} />
      )

The "headerLeft" is one of the options in "react-navigation" (more info at https://reactnavigation.org/docs/en/header-buttons.html). Basically, I wanted to put a menu icon on the left of the header title.

[piatkiewicz]

View cause error if it's used for example in Snackbar (react-native-paper)

[john-harding]

The solution @ansonhoyt provided does not work if you need the icon and text inline with text coming before it, and if all of the text needs to wrap normally if text overflows.

To solve this I took a screenshot of the icon, put it into my assets folder, and used an Image instead. You can add any padding needed to the picture.

[christi10]

i used this format ( &nbsp ) to make a small margin on my View with Text. You can use it multiple times.

<View style={getCampaignsTextStyle()}> <EMAText style={styles.contentText}>{truncatedName}</EMAText> </View> &nbsp; <EMAText style={styles.content}> {transformedLabel.map((textItem, index) => ( <DynamicText key={index} item={textItem} /> ))} </EMAText>