Draw a Circle React Native
Introduction
After drawing a bit of inspiration from The Shapes of CSS I decided to come across 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 form we accept admission to react-art here so drawing shapes is pretty simple only my goal is to come across if I can just utilize normal Views and all of the styles I have at my exposure to brand as many shapes as I can off of the Shapes of CSS list.
Some of these are obvious and some of them become a little crazy simply most of them are all hacks in the first identify!
I'yard going on vacation for a calendar 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 edge-radius worked a little more like the web
- Box Shadow would be nice to have every bit well.
- Skew transform would be a overnice to have.
- Only utilise SVGs...
Shapes
Square
Pretty elementary...
const Square = () => { return < View style ={ styles.square } />; }; StyleSheet. create ({ square: { width: 100 , summit: 100 , backgroundColor: "carmine" , }, }); Rectangle
Nothing as well crazy here either
const Rectangle = () => { return < View fashion ={ styles.rectangle } />; }; StyleSheet. create ({ rectangle: { width: 100 * 2 , height: 100 , backgroundColor: "reddish" , }, }); Circle
One note to mention well-nigh border radius is that it doesn't piece of work like the web. And so if you go more than fifty% you'll beginning forming a weird diamondy shape.
const Circle = () => { return < View style ={ styles.circumvolve } />; }; StyleSheet. create ({ circle: { width: 100 , superlative: 100 , borderRadius: 100 / ii , backgroundColor: "red" , }, }); Oval
Edge radius wasn't working, lets but do a circle and scale it...
const Oval = () => { render < View style ={ styles.oval } />; }; StyleSheet. create ({ oval: { width: 100 , height: 100 , borderRadius: 50 , backgroundColor: "scarlet" , transform: [{ scaleX: ii }], }, }); Triangle Upwards
CSS border triangles nevertheless work in React Native.
const Triangle = () => { render < View fashion ={ [styles.triangle, this .props.fashion] } />; }; StyleSheet. create ({ triangle: { width: 0 , elevation: 0 , backgroundColor: "transparent" , borderStyle: "solid" , borderLeftWidth: fifty , borderRightWidth: 50 , borderBottomWidth: 100 , borderLeftColor: "transparent" , borderRightColor: "transparent" , borderBottomColor: "cherry-red" , }, }); Here we get to crook a bit. You could exercise this on the web likewise, but rather than adjust the borders we'll just rotate information technology.
Triangle Downward
const TriangleDown = () => { render < 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" }], }, }); Once more we'll cheat here and become for the rotation!
Triangle Top Left
const TriangleCorner = () => { return < View mode ={ [styles.triangleCorner, this .props.style] } />; }; StyleSheet. create ({ triangleCorner: { width: 0 , height: 0 , backgroundColor: "transparent" , borderStyle: "solid" , borderRightWidth: 100 , borderTopWidth: 100 , borderRightColor: "transparent" , borderTopColor: "ruddy" , }, }); Triangle Top Right
const TriangleCornerTopRight = () => { render < TriangleCorner way ={ 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 anyhow so we'll but create a wrapping View with ii elements and mode 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'due south closeish.
const CurvedTailArrow = () => { return ( < View style ={ styles.curvedTailArrow } > < View way ={ styles.curvedTailArrowTail } /> < View style ={ styles.curvedTailArrowTriangle } /> </ View > ); }; StyleSheet. create ({ curvedTailArrow: { backgroundColor: "transparent" , overflow: "visible" , width: 30 , peak: 25 , }, curvedTailArrowTriangle: { backgroundColor: "transparent" , width: 0 , top: 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: "accented" , 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 , meridian: 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 fashion ={ styles.trapezoid } />; }; StyleSheet. create ({ trapezoid: { width: 200 , height: 0 , borderBottomWidth: 100 , borderBottomColor: "carmine" , borderLeftWidth: 50 , borderLeftColor: "transparent" , borderRightWidth: 50 , borderRightColor: "transparent" , borderStyle: "solid" , }, }); Parallelogram
If only nosotros had skew. :( Luckily we accept the triangles we created earlier.
const Parallelogram = () => { render ( < View style ={ styles.parallelogram } > < TriangleUp style ={ styles.parallelogramRight } /> < View mode ={ styles.parallelogramInner } /> < TriangleDown style ={ styles.parallelogramLeft } /> </ View > ); }; StyleSheet. create ({ parallelogram: { width: 150 , summit: 100 , }, parallelogramInner: { position: "absolute" , left: 0 , height: 0 , backgroundColor: "cherry-red" , width: 150 , height: 100 , }, parallelogramRight: { meridian: 0 , correct: - 50 , position: "accented" , }, parallelogramLeft: { elevation: 0 , left: - 50 , position: "absolute" , }, }); Star (six-points)
These Triangles certain are coming in handy.
const StarSix = () => { return ( < View fashion ={ 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" , summit: 25 , left: 0 , }, }); Star (five-points)
Yaye TriangleUp is killing information technology. This one is Really hacky with the placement, could utilize 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: "accented" , top: - 45 , left: 37 , }, starfiveBefore: { backgroundColor: "transparent" , position: "absolute" , left: 0 , tiptop: 0 , borderStyle: "solid" , borderRightWidth: 100 , borderRightColor: "transparent" , borderBottomWidth: 70 , borderBottomColor: "red" , borderLeftWidth: 100 , borderLeftColor: "transparent" , transform: [{ rotate: "35deg" }], }, starfiveAfter: { backgroundColor: "transparent" , position: "absolute" , height: 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 nosotros could take used a Corner Triangle with rotate.
const Pentagon = () => { return ( < View style ={ styles.pentagon } > < View mode ={ 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: xviii , borderTopColor: "red" , borderTopWidth: l , }, pentagonBefore: { position: "absolute" , meridian: 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 manner ={ 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: fifty , borderRightColor: "transparent" , borderTopWidth: 25 , borderTopColor: "red" , }, hexagonBefore: { position: "absolute" , top: - 25 , left: 0 , width: 0 , tiptop: 0 , borderStyle: "solid" , borderLeftWidth: 50 , borderLeftColor: "transparent" , borderRightWidth: 50 , borderRightColor: "transparent" , borderBottomWidth: 25 , borderBottomColor: "red" , }, }); Octagon
I attempted copied the css on this ane 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 fashion ={ styles.octagon } > < View manner ={ [styles.octagonUp, styles.octagonBar] } /> < View style ={ [styles.octagonFlat, styles.octagonBar] } /> < View mode ={ [styles.octagonLeft, styles.octagonBar] } /> < View style ={ [styles.octagonRight, styles.octagonBar] } /> </ View > ); }; StyleSheet. create ({ octagon: {}, octagonBar: { width: 42 , elevation: 100 , backgroundColor: "ruby" , }, octagonUp: {}, octagonFlat: { position: "absolute" , top: 0 , left: 0 , transform: [{ rotate: "90deg" }], }, octagonLeft: { position: "absolute" , top: 0 , left: 0 , transform: [{ rotate: "-45deg" }], }, octagonRight: { position: "accented" , top: 0 , left: 0 , transform: [{ rotate: "45deg" }], }, }); Heart
This ane is easy since well I already had it done for my previous tutorial.
const Centre = () => { return ( < View {... this .props } style ={ [styles.middle, this .props.manner] } > < View manner ={ styles.leftHeart } /> < View style ={ styles.rightHeart } /> </ View > ); }; StyleSheet. create ({ heart: { width: fifty , height: l , }, heartShape: { width: xxx , height: 45 , position: "absolute" , top: 0 , borderTopLeftRadius: 15 , borderTopRightRadius: 15 , backgroundColor: "#6427d1" , }, leftHeart: { transform: [{ rotate: "-45deg" }], left: v , }, rightHeart: { transform: [{ rotate: "45deg" }], correct: 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 fashion ={ styles.infinityBefore } /> < View style ={ styles.infinityAfter } /> </ View > ); }; StyleSheet. create ({ infinity: { width: 80 , height: 100 , }, infinityBefore: { position: "absolute" , tiptop: 0 , left: 0 , width: 0 , meridian: 0 , borderWidth: xx , borderColor: "red" , borderStyle: "solid" , borderTopLeftRadius: 50 , borderTopRightRadius: 50 , borderBottomRightRadius: 50 , borderBottomLeftRadius: 0 , transform: [{ rotate: "-135deg" }], }, infinityAfter: { position: "absolute" , top: 0 , right: 0 , width: 0 , summit: 0 , borderWidth: 20 , borderColor: "ruddy" , borderStyle: "solid" , borderTopLeftRadius: 50 , borderTopRightRadius: 0 , borderBottomRightRadius: fifty , borderBottomLeftRadius: fifty , transform: [{ rotate: "-135deg" }], }, }); Diamond Square
This was more than than just a rotated square. Am I missing something?
const Diamond = () => { return < View style ={ styles.diamond } />; }; StyleSheet. create ({ diamond: { width: 50 , tiptop: l , backgroundColor: "ruby" , transform: [{ rotate: "45deg" }], }, }); Diamond Shield
Just two triangles, thought this one was going to be harder.
const DiamondShield = () => { return ( < View style ={ styles.diamondShield } > < View manner ={ styles.diamondShieldTop } /> < View style ={ styles.diamondShieldBottom } /> </ View > ); }; StyleSheet. create ({ diamondShield: { width: 100 , acme: 100 , }, diamondShieldTop: { width: 0 , height: 0 , borderTopWidth: 50 , borderTopColor: "transparent" , borderLeftColor: "transparent" , borderLeftWidth: l , borderRightColor: "transparent" , borderRightWidth: 50 , borderBottomColor: "cerise" , borderBottomWidth: 20 , }, diamondShieldBottom: { width: 0 , height: 0 , borderTopWidth: 70 , borderTopColor: "ruby" , borderLeftColor: "transparent" , borderLeftWidth: 50 , borderRightColor: "transparent" , borderRightWidth: 50 , borderBottomColor: "transparent" , borderBottomWidth: 50 , }, }); Diamond Narrow
Another ii triangles that could take been the same and rotated. This way works too.
const DiamondNarrow = () => { return ( < View style ={ styles.diamondNarrow } > < View mode ={ styles.diamondNarrowTop } /> < View mode ={ styles.diamondNarrowBottom } /> </ View > ); }; StyleSheet. create ({ diamondNarrow: { width: 100 , tiptop: 100 , }, diamondNarrowTop: { width: 0 , summit: 0 , borderTopWidth: 50 , borderTopColor: "transparent" , borderLeftColor: "transparent" , borderLeftWidth: 50 , borderRightColor: "transparent" , borderRightWidth: fifty , borderBottomColor: "red" , borderBottomWidth: 70 , }, diamondNarrowBottom: { width: 0 , meridian: 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 , elevation: 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: fifty , 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-Homo
This i is so uncomplicated but always so fun.
const PacMan = () => { render < View style ={ styles.pacman } />; }; StyleSheet. create ({ pacman: { width: 0 , height: 0 , borderTopWidth: 60 , borderTopColor: "reddish" , borderLeftColor: "red" , borderLeftWidth: lx , borderRightColor: "transparent" , borderRightWidth: sixty , borderBottomColor: "red" , borderBottomWidth: 60 , borderTopLeftRadius: sixty , borderTopRightRadius: 60 , borderBottomRightRadius: 60 , borderBottomLeftRadius: 60 , }, }); Talk Chimera
This one is also simple, triangle and a rounded square.
const TalkBubble = () => { render ( < View style ={ styles.talkBubble } > < View style ={ styles.talkBubbleSquare } /> < View style ={ styles.talkBubbleTriangle } /> </ View > ); }; StyleSheet. create ({ talkBubble: { backgroundColor: "transparent" , }, talkBubbleSquare: { width: 120 , meridian: 80 , backgroundColor: "cherry-red" , borderRadius: 10 , }, talkBubbleTriangle: { position: "absolute" , left: - 26 , top: 26 , width: 0 , pinnacle: 0 , borderTopColor: "transparent" , borderTopWidth: 13 , borderRightWidth: 26 , borderRightColor: "red" , borderBottomWidth: 13 , borderBottomColor: "transparent" , }, }); 12 Indicate Flare-up
I volition admit this 1 dislocated be a little bit, then I realized it's merely a couple of rotated squares.
const TwelvePointBurst = () => { return ( < View fashion ={ styles.twelvePointBurst } > < View manner ={ styles.twelvePointBurstMain } /> < View style ={ styles.twelvePointBurst30 } /> < View manner ={ styles.twelvePointBurst60 } /> </ View > ); }; StyleSheet. create ({ twelvePointBurst: {}, twelvePointBurstMain: { width: 80 , superlative: 80 , backgroundColor: "cherry-red" , }, twelvePointBurst30: { width: fourscore , pinnacle: 80 , position: "accented" , backgroundColor: "red" , top: 0 , right: 0 , transform: [{ rotate: "30deg" }], }, twelvePointBurst60: { width: fourscore , height: fourscore , position: "absolute" , backgroundColor: "red" , meridian: 0 , right: 0 , transform: [{ rotate: "60deg" }], }, }); 8 Point Burst
Only like the 12, but i less foursquare and dissimilar rotations. Only matter here is considering the pseudo element was positionined relative to the beginning twenty degree rotation and ours isn't we'll only 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: fourscore , backgroundColor: "ruby" , 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 similar considering you can't achieve it without setting a groundwork. Ohwell. Also weird border issue causing outlines.
const YinYang = () => { return ( < View manner ={ styles.yinyang } > < View manner ={ styles.yinyangMain } /> < View style ={ styles.yinyangBefore } /> < View manner ={ styles.yinyangAfter } /> </ View > ); }; StyleSheet. create ({ yinyang: {}, yinyangMain: { width: 100 , height: 100 , borderColor: "reddish" , borderTopWidth: two , borderLeftWidth: 2 , borderBottomWidth: 50 , borderRightWidth: 2 , borderRadius: 50 , }, yinyangBefore: { position: "accented" , top: 24 , left: 0 , borderColor: "red" , borderWidth: 24 , borderRadius: 30 , }, yinyangAfter: { position: "accented" , top: 24 , right: two , backgroundColor: "reddish" , borderColor: "white" , borderWidth: 25 , borderRadius: 30 , }, }); Badge Ribbon
Remember, always add backgroundColor: 'transparent' when you are overlapping things.
const BadgeRibbon = () => { render ( < View mode ={ styles.badgeRibbon } > < View style ={ styles.badgeRibbonCircle } /> < View style ={ styles.badgeRibbonNeg140 } /> < View style ={ styles.badgeRibbon140 } /> </ View > ); }; StyleSheet. create ({ badgeRibbonCircle: { width: 100 , meridian: 100 , backgroundColor: "ruby" , borderRadius: 50 , }, badgeRibbon140: { backgroundColor: "transparent" , borderBottomWidth: 70 , borderBottomColor: "cerise" , borderLeftWidth: forty , borderLeftColor: "transparent" , borderRightWidth: twoscore , borderRightColor: "transparent" , position: "absolute" , top: lxx , right: - ten , transform: [{ rotate: "140deg" }], }, badgeRibbonNeg140: { backgroundColor: "transparent" , borderBottomWidth: 70 , borderBottomColor: "red" , borderLeftWidth: 40 , borderLeftColor: "transparent" , borderRightWidth: 40 , borderRightColor: "transparent" , position: "absolute" , peak: 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: "ruddy" , borderTopLeftRadius: 15 , borderTopRightRadius: 15 , borderBottomRightRadius: 15 , borderBottomLeftRadius: 15 , }, tvscreenTop: { width: 73 , height: seventy , backgroundColor: "scarlet" , position: "absolute" , superlative: - 26 , left: 39 , borderRadius: 35 , transform: [{ scaleX: 2 }, { scaleY: 0.5 }], }, tvscreenBottom: { width: 73 , top: seventy , backgroundColor: "red" , position: "absolute" , lesser: - 26 , left: 39 , borderRadius: 35 , transform: [{ scaleX: two }, { scaleY: 0.5 }], }, tvscreenLeft: { width: 20 , height: 38 , backgroundColor: "carmine" , position: "absolute" , left: - 7 , elevation: 18 , borderRadius: 35 , transform: [{ scaleX: 0.5 }, { scaleY: 2 }], }, tvscreenRight: { width: 20 , acme: 38 , backgroundColor: "red" , position: "accented" , right: - 7 , top: 18 , borderRadius: 35 , transform: [{ scaleX: 0.5 }, { scaleY: 2 }], }, }); Chevron
Again we don't have skew, but we'll use triangles. As well magical negative scale to flip stuff around!
const Chevron = () => { return ( < View mode ={ styles.chevron } > < View fashion ={ styles.chevronMain } /> < View style ={ [styles.chevronTriangle, styles.chevronTopLeft] } /> < View manner ={ [styles.chevronTriangle, styles.chevronTopRight] } /> < View mode ={ [styles.chevronTriangle, styles.chevronBottomLeft] } /> < View style ={ [styles.chevronTriangle, styles.chevronBottomRight] } /> </ View > ); }; StyleSheet. create ({ chevron: { width: 150 , superlative: 50 , }, chevronMain: { width: 150 , elevation: 50 , backgroundColor: "red" , }, chevronTriangle: { backgroundColor: "transparent" , borderTopWidth: twenty , borderRightWidth: 0 , borderBottomWidth: 0 , borderLeftWidth: 75 , borderTopColor: "transparent" , borderBottomColor: "transparent" , borderRightColor: "transparent" , borderLeftColor: "red" , }, chevronTopLeft: { position: "absolute" , top: - xx , left: 0 , }, chevronTopRight: { position: "absolute" , peak: - 20 , right: 0 , transform: [{ scaleX: - 1 }], }, chevronBottomLeft: { position: "absolute" , bottom: - 20 , left: 0 , transform: [{ scale: - 1 }], }, chevronBottomRight: { position: "accented" , lesser: - xx , right: 0 , transform: [{ scaleY: - 1 }], }, }); Magnifying Glass
Edge around a circle with a stick. Cypher to information technology.
const MagnifyingGlass = () => { render ( < View manner ={ styles.magnifyingGlass } > < View manner ={ styles.magnifyingGlassCircle } /> < View style ={ styles.magnifyingGlassStick } /> </ View > ); }; StyleSheet. create ({ magnifyingGlass: {}, magnifyingGlassCircle: { width: 100 , height: 100 , borderRadius: 50 , borderWidth: 15 , borderColor: "red" , }, magnifyingGlassStick: { position: "accented" , right: - 20 , bottom: - 10 , backgroundColor: "red" , width: 50 , acme: 10 , transform: [{ rotate: "45deg" }], }, }); Facebook Icon
This i seems appropriate but couldn't go information technology to work well. I attempted it and failed.
const Facebook = () => { return ( < View fashion ={ styles.facebook } > < View style ={ styles.facebookMain } > < View fashion ={ styles.facebookCurve } /> < View fashion ={ styles.facebookBefore } /> < View style ={ styles.facebookAfter } /> < View style ={ styles.facebookRedCover } /> </ View > </ View > ); }; StyleSheet. create ({ facebook: { width: 100 , superlative: 110 , }, facebookMain: { backgroundColor: "ruddy" , width: 100 , height: 110 , borderRadius: five , borderColor: "red" , borderTopWidth: 15 , borderLeftWidth: 15 , borderRightWidth: 15 , borderBottomWidth: 0 , overflow: "hidden" , }, facebookRedCover: { width: 10 , height: xx , backgroundColor: "red" , position: "accented" , right: 0 , meridian: 5 , }, facebookCurve: { width: 50 , borderWidth: xx , borderTopWidth: twenty , borderTopColor: "white" , borderBottomColor: "transparent" , borderLeftColor: "white" , borderRightColor: "transparent" , borderRadius: 20 , position: "absolute" , right: - 8 , top: 5 , }, facebookBefore: { position: "absolute" , backgroundColor: "white" , width: 20 , height: lxx , bottom: 0 , right: 22 , }, facebookAfter: { position: "absolute" , width: 55 , acme: 50 , height: 20 , backgroundColor: "white" , right: 5 , }, }); Moon
Box shadow...
Flag
The one on css-tricks inferred a background, we'll just flip it effectually and say the eye is transparent and the outer triangles are red.
const Flag = () => { render ( < View manner ={ styles.flag } > < View mode ={ styles.flagTop } /> < View manner ={ styles.flagBottom } /> </ View > ); }; StyleSheet. create ({ flag: {}, flagTop: { width: 110 , summit: 56 , backgroundColor: "blood-red" , }, flagBottom: { position: "absolute" , left: 0 , lesser: 0 , width: 0 , height: 0 , borderBottomWidth: 13 , borderBottomColor: "transparent" , borderLeftWidth: 55 , borderLeftColor: "red" , borderRightWidth: 55 , borderRightColor: "blood-red" , }, }); Cone
Had to change the css on this one a flake to get the same look, seventy => 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: "crimson" , borderRadius: 55 , }, }); Cantankerous
More than of a plus and so a cross.
const Cross = () => { render ( < View style ={ styles.cross } > < View style ={ styles.crossUp } /> < View style ={ styles.crossFlat } /> </ View > ); }; StyleSheet. create ({ cantankerous: {}, crossUp: { backgroundColor: "red" , height: 100 , width: twenty , }, crossFlat: { backgroundColor: "ruddy" , meridian: twenty , width: 100 , position: "absolute" , left: - 40 , superlative: forty , }, }); Base
Base... Home .. Home Base, whichever all the same.
const Base of operations = () => { return ( < View style ={ styles.base } > < View style ={ styles.baseTop } /> < View style ={ styles.baseBottom } /> </ View > ); }; StyleSheet. create ({ base: {}, baseTop: { borderBottomWidth: 35 , borderBottomColor: "scarlet" , borderLeftWidth: 50 , borderLeftColor: "transparent" , borderRightWidth: 50 , borderRightColor: "transparent" , height: 0 , width: 0 , left: 0 , tiptop: - 35 , position: "accented" , }, baseBottom: { backgroundColor: "red" , height: 55 , width: 100 , }, }); Final
Wow what a fun waste matter of time. Modeling React Native later the web spec is of course a corking idea, I just wish it conformed a little nicer on border radius.
Also I detest geometry now.
I'm non posting the full code here because it's just likewise long.
Source: https://codedaily.io/tutorials/The-Shapes-of-React-Native
0 Response to "Draw a Circle React Native"
Post a Comment