TutorialsCourses

The Shapes of React Native

AuthorJason Brown

Introduction

After drawing a bit of inspiration from The Shapes of CSS I decided to see if I could remake some of these shapes with a subset of css. If you haven't been on css-tricks check them out, Chris Coyier is fantastic!

Of course we have access to react-art here so drawing shapes is pretty simple but my goal is to see if I can just use normal Views and all of the styles I have at my exposure to make as many shapes as I can off of the Shapes of CSS list.

Some of these are obvious and some of them get a little crazy but most of them are all hacks in the first place!

I'm going on vacation for a month. So this shall be dubbed "One of the more pointless blog posts on my blog written out of sheer tiredness".

Key Takeaways

  • I wish border-radius worked a little more like the web
  • Box Shadow would be nice to have as well.
  • Skew transform would be a nice to have.
  • Just use SVGs...

Shapes

Square

Pretty simple...

const Square = () => {
  return <View style={styles.square} />;
};

StyleSheet.create({
  square: {
    width: 100,
    height: 100,
    backgroundColor: "red",
  },
});

Rectangle

Nothing too crazy here either

const Rectangle = () => {
  return <View style={styles.rectangle} />;
};

StyleSheet.create({
  rectangle: {
    width: 100 * 2,
    height: 100,
    backgroundColor: "red",
  },
});

Circle

One note to mention about border radius is that it doesn't work like the web. So if you go more than 50% you'll start forming a weird diamondy shape.

const Circle = () => {
  return <View style={styles.circle} />;
};

StyleSheet.create({
  circle: {
    width: 100,
    height: 100,
    borderRadius: 100 / 2,
    backgroundColor: "red",
  },
});

Oval

Border radius wasn't working, lets just do a circle and scale it...

const Oval = () => {
  return <View style={styles.oval} />;
};

StyleSheet.create({
  oval: {
    width: 100,
    height: 100,
    borderRadius: 50,
    backgroundColor: "red",
    transform: [{ scaleX: 2 }],
  },
});

Triangle Up

CSS border triangles still work in React Native.

const Triangle = () => {
  return <View style={[styles.triangle, this.props.style]} />;
};

StyleSheet.create({
  triangle: {
    width: 0,
    height: 0,
    backgroundColor: "transparent",
    borderStyle: "solid",
    borderLeftWidth: 50,
    borderRightWidth: 50,
    borderBottomWidth: 100,
    borderLeftColor: "transparent",
    borderRightColor: "transparent",
    borderBottomColor: "red",
  },
});

Here we get to cheat a bit. You could do this on the web too, but rather than adjust the borders we'll just rotate it.

Triangle Down

const TriangleDown = () => {
  return <Triangle style={styles.triangleDown} />;
};

StyleSheet.create({
  triangleDown: {
    transform: [{ rotate: "180deg" }],
  },
});

Triangle Left

const TriangleLeft = () => {
  return <Triangle style={styles.triangleLeft} />;
};

StyleSheet.create({
  triangleLeft: {
    transform: [{ rotate: "-90deg" }],
  },
});

Triangle Right

const TriangleRight = () => {
  return <Triangle style={styles.triangleRight} />;
};

StyleSheet.create({
  triangleRight: {
    transform: [{ rotate: "90deg" }],
  },
});

Again we'll cheat here and go for the rotation!

Triangle Top Left

const TriangleCorner = () => {
  return <View style={[styles.triangleCorner, this.props.style]} />;
};

StyleSheet.create({
  triangleCorner: {
    width: 0,
    height: 0,
    backgroundColor: "transparent",
    borderStyle: "solid",
    borderRightWidth: 100,
    borderTopWidth: 100,
    borderRightColor: "transparent",
    borderTopColor: "red",
  },
});

Triangle Top Right

const TriangleCornerTopRight = () => {
  return <TriangleCorner style={styles.triangleCornerTopRight} />;
};

StyleSheet.create({
  triangleCornerTopRight: {
    transform: [{ rotate: "90deg" }],
  },
});

