circle outline for fontAwesome icons in react native

Question

I want to use the fontAwesome + icon such that it is in the middle of a circle. I want to use it as one icon item. I read that we can use it along with the circle icon and place

Answer 1

The JSFiddle example that you posted creates the circle using a CSS border with border-radius to make it circular. We can do pretty much the same thing in react-native, though borderRadius in react-native can only be a fixed number and not a percent (edit: this limitation is specific to typescript since the borderRadius property has type number. Percentage strings do work at runtime).

You can tweak this code however you want, but this will get the job done. You can use IconFA and CircleBorder as two separate nested components but I also made a component IconInCircle which combines the two.

const IconInCircle = ({ circleSize, borderWidth = 2, borderColor = 'black', ...props}) => (
  
    
  
);

const CircleBorder = ({ size, borderWidth, borderColor, children }) => (
  
    {children}
  
);

The IconInCircle component takes three props specific to the border: circleSize, borderWidth, and borderColor. All other props are passed through into the IconFA child component.

Basically what we are doing is placing the icon inside of a fixed-size View with a circular border and centered contents.

Now we can use it like so:

Expo Link