React-native-vector-icons: Inline style and padding

[JonathanWi]

Hi again!

Just updated from 0.6, which broke a lot of what I previously did, which was basically this:

<Icon name="ios-chatbubble-outline" style={styles.icon} size={20} color="#999">
  <Text style={styles.iconText}>{this.state.numComments}</Text>
</Icon>

previously documented as the inline styling of elements, to this:

<Text style={styles.iconText}>
  <Icon name="ios-chatbubble-outline" style={styles.icon} size={20} color="#999" />
  {this.state.numComments}
</Text>

The issue is that previous padding and line height options - which worked really well on 0.6 - don't seem to work anymore.. How - in this new inline version - should I add padding between the text and icon? how to vertical align both of them?

Thanks & cheers!

[oblador]

From the release notes:

• The Icon component is now a pure Text composition, that means some more advanced styling use cases might break. Try wrapping the icon in a View to remedy this.
• lineHeight and height styles are no longer set by default which might cause alignment issues, set them explicitly instead if it breaks your design.
• setNativeProps is now applied directly to the icon itself.
• Nesting Text in an Icon no longer works, use Icon.Button instead or just inline the Icon in your Text.

In summary: try the new Icon.Button component!

[JonathanWi]

Haha will do right away!

can I override everything button-related? I just wish to display a list of icon with text side by side without them being clickable. Is that possible?

Thanks again for another great component, and such fast answers!

[oblador]

Ah, in that event just wrap it with a View and apply padding/margin there and then just flexDirection: 'row' everything.

[JonathanWi]

Ok, thanks!

I thinks we can close this now!

[oblador]

Cool, just reopen or ping me on reactiflux if you need more help.

[vspedr]

Hello, sorry for reopening this old issue but I was wondering if you could help me with something.

As JonathanWi described, I also need some text to be displayed beside an icon without them being clickable, i.e. not a button. You recommended using flexDirection: 'row' , but it won't work for me because I need to use 'flexDirection: 'column' for the text to wrap when it's too long. And in this case, I could not properly align the icon and text from their bottom, neither add some space in between them (see image).

Code for this component:

        <View style={styles.attachmentTitle}>
          {survey.name &&
            <Text style={{ backgroundColor: 'yellow' }}>
              <Icon name="poll" style={{ backgroundColor: 'red' }} size={20} />
              {survey.name}
            </Text>
          }
        </View>

...

  attachmentTitle: {
    marginTop: 20,
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center'
  },

Border, margin and padding options don't seem to work for this <Icon>. Am I missing something ou is there a quick workaround for this?

[baba43]

@vspedr have you ever resolved that issue?

[vspedr]

Sorry @baba43, we have actually redesigned that component so we no longer use inline icons... But you might want to try wrapping the icon in a View as @oblador mentioned so you can manipulate it's positioning with flex properties.