Triangle Bottom Left

const TriangleCornerBottomLeft = () => {
  return <TriangleCorner style={styles.triangleCornerBottomLeft} />;
};

StyleSheet.create({
  triangleCornerBottomLeft: {
    transform: [{ rotate: "270deg" }],
  },
});

Triangle Bottom Right

const TriangleCornerBottomRight = () => {
  return <TriangleCorner style={styles.triangleCornerBottomRight} />;
};

StyleSheet.create({
  triangleCornerBottomRight: {
    transform: [{ rotate: "180deg" }],
  },
});

Curved Tail Arrow

Well we don't have the ability to do pseudo elements but they were just hacks anyway so we'll just create a wrapping View with 2 elements and style them. Now this is not exactly the same, and it's partially due to the way border-radius are managed in react-native vs the web but it's closeish.

const CurvedTailArrow = () => {
  return (
    <View style={styles.curvedTailArrow}>
      <View style={styles.curvedTailArrowTail} />
      <View style={styles.curvedTailArrowTriangle} />
    </View>
  );
};

StyleSheet.create({
  curvedTailArrow: {
    backgroundColor: "transparent",
    overflow: "visible",
    width: 30,
    height: 25,
  },
  curvedTailArrowTriangle: {
    backgroundColor: "transparent",
    width: 0,
    height: 0,
    borderTopWidth: 9,
    borderTopColor: "transparent",
    borderRightWidth: 9,
    borderRightColor: "red",
    borderStyle: "solid",
    transform: [{ rotate: "10deg" }],
    position: "absolute",
    bottom: 9,
    right: 3,
    overflow: "visible",
  },
  curvedTailArrowTail: {
    backgroundColor: "transparent",
    position: "absolute",
    borderBottomColor: "transparent",
    borderLeftColor: "transparent",
    borderRightColor: "transparent",
    borderBottomWidth: 0,
    borderLeftWidth: 0,
    borderRightWidth: 0,
    borderTopWidth: 3,
    borderTopColor: "red",
    borderStyle: "solid",
    borderTopLeftRadius: 12,
    top: 1,
    left: 0,
    width: 20,
    height: 20,
    transform: [{ rotate: "45deg" }],
  },
});

Trapezoid

The difference with this one is we had to double our width. Why? I don't know.

const Trapezoid = () => {
  return <View style={styles.trapezoid} />;
};

StyleSheet.create({
  trapezoid: {
    width: 200,
    height: 0,
    borderBottomWidth: 100,
    borderBottomColor: "red",
    borderLeftWidth: 50,
    borderLeftColor: "transparent",
    borderRightWidth: 50,
    borderRightColor: "transparent",
    borderStyle: "solid",
  },
});

Parallelogram

