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 it inside that but I couldn't make it work.

import IconFA from 'react-native-vector-icons/FontAwesome';

        <IconFA
         name="plus"
         size={moderateScale(30)}
         color="black"
         style={styles.thumbnail}
         />
        {/* <IconFA
        name="circle-thin"
        size={moderateScale(67)}
        color="white"
      /> */}

  thumbnail: {
    height: 68,
    width: 68,
    position: 'relative',
  },

Alternatively, I read about 'stacked' font awesome icons but couldn't understand how to use it in react native.

Reference: /

Snack Expo:

I want to make something like this:

I am also open to using a <Thumbnail> if I find a similar icon's link but I couldn't find any such free icon online.

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 it inside that but I couldn't make it work.

import IconFA from 'react-native-vector-icons/FontAwesome';

        <IconFA
         name="plus"
         size={moderateScale(30)}
         color="black"
         style={styles.thumbnail}
         />
        {/* <IconFA
        name="circle-thin"
        size={moderateScale(67)}
        color="white"
      /> */}

  thumbnail: {
    height: 68,
    width: 68,
    position: 'relative',
  },

Alternatively, I read about 'stacked' font awesome icons but couldn't understand how to use it in react native.

Reference: https://jsfiddle/1d7fvLy5/1/

Snack Expo:

https://snack.expo.io/9Ild0Q1zG

I want to make something like this:

I am also open to using a <Thumbnail> if I find a similar icon's link but I couldn't find any such free icon online.

• javascript
• css
• reactjs
• typescript
• react-native

• In your reference example the circle isn't actually an icon. It's a css border with a border-radius to make it circular. Does that distinction matter to you? – Linda Paiste Commented Oct 8, 2020 at 20:55
• to plete previous ment, try const styles = StyleSheet.create({ thumbnail: { height: 68, width: 68, position: 'relative', border: '1px solid', borderRadius:'50%', display:'inline-flex', justifyContent:'center', alignItems:'center' }, } for your styles. – G-Cyrillus Commented Oct 8, 2020 at 21:13
• @G-Cyrillus This doesn't work for react native since border isn't a style property in stylesheets. Also, inline-flex can't be used. But otherwise, yeah, I don't mind using plain css for this too. – user13101751 Commented Oct 9, 2020 at 8:41
• oups, i trusted : snack.expo.io/qz_1J!ZGR looked like working fine ;) – G-Cyrillus Commented Oct 9, 2020 at 8:46

3 Answers 3

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 ponents but I also made a ponent IconInCircle which bines the two.

const IconInCircle = ({ circleSize, borderWidth = 2, borderColor = 'black', ...props}) => (
  <CircleBorder
    size={circleSize}
    borderWidth={borderWidth}
    borderColor={borderColor}
  >
    <IconFA {...props} />
  </CircleBorder>
);

const CircleBorder = ({ size, borderWidth, borderColor, children }) => (
  <View
    style={{
      width: size,
      height: size,
      borderRadius: 0.5 * size,
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      borderColor,
      borderWidth,
    }}>
    {children}
  </View>
);

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

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:

      <IconInCircle
        name="plus"
        size={30}
        color="black"
        style={styles.thumbnail}
        borderWidth={1}
        circleSize={50}
      />

Expo Link

Try this, just adjust according to your needs, and also don't forget to support other browsers for flex.

const styles = StyleSheet.create({
  thumbnail: {
    height: 68,
    width: 68,
    position: 'relative',
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    border: '1px solid #333',
    borderRadius: '50%'
  },
});

import IconFA from 'react-native-vector-icons/FontAwesome';

<View style={{
  position:'relative',
  justifyContent:'center',
  alignItems:'center',
  width:40,
  height:40,
  backgroundColor:'black'
}}>
  <IconFA name='circle-thin' size={40} color='grey'/>
  <IconFA name='plus' size={20} color='white' style={{position: 'absolute', zIndex: 99}} />  
</View>

I am new to ReactNative, but above snippet should work in your case

Snack Expo