How to achieve Font Awesome stack icons feature in react native

Question

Achieving Stack/Overlap Icons using React native.

I am trying to achieve something like this in react native: https://fontawesome.com/how-to-use/on-the-web/styling/stacking-icons

how to achieve this?

Answer 1

You can achieve this by doing it like this. Using width and height helps you keep the view in place and aligning everything to the center so it looks nice like stacked icons.

<View style={{
        position:"relative",
        justifyContent:'center',
        alignItems:"center",
        width:40,
        height:40
      }}>
         <Icon name="circle" size={34} color={"black"} />
         <Icon name="flag" size={20} color={"white"} style={{position: 'absolute', zIndex: 99}} />  
      </View>

https://snack.expo.io/HkxWerHBr