If only we had skew. :( Luckily we have the triangles we created earlier.

const Parallelogram = () => {
  return (
    <View style={styles.parallelogram}>
      <TriangleUp style={styles.parallelogramRight} />
      <View style={styles.parallelogramInner} />
      <TriangleDown style={styles.parallelogramLeft} />
    </View>
  );
};

StyleSheet.create({
  parallelogram: {
    width: 150,
    height: 100,
  },
  parallelogramInner: {
    position: "absolute",
    left: 0,
    top: 0,
    backgroundColor: "red",
    width: 150,
    height: 100,
  },
  parallelogramRight: {
    top: 0,
    right: -50,
    position: "absolute",
  },
  parallelogramLeft: {
    top: 0,
    left: -50,
    position: "absolute",
  },
});

Star (6-points)

These Triangles sure are coming in handy.

const StarSix = () => {
  return (
    <View style={styles.starsix}>
      <TriangleUp style={styles.starSixUp} />
      <TriangleDown style={styles.starSixDown} />
    </View>
  );
};

StyleSheet.create({
  starsix: {
    width: 100,
    height: 100,
  },
  starSixUp: {
    position: "absolute",
    top: 0,
    left: 0,
  },
  starSixDown: {
    position: "absolute",
    top: 25,
    left: 0,
  },
});

Star (5-points)

Yaye TriangleUp is killing it. This one is REALLY hacky with the placement, could use some fine tuning.

const StarFive = () => {
  return (
    <View style={styles.starfive}>
      <TriangleUp style={styles.starfiveTop} />
      <View style={styles.starfiveBefore} />
      <View style={styles.starfiveAfter} />
    </View>
  );
};

StyleSheet.create({
  starfive: {
    width: 150,
    height: 150,
  },
  starfiveTop: {
    position: "absolute",
    top: -45,
    left: 37,
  },
  starfiveBefore: {
    backgroundColor: "transparent",
    position: "absolute",
    left: 0,
    top: 0,
    borderStyle: "solid",
    borderRightWidth: 100,
    borderRightColor: "transparent",
    borderBottomWidth: 70,
    borderBottomColor: "red",
    borderLeftWidth: 100,
    borderLeftColor: "transparent",
    transform: [{ rotate: "35deg" }],
  },
  starfiveAfter: {
    backgroundColor: "transparent",
    position: "absolute",
    top: 0,
    left: -25,
    width: 0,
    height: 0,
    borderStyle: "solid",
    borderRightWidth: 100,
    borderRightColor: "transparent",
    borderBottomWidth: 70,
    borderBottomColor: "red",
    borderLeftWidth: 100,
    borderLeftColor: "transparent",
    transform: [{ rotate: "-35deg" }],
  },
});

Pentagon

No TriangleUp here but we could have used a Corner Triangle with rotate.

const Pentagon = () => {
  return (
    <View style={styles.pentagon}>
      <View style={styles.pentagonInner} />
      <View style={styles.pentagonBefore} />
    </View>
  );
};

StyleSheet.create({
  pentagon: {
    backgroundColor: "transparent",
  },
  pentagonInner: {
    width: 90,
    borderBottomColor: "red",
    borderBottomWidth: 0,
    borderLeftColor: "transparent",
    borderLeftWidth: 18,
    borderRightColor: "transparent",
    borderRightWidth: 18,
    borderTopColor: "red",
    borderTopWidth: 50,
  },
  pentagonBefore: {
    position: "absolute",
    height: 0,
    width: 0,
    top: -35,
    left: 0,
    borderStyle: "solid",
    borderBottomColor: "red",
    borderBottomWidth: 35,
    borderLeftColor: "transparent",
    borderLeftWidth: 45,
    borderRightColor: "transparent",
    borderRightWidth: 45,
    borderTopWidth: 0,
    borderTopColor: "transparent",
  },
});

Hexagon

2 Triangles and a square. Everything is just shapes.

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

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",
  },
});

Octagon

I attempted copied the css on this one but it required setting a background color, so I did 4 bars and just rotated them. Slightly more markup but this is just for fun.

const Octagon = () => {
  return (
    <View style={styles.octagon}>
      <View style={[styles.octagonUp, styles.octagonBar]} />
      <View style={[styles.octagonFlat, styles.octagonBar]} />
      <View style={[styles.octagonLeft, styles.octagonBar]} />
      <View style={[styles.octagonRight, styles.octagonBar]} />
    </View>
  );
};

StyleSheet.create({
  octagon: {},
  octagonBar: {
    width: 42,
    height: 100,
    backgroundColor: "red",
  },
  octagonUp: {},
  octagonFlat: {
    position: "absolute",
    top: 0,
    left: 0,
    transform: [{ rotate: "90deg" }],
  },
  octagonLeft: {
    position: "absolute",
    top: 0,
    left: 0,
    transform: [{ rotate: "-45deg" }],
  },
  octagonRight: {
    position: "absolute",
    top: 0,
    left: 0,
    transform: [{ rotate: "45deg" }],
  },
});

Heart

This one is easy since well I already had it done for my previous tutorial.

const Heart = () => {
  return (
    <View {...this.props} style={[styles.heart, this.props.style]}>
      <View style={styles.leftHeart} />
      <View style={styles.rightHeart} />
    </View>
  );
};

