Draw a Circle in React Native
Introduction
Subsequently 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 yous haven't been on css-tricks check them out, Chris Coyier is fantastic!
Of grade we take admission to react-art hither then cartoon shapes is pretty unproblematic only my goal is to run across if I can just employ normal Views and all of the styles I have at my exposure to make every bit many shapes as I can off of the Shapes of CSS listing.
Some of these are obvious and some of them get a petty crazy but most of them are all hacks in the first place!
I'thou going on vacation for a month. So this shall be dubbed "I of the more pointless blog posts on my web log written out of sheer tiredness".
Cardinal Takeaways
- I wish border-radius worked a niggling more like the web
- Box Shadow would exist nice to take as well.
- Skew transform would be a dainty to accept.
- Just use SVGs...
Shapes
Square
Pretty unproblematic...
const Square = () => { return < View style ={ styles.foursquare } />; }; StyleSheet. create ({ square: { width: 100 , summit: 100 , backgroundColor: "ruddy" , }, }); Rectangle
Goose egg as well crazy hither either
const Rectangle = () => { return < View way ={ styles.rectangle } />; }; StyleSheet. create ({ rectangle: { width: 100 * ii , tiptop: 100 , backgroundColor: "red" , }, }); Circle
1 note to mention nearly border radius is that it doesn't work like the web. So if you become more than than l% y'all'll start forming a weird diamondy shape.
const Circumvolve = () => { 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 practise a circle and calibration it...
const Oval = () => { render < View style ={ styles.oval } />; }; StyleSheet. create ({ oval: { width: 100 , height: 100 , borderRadius: l , backgroundColor: "red" , transform: [{ scaleX: 2 }], }, }); Triangle Upwards
CSS border triangles still work in React Native.
const Triangle = () => { return < View style ={ [styles.triangle, this .props.fashion] } />; }; StyleSheet. create ({ triangle: { width: 0 , tiptop: 0 , backgroundColor: "transparent" , borderStyle: "solid" , borderLeftWidth: 50 , borderRightWidth: 50 , borderBottomWidth: 100 , borderLeftColor: "transparent" , borderRightColor: "transparent" , borderBottomColor: "red" , }, }); Here we become to cheat a bit. You could practice this on the web likewise, 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 = () => { render < 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 Pinnacle 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: "scarlet" , }, }); Triangle Height Right
const TriangleCornerTopRight = () => { return < TriangleCorner style ={ styles.triangleCornerTopRight } />; }; StyleSheet. create ({ triangleCornerTopRight: { transform: [{ rotate: "90deg" }], }, }); Triangle Lesser Left
const TriangleCornerBottomLeft = () => { return < TriangleCorner style ={ styles.triangleCornerBottomLeft } />; }; StyleSheet. create ({ triangleCornerBottomLeft: { transform: [{ rotate: "270deg" }], }, }); Triangle Bottom Correct
const TriangleCornerBottomRight = () => { return < TriangleCorner way ={ styles.triangleCornerBottomRight } />; }; StyleSheet. create ({ triangleCornerBottomRight: { transform: [{ rotate: "180deg" }], }, }); Curved Tail Arrow
Well nosotros don't have the ability to do pseudo elements only they were just hacks anyway then we'll just create a wrapping View with 2 elements and style them. Now this is not exactly the same, and information technology'south partially due to the way edge-radius are managed in react-native vs the web but it'south 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 , correct: iii , overflow: "visible" , }, curvedTailArrowTail: { backgroundColor: "transparent" , position: "absolute" , borderBottomColor: "transparent" , borderLeftColor: "transparent" , borderRightColor: "transparent" , borderBottomWidth: 0 , borderLeftWidth: 0 , borderRightWidth: 0 , borderTopWidth: three , borderTopColor: "red" , borderStyle: "solid" , borderTopLeftRadius: 12 , top: 1 , left: 0 , width: twenty , height: 20 , transform: [{ rotate: "45deg" }], }, }); Trapezoid
The difference with this i is nosotros 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: fifty , borderLeftColor: "transparent" , borderRightWidth: l , borderRightColor: "transparent" , borderStyle: "solid" , }, }); Parallelogram
If only we had skew. :( Luckily we have the triangles we created before.
const Parallelogram = () => { return ( < View style ={ styles.parallelogram } > < TriangleUp style ={ styles.parallelogramRight } /> < View manner ={ styles.parallelogramInner } /> < TriangleDown style ={ styles.parallelogramLeft } /> </ View > ); }; StyleSheet. create ({ parallelogram: { width: 150 , height: 100 , }, parallelogramInner: { position: "accented" , left: 0 , summit: 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 mode ={ styles.starsix } > < TriangleUp style ={ styles.starSixUp } /> < TriangleDown manner ={ styles.starSixDown } /> </ View > ); }; StyleSheet. create ({ starsix: { width: 100 , top: 100 , }, starSixUp: { position: "absolute" , top: 0 , left: 0 , }, starSixDown: { position: "accented" , 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 mode ={ styles.starfiveTop } /> < View way ={ styles.starfiveBefore } /> < View style ={ styles.starfiveAfter } /> </ View > ); }; StyleSheet. create ({ starfive: { width: 150 , tiptop: 150 , }, starfiveTop: { position: "accented" , height: - 45 , left: 37 , }, starfiveBefore: { backgroundColor: "transparent" , position: "accented" , left: 0 , top: 0 , borderStyle: "solid" , borderRightWidth: 100 , borderRightColor: "transparent" , borderBottomWidth: 70 , borderBottomColor: "cherry" , borderLeftWidth: 100 , borderLeftColor: "transparent" , transform: [{ rotate: "35deg" }], }, starfiveAfter: { backgroundColor: "transparent" , position: "absolute" , superlative: 0 , left: - 25 , width: 0 , height: 0 , borderStyle: "solid" , borderRightWidth: 100 , borderRightColor: "transparent" , borderBottomWidth: seventy , borderBottomColor: "red" , borderLeftWidth: 100 , borderLeftColor: "transparent" , transform: [{ rotate: "-35deg" }], }, }); Pentagon
No TriangleUp here but we could take 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: eighteen , borderRightColor: "transparent" , borderRightWidth: 18 , borderTopColor: "red" , borderTopWidth: 50 , }, pentagonBefore: { position: "absolute" , meridian: 0 , width: 0 , peak: - 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 merely shapes.
const Hexagon = () => { return ( < View way ={ styles.hexagon } > < View fashion ={ styles.hexagonInner } /> < View mode ={ styles.hexagonBefore } /> < View style ={ styles.hexagonAfter } /> </ View > ); }; StyleSheet. create ({ hexagon: { width: 100 , height: 55 , }, hexagonInner: { width: 100 , height: 55 , backgroundColor: "red" , }, hexagonAfter: { position: "accented" , bottom: - 25 , left: 0 , width: 0 , meridian: 0 , borderStyle: "solid" , borderLeftWidth: 50 , borderLeftColor: "transparent" , borderRightWidth: 50 , borderRightColor: "transparent" , borderTopWidth: 25 , borderTopColor: "red" , }, hexagonBefore: { position: "absolute" , pinnacle: - 25 , left: 0 , width: 0 , height: 0 , borderStyle: "solid" , borderLeftWidth: fifty , borderLeftColor: "transparent" , borderRightWidth: fifty , borderRightColor: "transparent" , borderBottomWidth: 25 , borderBottomColor: "carmine" , }, }); Octagon
I attempted copied the css on this one but it required setting a groundwork color, and then 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 , pinnacle: 100 , backgroundColor: "red" , }, octagonUp: {}, octagonFlat: { position: "accented" , 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" }], }, }); Middle
This one is easy since well I already had it washed for my previous tutorial.
const Eye = () => { render ( < View {... this .props } style ={ [styles.centre, this .props.style] } > < View style ={ styles.leftHeart } /> < View mode ={ styles.rightHeart } /> </ View > ); }; StyleSheet. create ({ heart: { width: fifty , acme: 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 information technology up if you desire it bigger.
const Infinity = () => { return ( < View style ={ styles.infinity } > < View style ={ styles.infinityBefore } /> < View way ={ styles.infinityAfter } /> </ View > ); }; StyleSheet. create ({ infinity: { width: lxxx , height: 100 , }, infinityBefore: { position: "absolute" , peak: 0 , left: 0 , width: 0 , height: 0 , borderWidth: xx , borderColor: "blood-red" , borderStyle: "solid" , borderTopLeftRadius: 50 , borderTopRightRadius: 50 , borderBottomRightRadius: 50 , borderBottomLeftRadius: 0 , transform: [{ rotate: "-135deg" }], }, infinityAfter: { position: "absolute" , tiptop: 0 , right: 0 , width: 0 , superlative: 0 , borderWidth: 20 , borderColor: "blood-red" , borderStyle: "solid" , borderTopLeftRadius: 50 , borderTopRightRadius: 0 , borderBottomRightRadius: fifty , borderBottomLeftRadius: 50 , transform: [{ rotate: "-135deg" }], }, }); Diamond Square
This was more than than just a rotated foursquare. Am I missing something?
const Diamond = () => { return < View style ={ styles.diamond } />; }; StyleSheet. create ({ diamond: { width: 50 , superlative: 50 , backgroundColor: "carmine" , transform: [{ rotate: "45deg" }], }, }); Diamond Shield
Just ii triangles, thought this 1 was going to exist harder.
const DiamondShield = () => { return ( < View way ={ styles.diamondShield } > < View manner ={ styles.diamondShieldTop } /> < View style ={ styles.diamondShieldBottom } /> </ View > ); }; StyleSheet. create ({ diamondShield: { width: 100 , meridian: 100 , }, diamondShieldTop: { width: 0 , height: 0 , borderTopWidth: fifty , borderTopColor: "transparent" , borderLeftColor: "transparent" , borderLeftWidth: 50 , borderRightColor: "transparent" , borderRightWidth: 50 , borderBottomColor: "reddish" , borderBottomWidth: xx , }, diamondShieldBottom: { width: 0 , summit: 0 , borderTopWidth: 70 , borderTopColor: "ruby-red" , borderLeftColor: "transparent" , borderLeftWidth: 50 , borderRightColor: "transparent" , borderRightWidth: 50 , borderBottomColor: "transparent" , borderBottomWidth: l , }, }); Diamond Narrow
Another 2 triangles that could accept been the same and rotated. This mode 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: fifty , borderTopColor: "transparent" , borderLeftColor: "transparent" , borderLeftWidth: 50 , borderRightColor: "transparent" , borderRightWidth: 50 , borderBottomColor: "red" , borderBottomWidth: 70 , }, diamondNarrowBottom: { width: 0 , height: 0 , borderTopWidth: 70 , borderTopColor: "cerise" , borderLeftColor: "transparent" , borderLeftWidth: 50 , borderRightColor: "transparent" , borderRightWidth: fifty , borderBottomColor: "transparent" , borderBottomWidth: 50 , }, }); Cut Diamond
The top could take been used for the octagon, I chose a different way though.
const CutDiamond = () => { render ( < View style ={ styles.cutDiamond } > < View fashion ={ styles.cutDiamondTop } /> < View manner ={ 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: "scarlet" , borderBottomWidth: 25 , }, cutDiamondBottom: { width: 0 , tiptop: 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 mode ={ styles.egg } />; }; StyleSheet. create ({ egg: { width: 126 , elevation: 180 , backgroundColor: "cherry" , borderTopLeftRadius: 108 , borderTopRightRadius: 108 , borderBottomLeftRadius: 95 , borderBottomRightRadius: 95 , }, }); Pac-Human
This one is then simple but e'er so fun.
const PacMan = () => { return < View style ={ styles.pacman } />; }; StyleSheet. create ({ pacman: { width: 0 , peak: 0 , borderTopWidth: sixty , borderTopColor: "ruddy" , borderLeftColor: "cherry" , borderLeftWidth: sixty , borderRightColor: "transparent" , borderRightWidth: 60 , borderBottomColor: "red" , borderBottomWidth: 60 , borderTopLeftRadius: 60 , borderTopRightRadius: 60 , borderBottomRightRadius: threescore , borderBottomLeftRadius: sixty , }, }); Talk Bubble
This i is also elementary, triangle and a rounded square.
const TalkBubble = () => { return ( < View style ={ styles.talkBubble } > < View fashion ={ styles.talkBubbleSquare } /> < View manner ={ styles.talkBubbleTriangle } /> </ View > ); }; StyleSheet. create ({ talkBubble: { backgroundColor: "transparent" , }, talkBubbleSquare: { width: 120 , elevation: eighty , backgroundColor: "reddish" , borderRadius: 10 , }, talkBubbleTriangle: { position: "accented" , left: - 26 , peak: 26 , width: 0 , height: 0 , borderTopColor: "transparent" , borderTopWidth: thirteen , borderRightWidth: 26 , borderRightColor: "cerise" , borderBottomWidth: thirteen , borderBottomColor: "transparent" , }, }); 12 Point Flare-up
I will admit this one confused be a lilliputian bit, then I realized it'due south just a couple of rotated squares.
const TwelvePointBurst = () => { return ( < View fashion ={ styles.twelvePointBurst } > < View fashion ={ styles.twelvePointBurstMain } /> < View way ={ styles.twelvePointBurst30 } /> < View way ={ 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" , summit: 0 , right: 0 , transform: [{ rotate: "60deg" }], }, }); viii Indicate Burst
But similar the 12, only ane less square and different rotations. Only thing hither is because the pseudo element was positionined relative to the first twenty caste rotation and ours isn't we'll just bump information technology upward to 155.
const EightPointBurst = () => { return ( < View manner ={ styles.eightPointBurst } > < View mode ={ styles.eightPointBurst20 } /> < View style ={ styles.eightPointBurst155 } /> </ View > ); }; StyleSheet. create ({ eightPointBurst: {}, eightPointBurst20: { width: 80 , superlative: eighty , backgroundColor: "red" , transform: [{ rotate: "20deg" }], }, eightPointBurst155: { width: lxxx , pinnacle: 80 , position: "absolute" , backgroundColor: "ruddy" , acme: 0 , left: 0 , transform: [{ rotate: "155deg" }], }, }); Yin Yang
This i I don't like because you can't accomplish information technology without setting a background. Ohwell. As well weird border issue causing outlines.
const YinYang = () => { return ( < View manner ={ styles.yinyang } > < View style ={ styles.yinyangMain } /> < View way ={ styles.yinyangBefore } /> < View style ={ styles.yinyangAfter } /> </ View > ); }; StyleSheet. create ({ yinyang: {}, yinyangMain: { width: 100 , elevation: 100 , borderColor: "blood-red" , borderTopWidth: 2 , borderLeftWidth: 2 , borderBottomWidth: fifty , borderRightWidth: 2 , borderRadius: 50 , }, yinyangBefore: { position: "accented" , tiptop: 24 , left: 0 , borderColor: "cherry" , borderWidth: 24 , borderRadius: 30 , }, yinyangAfter: { position: "absolute" , top: 24 , right: 2 , backgroundColor: "red" , borderColor: "white" , borderWidth: 25 , borderRadius: 30 , }, }); Badge Ribbon
Remember, e'er add backgroundColor: 'transparent' when you are overlapping things.
const BadgeRibbon = () => { return ( < View fashion ={ styles.badgeRibbon } > < View mode ={ styles.badgeRibbonCircle } /> < View manner ={ styles.badgeRibbonNeg140 } /> < View style ={ styles.badgeRibbon140 } /> </ View > ); }; StyleSheet. create ({ badgeRibbonCircle: { width: 100 , peak: 100 , backgroundColor: "carmine" , borderRadius: fifty , }, badgeRibbon140: { backgroundColor: "transparent" , borderBottomWidth: 70 , borderBottomColor: "red" , borderLeftWidth: twoscore , 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: "accented" , acme: 70 , left: - 10 , transform: [{ rotate: "-140deg" }], }, }); Space Invader
WUTTTTTTTTTTT
Idiot box Screen
Stupid border radius making this one hard. We'll just use a agglomeration of ovals.
const TvScreen = () => { return ( < View style ={ styles.tvscreen } > < View fashion ={ styles.tvscreenMain } /> < View style ={ styles.tvscreenTop } /> < View style ={ styles.tvscreenBottom } /> < View style ={ styles.tvscreenLeft } /> < View manner ={ styles.tvscreenRight } /> </ View > ); }; StyleSheet. create ({ tvscreen: {}, tvscreenMain: { width: 150 , height: 75 , backgroundColor: "red" , borderTopLeftRadius: 15 , borderTopRightRadius: 15 , borderBottomRightRadius: fifteen , borderBottomLeftRadius: 15 , }, tvscreenTop: { width: 73 , height: 70 , backgroundColor: "red" , position: "absolute" , top: - 26 , left: 39 , borderRadius: 35 , transform: [{ scaleX: two }, { scaleY: 0.5 }], }, tvscreenBottom: { width: 73 , summit: 70 , backgroundColor: "crimson" , position: "accented" , bottom: - 26 , left: 39 , borderRadius: 35 , transform: [{ scaleX: two }, { scaleY: 0.5 }], }, tvscreenLeft: { width: xx , peak: 38 , backgroundColor: "red" , position: "accented" , left: - 7 , top: 18 , borderRadius: 35 , transform: [{ scaleX: 0.5 }, { scaleY: 2 }], }, tvscreenRight: { width: 20 , height: 38 , backgroundColor: "carmine" , position: "absolute" , right: - vii , pinnacle: 18 , borderRadius: 35 , transform: [{ scaleX: 0.five }, { scaleY: 2 }], }, }); Chevron
In one case once again we don't accept skew, but nosotros'll utilise triangles. Also magical negative scale to flip stuff around!
const Chevron = () => { return ( < View style ={ styles.chevron } > < View mode ={ styles.chevronMain } /> < View fashion ={ [styles.chevronTriangle, styles.chevronTopLeft] } /> < View way ={ [styles.chevronTriangle, styles.chevronTopRight] } /> < View style ={ [styles.chevronTriangle, styles.chevronBottomLeft] } /> < View style ={ [styles.chevronTriangle, styles.chevronBottomRight] } /> </ View > ); }; StyleSheet. create ({ chevron: { width: 150 , superlative: 50 , }, chevronMain: { width: 150 , height: 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" , elevation: - 20 , correct: 0 , transform: [{ scaleX: - 1 }], }, chevronBottomLeft: { position: "absolute" , bottom: - 20 , left: 0 , transform: [{ scale: - ane }], }, chevronBottomRight: { position: "absolute" , bottom: - twenty , right: 0 , transform: [{ scaleY: - 1 }], }, }); Magnifying Drinking glass
Border around a circle with a stick. Nothing to information technology.
const MagnifyingGlass = () => { render ( < View style ={ styles.magnifyingGlass } > < View fashion ={ styles.magnifyingGlassCircle } /> < View way ={ styles.magnifyingGlassStick } /> </ View > ); }; StyleSheet. create ({ magnifyingGlass: {}, magnifyingGlassCircle: { width: 100 , meridian: 100 , borderRadius: 50 , borderWidth: 15 , borderColor: "reddish" , }, magnifyingGlassStick: { position: "absolute" , right: - xx , bottom: - ten , backgroundColor: "cherry" , width: fifty , summit: ten , 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 way ={ styles.facebookBefore } /> < View fashion ={ styles.facebookAfter } /> < View manner ={ styles.facebookRedCover } /> </ View > </ View > ); }; StyleSheet. create ({ facebook: { width: 100 , meridian: 110 , }, facebookMain: { backgroundColor: "ruby" , width: 100 , height: 110 , borderRadius: v , borderColor: "scarlet" , borderTopWidth: 15 , borderLeftWidth: xv , borderRightWidth: 15 , borderBottomWidth: 0 , overflow: "hidden" , }, facebookRedCover: { width: 10 , top: xx , backgroundColor: "crimson" , position: "absolute" , right: 0 , top: 5 , }, facebookCurve: { width: fifty , borderWidth: xx , borderTopWidth: 20 , borderTopColor: "white" , borderBottomColor: "transparent" , borderLeftColor: "white" , borderRightColor: "transparent" , borderRadius: 20 , position: "absolute" , right: - 8 , summit: 5 , }, facebookBefore: { position: "absolute" , backgroundColor: "white" , width: xx , height: 70 , lesser: 0 , right: 22 , }, facebookAfter: { position: "accented" , width: 55 , pinnacle: 50 , meridian: twenty , backgroundColor: "white" , right: 5 , }, }); Moon
Box shadow...
Flag
The ane on css-tricks inferred a background, nosotros'll merely flip it around and say the center is transparent and the outer triangles are red.
const Flag = () => { return ( < View style ={ styles.flag } > < View way ={ styles.flagTop } /> < View style ={ styles.flagBottom } /> </ View > ); }; StyleSheet. create ({ flag: {}, flagTop: { width: 110 , height: 56 , backgroundColor: "red" , }, flagBottom: { position: "accented" , left: 0 , bottom: 0 , width: 0 , height: 0 , borderBottomWidth: xiii , borderBottomColor: "transparent" , borderLeftWidth: 55 , borderLeftColor: "red" , borderRightWidth: 55 , borderRightColor: "red" , }, }); Cone
Had to alter the css on this one a bit to get the same look, 70 => 55.
const Cone = () => { return < View fashion ={ styles.cone } />; }; StyleSheet. create ({ cone: { width: 0 , height: 0 , borderLeftWidth: 55 , borderLeftColor: "transparent" , borderRightWidth: 55 , borderRightColor: "transparent" , borderTopWidth: 100 , borderTopColor: "red" , borderRadius: 55 , }, }); Cantankerous
More of a plus then a cantankerous.
const Cross = () => { return ( < View fashion ={ styles.cross } > < View style ={ styles.crossUp } /> < View manner ={ styles.crossFlat } /> </ View > ); }; StyleSheet. create ({ cross: {}, crossUp: { backgroundColor: "reddish" , peak: 100 , width: twenty , }, crossFlat: { backgroundColor: "red" , height: 20 , width: 100 , position: "accented" , left: - 40 , summit: 40 , }, }); Base of operations
Base... Home .. Dwelling house Base, whichever withal.
const Base = () => { return ( < View style ={ styles.base } > < View style ={ styles.baseTop } /> < View style ={ styles.baseBottom } /> </ View > ); }; StyleSheet. create ({ base: {}, baseTop: { borderBottomWidth: 35 , borderBottomColor: "crimson" , borderLeftWidth: 50 , borderLeftColor: "transparent" , borderRightWidth: 50 , borderRightColor: "transparent" , height: 0 , width: 0 , left: 0 , summit: - 35 , position: "absolute" , }, baseBottom: { backgroundColor: "red" , height: 55 , width: 100 , }, }); Concluding
Wow what a fun waste material of time. Modeling React Native afterward the web spec is of course a great thought, I only wish it conformed a fiddling nicer on edge radius.
Besides I hate geometry now.
I'one thousand not posting the full code here considering it'due south but too long.
Source: https://codedaily.io/tutorials/The-Shapes-of-React-Native
0 Response to "Draw a Circle in React Native"
แสดงความคิดเห็น