React-native-vector-icons: Please add properties for rotating and flipping icons

[bparadie]

Font Awesome offers handy properties for rotating and flipping icons:

It would be great to be able to specify rotate and flip for Icon...

Rotate property example

var button = (
  <Icon name="facebook" style={styles.icon} rotate={90}>
    <Text style={styles.text}>Login with Facebook</Text>
  </Icon>
);

Flip property example

var button = (
  <Icon name="facebook" style={styles.icon} flip={'horizontal'}>
    <Text style={styles.text}>Login with Facebook</Text>
  </Icon>
);

Implementation

I think you can use transform for implementing rotate and flip.

[oblador]

Hi @bparadie,

Why not use the transform styling yourself, Icon takes a style property?

[bparadie]

@oblador: true, but with that argument you could also say: "Why not using Text instead of Icon?"

<Text style={textStyle}>{glyph}</Text>

I have to flip icons all the time. Take for example Material Design's label icon:

That icon always points to the right. If you want one pointing to the left you need to flip it.
This is one of the cases where if flipping were easy to implement Icon should supported it, because it's no work and it's a useful feature. If flipping were difficult to implement Icon should also supported it, because then it would save a lot of people time.

This was just a suggestion. Please feel free to close this issue.

[oblador]

This module provides more functionality than just a <Text /> wrapper :-)

I'll accept a PR with this functionality otherwise you'll have to wait a while, cause I'm slammed ATM.

[bparadie]

@oblador: I am pretty busy right now, too. But I appreciate your offer! I'll work on it once I find time. Thx.

[jeffreywescott]

This seems really silly to me ... it's SO easy with a transform:

rotate90: {
  transform: [{ rotate: '90deg' }]
}

[oblador]

@jeffreywescott I agree with you, however there's a usecase when you nest the component to create a button like: <Icon>Next</Icon. Then you only want the icon itself rotated/flipped not the text/whole button.

[oblador]

As of 0.8.0 there's no longer any use cases for this, just use transform styling as suggested.

[nickgrealy]

This seems really silly to me ... it's SO easy with a transform:

rotate90: {
  transform: [{ rotate: '90deg' }]
}

Thanks for the example on rotating @jeffreywescott, that does seem simple. Don't suppose you also have an example for flipping/mirroring the image? I haven't found anything.

[shanemacbride]

@nickgrealy,

I recently ran into this same issue. I managed to flip the image horizontally using transform: scaleX(-1); (relevant documentation) 👍

Using the syntax from the above snippet it would be:

flipX: {
  transform: [{ scaleX: '-1' }]
}

[mohantyabhijit]

Since scaleX needs a numeric value, using the below code accomplished a mirror image
mirror: {
transform: [{ scaleX: -1 }]
}

adding this as a class to different objects can help mirror them.