StyleSheet.create({
  heart: {
    width: 50,
    height: 50,
  },
  heartShape: {
    width: 30,
    height: 45,
    position: "absolute",
    top: 0,
    borderTopLeftRadius: 15,
    borderTopRightRadius: 15,
    backgroundColor: "#6427d1",
  },
  leftHeart: {
    transform: [{ rotate: "-45deg" }],
    left: 5,
  },
  rightHeart: {
    transform: [{ rotate: "45deg" }],
    right: 5,
  },
});

Infinity

Width and border radius all work oddly together. So baby infinity? Scale it up if you want it bigger.

const Infinity = () => {
  return (
    <View style={styles.infinity}>
      <View style={styles.infinityBefore} />
      <View style={styles.infinityAfter} />
    </View>
  );
};

StyleSheet.create({
  infinity: {
    width: 80,
    height: 100,
  },
  infinityBefore: {
    position: "absolute",
    top: 0,
    left: 0,
    width: 0,
    height: 0,
    borderWidth: 20,
    borderColor: "red",
    borderStyle: "solid",
    borderTopLeftRadius: 50,
    borderTopRightRadius: 50,
    borderBottomRightRadius: 50,
    borderBottomLeftRadius: 0,
    transform: [{ rotate: "-135deg" }],
  },
  infinityAfter: {
    position: "absolute",
    top: 0,
    right: 0,
    width: 0,
    height: 0,
    borderWidth: 20,
    borderColor: "red",
    borderStyle: "solid",
    borderTopLeftRadius: 50,
    borderTopRightRadius: 0,
    borderBottomRightRadius: 50,
    borderBottomLeftRadius: 50,
    transform: [{ rotate: "-135deg" }],
  },
});

Diamond Square

This was more than just a rotated square. Am I missing something?

const Diamond = () => {
  return <View style={styles.diamond} />;
};

StyleSheet.create({
  diamond: {
    width: 50,
    height: 50,
    backgroundColor: "red",
    transform: [{ rotate: "45deg" }],
  },
});

Diamond Shield

Just 2 triangles, thought this one was going to be harder.

const DiamondShield = () => {
  return (
    <View style={styles.diamondShield}>
      <View style={styles.diamondShieldTop} />
      <View style={styles.diamondShieldBottom} />
    </View>
  );
};

StyleSheet.create({
  diamondShield: {
    width: 100,
    height: 100,
  },
  diamondShieldTop: {
    width: 0,
    height: 0,
    borderTopWidth: 50,
    borderTopColor: "transparent",
    borderLeftColor: "transparent",
    borderLeftWidth: 50,
    borderRightColor: "transparent",
    borderRightWidth: 50,
    borderBottomColor: "red",
    borderBottomWidth: 20,
  },
  diamondShieldBottom: {
    width: 0,
    height: 0,
    borderTopWidth: 70,
    borderTopColor: "red",
    borderLeftColor: "transparent",
    borderLeftWidth: 50,
    borderRightColor: "transparent",
    borderRightWidth: 50,
    borderBottomColor: "transparent",
    borderBottomWidth: 50,
  },
});

Diamond Narrow

Another 2 triangles that could have been the same and rotated. This way works too.

const DiamondNarrow = () => {
  return (
    <View style={styles.diamondNarrow}>
      <View style={styles.diamondNarrowTop} />
      <View style={styles.diamondNarrowBottom} />
    </View>
  );
};

StyleSheet.create({
  diamondNarrow: {
    width: 100,
    height: 100,
  },
  diamondNarrowTop: {
    width: 0,
    height: 0,
    borderTopWidth: 50,
    borderTopColor: "transparent",
    borderLeftColor: "transparent",
    borderLeftWidth: 50,
    borderRightColor: "transparent",
    borderRightWidth: 50,
    borderBottomColor: "red",
    borderBottomWidth: 70,
  },
  diamondNarrowBottom: {
    width: 0,
    height: 0,
    borderTopWidth: 70,
    borderTopColor: "red",
    borderLeftColor: "transparent",
    borderLeftWidth: 50,
    borderRightColor: "transparent",
    borderRightWidth: 50,
    borderBottomColor: "transparent",
    borderBottomWidth: 50,
  },
});

