Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to rotate font awesome icon in react native?

In my react native application I have a font awesome icon. I want to rotate it. Help is needed.

import React from 'react'
import { View  } from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome5';

const InfoBox = () => {
    return (
          <View >
            <Icon name={'hand-holding-usd'} size={20}/>
          </View>

    )
}

export default InfoBox;
like image 784
MD. IBRAHIM KHALIL TANIM Avatar asked Nov 05 '19 06:11

MD. IBRAHIM KHALIL TANIM


People also ask

Can you rotate a font awesome icon?

To arbitrarily rotate and flip icons, use the fa-rotate-* and fa-flip-* classes when you reference an icon.

How do I rotate an icon in react?

You can rotate icon by 90, 180 and 270 degrees. To do that, add rotate attribute. Possible values: "90deg", "1": rotate by 90 degrees.


Video Answer


1 Answers

You can use the style prop to rotate the icon. Change the degree/direction of rotation as required

<Icon name={'hand-holding-usd'}
      size={20}
      style={{transform: [{rotateY: '180deg'}]}}/>
like image 81
Nishant Nair Avatar answered Oct 12 '22 05:10

Nishant Nair