How to create an hexagon View in react native

Question

I want to use a hexagon shape as a component for background icons. I'm using copy/paste my codes from this url: https://codedaily.io/tutorials/22/The-Shapes-of-React-Native

my code:

Hexagon.js

return (
  <View style={styles.hexagon}>
    <View style={styles.hexagonInner} />
    <View style={styles.hexagonBefore} />
    <View style={styles.hexagonAfter} />
  </View>
);

const styles = StyleSheet.create({
  hexagon: {
    width: 100,
    height: 55
  },
  hexagonInner: {
    width: 100,
    height: 55,
    backgroundColor: 'red'
  },
  hexagonAfter: {
    position: 'absolute',
    bottom: -25,
    left: 0,
    width: 0,
    height: 0,
    borderStyle: 'solid',
    borderLeftWidth: 50,
    borderLeftColor: 'transparent',
    borderRightWidth: 50,
    borderRightColor: 'transparent',
    borderTopWidth: 25,
    borderTopColor: 'red'
  },
  hexagonBefore: {
    position: 'absolute',
    top: -25,
    left: 0,
    width: 0,
    height: 0,
    borderStyle: 'solid',
    borderLeftWidth: 50,
    borderLeftColor: 'transparent',
    borderRightWidth: 50,
    borderRightColor: 'transparent',
    borderBottomWidth: 25,
    borderBottomColor: 'red'

  }
});

then:

  <View style={{width:100,height:100}}>
    <Hexagon />
 </View>

but It returns a red rectangle.

Answer 1

Don't Make Other Component if you are facing the issue do it on same, this will return your desired hexagon!

Use Like this

            <View style={styles.hexagon}>
                <View style={styles.hexagonInner}>
                 <View style={styles.hexagonBefore}>
                 </View>
                </View>
                <View style={styles.hexagonAfter}></View>
              </View>