Cut Diamond

The top could have been used for the octagon, I chose a different way though.

const CutDiamond = () => {
  return (
    <View style={styles.cutDiamond}>
      <View style={styles.cutDiamondTop} />
      <View style={styles.cutDiamondBottom} />
    </View>
  );
};

StyleSheet.create({
  cutDiamond: {
    width: 100,
    height: 100,
  },
  cutDiamondTop: {
    width: 100,
    height: 0,
    borderTopWidth: 0,
    borderTopColor: "transparent",
    borderLeftColor: "transparent",
    borderLeftWidth: 25,
    borderRightColor: "transparent",
    borderRightWidth: 25,
    borderBottomColor: "red",
    borderBottomWidth: 25,
  },
  cutDiamondBottom: {
    width: 0,
    height: 0,
    borderTopWidth: 70,
    borderTopColor: "red",
    borderLeftColor: "transparent",
    borderLeftWidth: 50,
    borderRightColor: "transparent",
    borderRightWidth: 50,
    borderBottomColor: "transparent",
    borderBottomWidth: 0,
  },
});

Egg

Circular things are hard to do in RN. This is eggish.

const Egg = () => {
  return <View style={styles.egg} />;
};

StyleSheet.create({
  egg: {
    width: 126,
    height: 180,
    backgroundColor: "red",
    borderTopLeftRadius: 108,
    borderTopRightRadius: 108,
    borderBottomLeftRadius: 95,
    borderBottomRightRadius: 95,
  },
});

Pac-Man

This one is so simple but always so fun.

const PacMan = () => {
  return <View style={styles.pacman} />;
};

StyleSheet.create({
  pacman: {
    width: 0,
    height: 0,
    borderTopWidth: 60,
    borderTopColor: "red",
    borderLeftColor: "red",
    borderLeftWidth: 60,
    borderRightColor: "transparent",
    borderRightWidth: 60,
    borderBottomColor: "red",
    borderBottomWidth: 60,
    borderTopLeftRadius: 60,
    borderTopRightRadius: 60,
    borderBottomRightRadius: 60,
    borderBottomLeftRadius: 60,
  },
});

Talk Bubble

This one is also simple, triangle and a rounded square.

const TalkBubble = () => {
  return (
    <View style={styles.talkBubble}>
      <View style={styles.talkBubbleSquare} />
      <View style={styles.talkBubbleTriangle} />
    </View>
  );
};

StyleSheet.create({
  talkBubble: {
    backgroundColor: "transparent",
  },
  talkBubbleSquare: {
    width: 120,
    height: 80,
    backgroundColor: "red",
    borderRadius: 10,
  },
  talkBubbleTriangle: {
    position: "absolute",
    left: -26,
    top: 26,
    width: 0,
    height: 0,
    borderTopColor: "transparent",
    borderTopWidth: 13,
    borderRightWidth: 26,
    borderRightColor: "red",
    borderBottomWidth: 13,
    borderBottomColor: "transparent",
  },
});

12 Point Burst

I will admit this one confused be a little bit, then I realized it's just a couple of rotated squares.

const TwelvePointBurst = () => {
  return (
    <View style={styles.twelvePointBurst}>
      <View style={styles.twelvePointBurstMain} />
      <View style={styles.twelvePointBurst30} />
      <View style={styles.twelvePointBurst60} />
    </View>
  );
};

StyleSheet.create({
  twelvePointBurst: {},
  twelvePointBurstMain: {
    width: 80,
    height: 80,
    backgroundColor: "red",
  },
  twelvePointBurst30: {
    width: 80,
    height: 80,
    position: "absolute",
    backgroundColor: "red",
    top: 0,
    right: 0,
    transform: [{ rotate: "30deg" }],
  },
  twelvePointBurst60: {
    width: 80,
    height: 80,
    position: "absolute",
    backgroundColor: "red",
    top: 0,
    right: 0,
    transform: [{ rotate: "60deg" }],
  },
});

