CODEWITHSUNDEEP
react-nativetransform
TIMEX
TIMEX

Reputation: 271584

In React Native, how can I flip a View horizontally?

Suppose I have an icon like this:

<FontAwesome
    name={'column'}
    size={20}
    style={ /* mirror horizontally */ }
/>

How can I mirror this horizontally?

Upvotes: 13

Views: 18624

Answers (3)

Marvin
Marvin

Reputation: 754

2 way that you may use to flip or reverse the view of the component through style

fontAwesomeStyle: {
  transform: [
    {rotateX: '180deg'}, //horizontally
    {rotateY: '180deg'} //vertically
    {scaleX: -1} //horizontally
    {scaleY: -1} //vertically
  ]
}

but I prefer to use rotate it's because being convenient in terms of animating

Upvotes: 2

Drew Reese
Drew Reese

Reputation: 202575

React-native uses an array of transforms according to the docs, the scaleX prop has been deprecated. You can scale transform on the x-axis by the inverse:

style={{
  transform: [
    { scaleX: -1 }
  ]
}}

Upvotes: 49

Kishan Bharda
Kishan Bharda

Reputation: 5690

React Native transform accept array. So you have to pass value to transform as below : 

<FontAwesome
    name={'search'}
    size={20}
    style={{
        transform: [
            {scaleX: "-1"},
        ]
    }}
/>

Upvotes: 1

Related Questions