How to achieve Font Awesome stack icons feature in react native - reactjs

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

Answer 2

Output:
In this Example I stacked the FontAwesome Icon "square" and "home". To stack them, you need a parent view with position: 'relative'. Then you can apply position: 'absolute'and a zIndex to the icon which should be on top of the other one. Afterwards you can position the icon for example with the top/left style property.
Code:
<View style={{position: 'relative'}}>
<Icon name="square" size={24} color={"black"} />
<Icon
name="home"
size={24}
color={"white"}
style={{position: 'absolute', zIndex: 99, left: 0, top: 0}} />
</View>
Demo:
https://snack.expo.io/rkHnZJrrH

Answer 3

Was able to achieve like this with react native elements [ not sure if they use zIndex internally]
render() {
return (
<View style={styles.container}>
<View
style={{
position: 'relative',
height: 64,
width: 64,
justifyContent: 'center',
alignItems: 'center',
}}>
<Icon type="font-awesome" name="square" size={64} />
<Icon
type="font-awesome"
name="twitter"
color="white"
size={32}
containerStyle={{ position: 'absolute' }}
/>
</View>
</View>
);
}
And the container style would be
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
}
snack repo:
https://snack.expo.io/#roach_iam/vigorous-blueberries