8 Point Burst

Just like the 12, but one less square and different rotations. Only thing here is because the pseudo element was positionined relative to the first 20 degree rotation and ours isn't we'll just bump it up to 155.

const EightPointBurst = () => {
  return (
    <View style={styles.eightPointBurst}>
      <View style={styles.eightPointBurst20} />
      <View style={styles.eightPointBurst155} />
    </View>
  );
};

StyleSheet.create({
  eightPointBurst: {},
  eightPointBurst20: {
    width: 80,
    height: 80,
    backgroundColor: "red",
    transform: [{ rotate: "20deg" }],
  },
  eightPointBurst155: {
    width: 80,
    height: 80,
    position: "absolute",
    backgroundColor: "red",
    top: 0,
    left: 0,
    transform: [{ rotate: "155deg" }],
  },
});

Yin Yang

This one I don't like because you can't accomplish it without setting a background. Ohwell. Also weird border issue causing outlines.

const YinYang = () => {
  return (
    <View style={styles.yinyang}>
      <View style={styles.yinyangMain} />
      <View style={styles.yinyangBefore} />
      <View style={styles.yinyangAfter} />
    </View>
  );
};

StyleSheet.create({
  yinyang: {},
  yinyangMain: {
    width: 100,
    height: 100,
    borderColor: "red",
    borderTopWidth: 2,
    borderLeftWidth: 2,
    borderBottomWidth: 50,
    borderRightWidth: 2,
    borderRadius: 50,
  },
  yinyangBefore: {
    position: "absolute",
    top: 24,
    left: 0,
    borderColor: "red",
    borderWidth: 24,
    borderRadius: 30,
  },
  yinyangAfter: {
    position: "absolute",
    top: 24,
    right: 2,
    backgroundColor: "red",
    borderColor: "white",
    borderWidth: 25,
    borderRadius: 30,
  },
});

Badge Ribbon

Remember, always add backgroundColor: 'transparent' when you are overlapping things.

const BadgeRibbon = () => {
  return (
    <View style={styles.badgeRibbon}>
      <View style={styles.badgeRibbonCircle} />
      <View style={styles.badgeRibbonNeg140} />
      <View style={styles.badgeRibbon140} />
    </View>
  );
};

StyleSheet.create({
  badgeRibbonCircle: {
    width: 100,
    height: 100,
    backgroundColor: "red",
    borderRadius: 50,
  },
  badgeRibbon140: {
    backgroundColor: "transparent",
    borderBottomWidth: 70,
    borderBottomColor: "red",
    borderLeftWidth: 40,
    borderLeftColor: "transparent",
    borderRightWidth: 40,
    borderRightColor: "transparent",
    position: "absolute",
    top: 70,
    right: -10,
    transform: [{ rotate: "140deg" }],
  },
  badgeRibbonNeg140: {
    backgroundColor: "transparent",
    borderBottomWidth: 70,
    borderBottomColor: "red",
    borderLeftWidth: 40,
    borderLeftColor: "transparent",
    borderRightWidth: 40,
    borderRightColor: "transparent",
    position: "absolute",
    top: 70,
    left: -10,
    transform: [{ rotate: "-140deg" }],
  },
});

Space Invader

WUTTTTTTTTTTT

TV Screen

Stupid border radius making this one hard. We'll just use a bunch of ovals.

const TvScreen = () => {
  return (
    <View style={styles.tvscreen}>
      <View style={styles.tvscreenMain} />
      <View style={styles.tvscreenTop} />
      <View style={styles.tvscreenBottom} />
      <View style={styles.tvscreenLeft} />
      <View style={styles.tvscreenRight} />
    </View>
  );
};

