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

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