5

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?

Naidu A
  • 74
  • 1
  • 6
  • Do you want to use custom icons in your project? As describe in https://github.com/oblador/react-native-vector-icons#custom-fonts ? – Eduardo Ramos Aug 29 '19 at 00:38
  • Yes. I am currently using vector icons in my project. Rather using custom fonts, i am trying to find if i can stack multiple icons to create another icon like the link i mentioned above. – Naidu A Aug 29 '19 at 02:17

3 Answers3

5

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.enter image description here

<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

Ammar Ahmed
  • 286
  • 1
  • 7
4

Output:

enter image description here

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

Tim
  • 10,459
  • 4
  • 36
  • 47
-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

Naidu A
  • 74
  • 1
  • 6