StyleSheet.create({
  tvscreen: {},
  tvscreenMain: {
    width: 150,
    height: 75,
    backgroundColor: "red",
    borderTopLeftRadius: 15,
    borderTopRightRadius: 15,
    borderBottomRightRadius: 15,
    borderBottomLeftRadius: 15,
  },
  tvscreenTop: {
    width: 73,
    height: 70,
    backgroundColor: "red",
    position: "absolute",
    top: -26,
    left: 39,
    borderRadius: 35,
    transform: [{ scaleX: 2 }, { scaleY: 0.5 }],
  },
  tvscreenBottom: {
    width: 73,
    height: 70,
    backgroundColor: "red",
    position: "absolute",
    bottom: -26,
    left: 39,
    borderRadius: 35,
    transform: [{ scaleX: 2 }, { scaleY: 0.5 }],
  },
  tvscreenLeft: {
    width: 20,
    height: 38,
    backgroundColor: "red",
    position: "absolute",
    left: -7,
    top: 18,
    borderRadius: 35,
    transform: [{ scaleX: 0.5 }, { scaleY: 2 }],
  },
  tvscreenRight: {
    width: 20,
    height: 38,
    backgroundColor: "red",
    position: "absolute",
    right: -7,
    top: 18,
    borderRadius: 35,
    transform: [{ scaleX: 0.5 }, { scaleY: 2 }],
  },
});

Chevron

Once again we don't have skew, but we'll use triangles. Also magical negative scale to flip stuff around!

const Chevron = () => {
  return (
    <View style={styles.chevron}>
      <View style={styles.chevronMain} />
      <View style={[styles.chevronTriangle, styles.chevronTopLeft]} />
      <View style={[styles.chevronTriangle, styles.chevronTopRight]} />
      <View style={[styles.chevronTriangle, styles.chevronBottomLeft]} />
      <View style={[styles.chevronTriangle, styles.chevronBottomRight]} />
    </View>
  );
};

StyleSheet.create({
  chevron: {
    width: 150,
    height: 50,
  },
  chevronMain: {
    width: 150,
    height: 50,
    backgroundColor: "red",
  },
  chevronTriangle: {
    backgroundColor: "transparent",
    borderTopWidth: 20,
    borderRightWidth: 0,
    borderBottomWidth: 0,
    borderLeftWidth: 75,
    borderTopColor: "transparent",
    borderBottomColor: "transparent",
    borderRightColor: "transparent",
    borderLeftColor: "red",
  },
  chevronTopLeft: {
    position: "absolute",
    top: -20,
    left: 0,
  },
  chevronTopRight: {
    position: "absolute",
    top: -20,
    right: 0,
    transform: [{ scaleX: -1 }],
  },
  chevronBottomLeft: {
    position: "absolute",
    bottom: -20,
    left: 0,
    transform: [{ scale: -1 }],
  },
  chevronBottomRight: {
    position: "absolute",
    bottom: -20,
    right: 0,
    transform: [{ scaleY: -1 }],
  },
});

Magnifying Glass

Border around a circle with a stick. Nothing to it.

const MagnifyingGlass = () => {
  return (
    <View style={styles.magnifyingGlass}>
      <View style={styles.magnifyingGlassCircle} />
      <View style={styles.magnifyingGlassStick} />
    </View>
  );
};

StyleSheet.create({
  magnifyingGlass: {},
  magnifyingGlassCircle: {
    width: 100,
    height: 100,
    borderRadius: 50,
    borderWidth: 15,
    borderColor: "red",
  },
  magnifyingGlassStick: {
    position: "absolute",
    right: -20,
    bottom: -10,
    backgroundColor: "red",
    width: 50,
    height: 10,
    transform: [{ rotate: "45deg" }],
  },
});

Facebook Icon

This one seems appropriate but couldn't get it to work well. I attempted it and failed.

const Facebook = () => {
  return (
    <View style={styles.facebook}>
      <View style={styles.facebookMain}>
        <View style={styles.facebookCurve} />
        <View style={styles.facebookBefore} />
        <View style={styles.facebookAfter} />
        <View style={styles.facebookRedCover} />
      </View>
    </View>
  );
};

StyleSheet.create({
  facebook: {
    width: 100,
    height: 110,
  },
  facebookMain: {
    backgroundColor: "red",
    width: 100,
    height: 110,
    borderRadius: 5,
    borderColor: "red",
    borderTopWidth: 15,
    borderLeftWidth: 15,
    borderRightWidth: 15,
    borderBottomWidth: 0,
    overflow: "hidden",
  },
  facebookRedCover: {
    width: 10,
    height: 20,
    backgroundColor: "red",
    position: "absolute",
    right: 0,
    top: 5,
  },
  facebookCurve: {
    width: 50,
    borderWidth: 20,
    borderTopWidth: 20,
    borderTopColor: "white",
    borderBottomColor: "transparent",
    borderLeftColor: "white",
    borderRightColor: "transparent",
    borderRadius: 20,
    position: "absolute",
    right: -8,
    top: 5,
  },
  facebookBefore: {
    position: "absolute",
    backgroundColor: "white",
    width: 20,
    height: 70,
    bottom: 0,
    right: 22,
  },
  facebookAfter: {
    position: "absolute",
    width: 55,
    top: 50,
    height: 20,
    backgroundColor: "white",
    right: 5,
  },
});

Moon

Box shadow...

Flag

The one on css-tricks inferred a background, we'll just flip it around and say the center is transparent and the outer triangles are red.

const Flag = () => {
  return (
    <View style={styles.flag}>
      <View style={styles.flagTop} />
      <View style={styles.flagBottom} />
    </View>
  );
};

StyleSheet.create({
  flag: {},
  flagTop: {
    width: 110,
    height: 56,
    backgroundColor: "red",
  },
  flagBottom: {
    position: "absolute",
    left: 0,
    bottom: 0,
    width: 0,
    height: 0,
    borderBottomWidth: 13,
    borderBottomColor: "transparent",
    borderLeftWidth: 55,
    borderLeftColor: "red",
    borderRightWidth: 55,
    borderRightColor: "red",
  },
});

Cone

Had to modify the css on this one a bit to get the same look, 70 => 55.

const Cone = () => {
  return <View style={styles.cone} />;
};

StyleSheet.create({
  cone: {
    width: 0,
    height: 0,
    borderLeftWidth: 55,
    borderLeftColor: "transparent",
    borderRightWidth: 55,
    borderRightColor: "transparent",
    borderTopWidth: 100,
    borderTopColor: "red",
    borderRadius: 55,
  },
});

Cross

More of a plus then a cross.

const Cross = () => {
  return (
    <View style={styles.cross}>
      <View style={styles.crossUp} />
      <View style={styles.crossFlat} />
    </View>
  );
};

StyleSheet.create({
  cross: {},
  crossUp: {
    backgroundColor: "red",
    height: 100,
    width: 20,
  },
  crossFlat: {
    backgroundColor: "red",
    height: 20,
    width: 100,
    position: "absolute",
    left: -40,
    top: 40,
  },
});

Base

Base... Home .. Home Base, whichever all the same.

const Base = () => {
  return (
    <View style={styles.base}>
      <View style={styles.baseTop} />
      <View style={styles.baseBottom} />
    </View>
  );
};

StyleSheet.create({
  base: {},
  baseTop: {
    borderBottomWidth: 35,
    borderBottomColor: "red",
    borderLeftWidth: 50,
    borderLeftColor: "transparent",
    borderRightWidth: 50,
    borderRightColor: "transparent",
    height: 0,
    width: 0,
    left: 0,
    top: -35,
    position: "absolute",
  },
  baseBottom: {
    backgroundColor: "red",
    height: 55,
    width: 100,
  },
});

Final

Wow what a fun waste of time. Modeling React Native after the web spec is of course a great idea, I just wish it conformed a little nicer on border radius.

Also I hate geometry now.

I'm not posting the full code here because it's just too long.

Home
Tutorials
Courses