Draw Circle React Native View
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 oasis't been on css-tricks check them out, Chris Coyier is fantastic!
Of course we have admission to react-art hither so drawing shapes is pretty simple but my goal is to run across if I can merely 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 simply about of them are all hacks in the commencement place!
I'yard going on vacation for a month. Then this shall be dubbed "Ane of the more than pointless blog posts on my web log written out of sheer tiredness".
Key Takeaways
- I wish edge-radius worked a little more like the web
- Box Shadow would be dainty to accept as well.
- Skew transform would exist a nice to accept.
- Just use SVGs...
Shapes
Square
Pretty simple...
const Foursquare = () => { return < View way ={ styles.square } />; }; StyleSheet. create ({ foursquare: { width: 100 , pinnacle: 100 , backgroundColor: "red" , }, }); Rectangle
Nothing too crazy here either
const Rectangle = () => { return < View style ={ styles.rectangle } />; }; StyleSheet. create ({ rectangle: { width: 100 * 2 , acme: 100 , backgroundColor: "red" , }, }); Circle
One note to mention about border radius is that information technology doesn't work like the web. So if you go more than 50% you lot'll start forming a weird diamondy shape.
const Circle = () => { render < View style ={ styles.circle } />; }; StyleSheet. create ({ circumvolve: { width: 100 , height: 100 , borderRadius: 100 / 2 , backgroundColor: "red" , }, }); Oval
Border radius wasn't working, lets just do a circle and scale information technology...
const Oval = () => { return < View style ={ styles.oval } />; }; StyleSheet. create ({ oval: { width: 100 , height: 100 , borderRadius: 50 , backgroundColor: "ruby" , transform: [{ scaleX: 2 }], }, }); Triangle Up
CSS border triangles still work in React Native.
const Triangle = () => { render < View style ={ [styles.triangle, this .props.manner] } />; }; StyleSheet. create ({ triangle: { width: 0 , height: 0 , backgroundColor: "transparent" , borderStyle: "solid" , borderLeftWidth: 50 , borderRightWidth: 50 , borderBottomWidth: 100 , borderLeftColor: "transparent" , borderRightColor: "transparent" , borderBottomColor: "cherry" , }, }); Here we get to cheat a chip. You could practise this on the web too, but rather than adjust the borders we'll but rotate it.
Triangle Down
const TriangleDown = () => { return < Triangle style ={ styles.triangleDown } />; }; StyleSheet. create ({ triangleDown: { transform: [{ rotate: "180deg" }], }, }); Triangle Left
const TriangleLeft = () => { return < Triangle manner ={ styles.triangleLeft } />; }; StyleSheet. create ({ triangleLeft: { transform: [{ rotate: "-90deg" }], }, }); Triangle Right
const TriangleRight = () => { return < Triangle style ={ styles.triangleRight } />; }; StyleSheet. create ({ triangleRight: { transform: [{ rotate: "90deg" }], }, }); Again nosotros'll cheat hither and get for the rotation!
Triangle Top Left
const TriangleCorner = () => { return < View style ={ [styles.triangleCorner, this .props.fashion] } />; }; 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 = () => { render < TriangleCorner fashion ={ styles.triangleCornerBottomLeft } />; }; StyleSheet. create ({ triangleCornerBottomLeft: { transform: [{ rotate: "270deg" }], }, }); Triangle Lesser Right
const TriangleCornerBottomRight = () => { render < TriangleCorner fashion ={ styles.triangleCornerBottomRight } />; }; StyleSheet. create ({ triangleCornerBottomRight: { transform: [{ rotate: "180deg" }], }, }); Curved Tail Arrow
Well nosotros don't take the power to do pseudo elements just they were just hacks anyway and so we'll just create a wrapping View with two elements and fashion them. At present this is not exactly the same, and it's partially due to the way border-radius are managed in react-native vs the spider web just it'southward closeish.
const CurvedTailArrow = () => { return ( < View style ={ styles.curvedTailArrow } > < View style ={ styles.curvedTailArrowTail } /> < View fashion ={ 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: ix , borderRightColor: "reddish" , borderStyle: "solid" , transform: [{ rotate: "10deg" }], position: "absolute" , lesser: 9 , correct: 3 , overflow: "visible" , }, curvedTailArrowTail: { backgroundColor: "transparent" , position: "absolute" , borderBottomColor: "transparent" , borderLeftColor: "transparent" , borderRightColor: "transparent" , borderBottomWidth: 0 , borderLeftWidth: 0 , borderRightWidth: 0 , borderTopWidth: three , borderTopColor: "ruby-red" , borderStyle: "solid" , borderTopLeftRadius: 12 , top: 1 , left: 0 , width: 20 , height: 20 , transform: [{ rotate: "45deg" }], }, }); Trapezoid
The difference with this 1 is we had to double our width. Why? I don't know.
const Trapezoid = () => { return < View style ={ styles.trapezoid } />; }; StyleSheet. create ({ trapezoid: { width: 200 , elevation: 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 fashion ={ styles.parallelogramRight } /> < View style ={ styles.parallelogramInner } /> < TriangleDown manner ={ styles.parallelogramLeft } /> </ View > ); }; StyleSheet. create ({ parallelogram: { width: 150 , summit: 100 , }, parallelogramInner: { position: "absolute" , left: 0 , summit: 0 , backgroundColor: "cerise" , width: 150 , height: 100 , }, parallelogramRight: { top: 0 , right: - l , position: "absolute" , }, parallelogramLeft: { acme: 0 , left: - l , position: "absolute" , }, }); Star (6-points)
These Triangles sure are coming in handy.
const StarSix = () => { render ( < View manner ={ styles.starsix } > < TriangleUp style ={ styles.starSixUp } /> < TriangleDown mode ={ styles.starSixDown } /> </ View > ); }; StyleSheet. create ({ starsix: { width: 100 , height: 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 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 , peak: 150 , }, starfiveTop: { position: "absolute" , top: - 45 , left: 37 , }, starfiveBefore: { backgroundColor: "transparent" , position: "absolute" , left: 0 , top: 0 , borderStyle: "solid" , borderRightWidth: 100 , borderRightColor: "transparent" , borderBottomWidth: seventy , borderBottomColor: "red" , borderLeftWidth: 100 , borderLeftColor: "transparent" , transform: [{ rotate: "35deg" }], }, starfiveAfter: { backgroundColor: "transparent" , position: "absolute" , elevation: 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 only we could accept used a Corner Triangle with rotate.
const Pentagon = () => { return ( < View style ={ styles.pentagon } > < View fashion ={ styles.pentagonInner } /> < View mode ={ styles.pentagonBefore } /> </ View > ); }; StyleSheet. create ({ pentagon: { backgroundColor: "transparent" , }, pentagonInner: { width: 90 , borderBottomColor: "red" , borderBottomWidth: 0 , borderLeftColor: "transparent" , borderLeftWidth: 18 , borderRightColor: "transparent" , borderRightWidth: 18 , borderTopColor: "cherry" , 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 = () => { render ( < View fashion ={ styles.hexagon } > < View style ={ 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" , lesser: - 25 , left: 0 , width: 0 , height: 0 , borderStyle: "solid" , borderLeftWidth: 50 , borderLeftColor: "transparent" , borderRightWidth: 50 , borderRightColor: "transparent" , borderTopWidth: 25 , borderTopColor: "red" , }, hexagonBefore: { position: "accented" , top: - 25 , left: 0 , width: 0 , height: 0 , borderStyle: "solid" , borderLeftWidth: 50 , borderLeftColor: "transparent" , borderRightWidth: l , borderRightColor: "transparent" , borderBottomWidth: 25 , borderBottomColor: "red" , }, }); Octagon
I attempted copied the css on this one but it required setting a groundwork color, so I did 4 bars and just rotated them. Slightly more markup just this is simply for fun.
const Octagon = () => { render ( < View style ={ styles.octagon } > < View way ={ [styles.octagonUp, styles.octagonBar] } /> < View style ={ [styles.octagonFlat, styles.octagonBar] } /> < View way ={ [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: "accented" , top: 0 , left: 0 , transform: [{ rotate: "-45deg" }], }, octagonRight: { position: "absolute" , peak: 0 , left: 0 , transform: [{ rotate: "45deg" }], }, }); Middle
This one is easy since well I already had information technology done for my previous tutorial.
const Heart = () => { return ( < View {... this .props } style ={ [styles.heart, this .props.fashion] } > < View style ={ styles.leftHeart } /> < View style ={ styles.rightHeart } /> </ View > ); }; StyleSheet. create ({ eye: { width: l , superlative: 50 , }, heartShape: { width: 30 , height: 45 , position: "absolute" , pinnacle: 0 , borderTopLeftRadius: 15 , borderTopRightRadius: 15 , backgroundColor: "#6427d1" , }, leftHeart: { transform: [{ rotate: "-45deg" }], left: 5 , }, rightHeart: { transform: [{ rotate: "45deg" }], right: 5 , }, }); Infinity
Width and edge radius all work oddly together. So baby infinity? Scale it upwardly 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: "accented" , acme: 0 , left: 0 , width: 0 , height: 0 , borderWidth: 20 , borderColor: "red" , borderStyle: "solid" , borderTopLeftRadius: l , borderTopRightRadius: 50 , borderBottomRightRadius: 50 , borderBottomLeftRadius: 0 , transform: [{ rotate: "-135deg" }], }, infinityAfter: { position: "absolute" , acme: 0 , right: 0 , width: 0 , top: 0 , borderWidth: xx , borderColor: "reddish" , borderStyle: "solid" , borderTopLeftRadius: 50 , borderTopRightRadius: 0 , borderBottomRightRadius: 50 , borderBottomLeftRadius: 50 , transform: [{ rotate: "-135deg" }], }, }); Diamond Square
This was more than than merely a rotated square. Am I missing something?
const Diamond = () => { return < View fashion ={ styles.diamond } />; }; StyleSheet. create ({ diamond: { width: fifty , height: fifty , backgroundColor: "ruddy" , transform: [{ rotate: "45deg" }], }, }); Diamond Shield
Only 2 triangles, idea this 1 was going to exist harder.
const DiamondShield = () => { return ( < View fashion ={ styles.diamondShield } > < View fashion ={ styles.diamondShieldTop } /> < View style ={ styles.diamondShieldBottom } /> </ View > ); }; StyleSheet. create ({ diamondShield: { width: 100 , summit: 100 , }, diamondShieldTop: { width: 0 , superlative: 0 , borderTopWidth: 50 , borderTopColor: "transparent" , borderLeftColor: "transparent" , borderLeftWidth: 50 , borderRightColor: "transparent" , borderRightWidth: 50 , borderBottomColor: "red" , borderBottomWidth: twenty , }, diamondShieldBottom: { width: 0 , pinnacle: 0 , borderTopWidth: 70 , borderTopColor: "crimson" , borderLeftColor: "transparent" , borderLeftWidth: l , borderRightColor: "transparent" , borderRightWidth: 50 , borderBottomColor: "transparent" , borderBottomWidth: 50 , }, }); Diamond Narrow
Another 2 triangles that could have been the same and rotated. This way works besides.
const DiamondNarrow = () => { render ( < View style ={ styles.diamondNarrow } > < View fashion ={ styles.diamondNarrowTop } /> < View mode ={ styles.diamondNarrowBottom } /> </ View > ); }; StyleSheet. create ({ diamondNarrow: { width: 100 , acme: 100 , }, diamondNarrowTop: { width: 0 , height: 0 , borderTopWidth: 50 , borderTopColor: "transparent" , borderLeftColor: "transparent" , borderLeftWidth: 50 , borderRightColor: "transparent" , borderRightWidth: fifty , borderBottomColor: "ruddy" , borderBottomWidth: 70 , }, diamondNarrowBottom: { width: 0 , height: 0 , borderTopWidth: seventy , borderTopColor: "scarlet" , borderLeftColor: "transparent" , borderLeftWidth: l , borderRightColor: "transparent" , borderRightWidth: 50 , borderBottomColor: "transparent" , borderBottomWidth: 50 , }, }); Cut Diamond
The meridian could have been used for the octagon, I chose a dissimilar 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: lxx , borderTopColor: "ruby" , borderLeftColor: "transparent" , borderLeftWidth: l , borderRightColor: "transparent" , borderRightWidth: 50 , borderBottomColor: "transparent" , borderBottomWidth: 0 , }, }); Egg
Round things are hard to practice in RN. This is eggish.
const Egg = () => { return < View manner ={ styles.egg } />; }; StyleSheet. create ({ egg: { width: 126 , height: 180 , backgroundColor: "red" , borderTopLeftRadius: 108 , borderTopRightRadius: 108 , borderBottomLeftRadius: 95 , borderBottomRightRadius: 95 , }, }); Pac-Man
This 1 is and then elementary but e'er then fun.
const PacMan = () => { return < View style ={ styles.pacman } />; }; StyleSheet. create ({ pacman: { width: 0 , height: 0 , borderTopWidth: 60 , borderTopColor: "red" , borderLeftColor: "red" , borderLeftWidth: sixty , borderRightColor: "transparent" , borderRightWidth: sixty , borderBottomColor: "red" , borderBottomWidth: 60 , borderTopLeftRadius: 60 , borderTopRightRadius: sixty , borderBottomRightRadius: 60 , borderBottomLeftRadius: sixty , }, }); 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: eighty , backgroundColor: "red" , borderRadius: 10 , }, talkBubbleTriangle: { position: "absolute" , left: - 26 , top: 26 , width: 0 , height: 0 , borderTopColor: "transparent" , borderTopWidth: 13 , borderRightWidth: 26 , borderRightColor: "blood-red" , borderBottomWidth: 13 , borderBottomColor: "transparent" , }, }); 12 Indicate Burst
I will acknowledge this i confused be a footling chip, then I realized it'southward merely a couple of rotated squares.
const TwelvePointBurst = () => { return ( < View manner ={ styles.twelvePointBurst } > < View style ={ styles.twelvePointBurstMain } /> < View style ={ styles.twelvePointBurst30 } /> < View mode ={ styles.twelvePointBurst60 } /> </ View > ); }; StyleSheet. create ({ twelvePointBurst: {}, twelvePointBurstMain: { width: 80 , pinnacle: 80 , backgroundColor: "red" , }, twelvePointBurst30: { width: fourscore , peak: 80 , position: "accented" , backgroundColor: "cherry-red" , height: 0 , correct: 0 , transform: [{ rotate: "30deg" }], }, twelvePointBurst60: { width: fourscore , height: 80 , position: "absolute" , backgroundColor: "red" , top: 0 , right: 0 , transform: [{ rotate: "60deg" }], }, }); 8 Point Outburst
Just similar the 12, only 1 less square and different rotations. Only thing here is because the pseudo chemical element was positionined relative to the first 20 degree rotation and ours isn't we'll just bump it upwardly to 155.
const EightPointBurst = () => { return ( < View style ={ styles.eightPointBurst } > < View style ={ styles.eightPointBurst20 } /> < View mode ={ styles.eightPointBurst155 } /> </ View > ); }; StyleSheet. create ({ eightPointBurst: {}, eightPointBurst20: { width: lxxx , pinnacle: 80 , backgroundColor: "ruddy" , transform: [{ rotate: "20deg" }], }, eightPointBurst155: { width: fourscore , height: 80 , position: "accented" , backgroundColor: "ruddy" , top: 0 , left: 0 , transform: [{ rotate: "155deg" }], }, }); Yin Yang
This 1 I don't similar because you tin't attain information technology without setting a background. Ohwell. Besides weird border issue causing outlines.
const YinYang = () => { return ( < View way ={ styles.yinyang } > < View style ={ styles.yinyangMain } /> < View style ={ styles.yinyangBefore } /> < View way ={ styles.yinyangAfter } /> </ View > ); }; StyleSheet. create ({ yinyang: {}, yinyangMain: { width: 100 , height: 100 , borderColor: "reddish" , borderTopWidth: 2 , borderLeftWidth: 2 , borderBottomWidth: 50 , borderRightWidth: 2 , borderRadius: l , }, yinyangBefore: { position: "absolute" , top: 24 , left: 0 , borderColor: "ruby-red" , borderWidth: 24 , borderRadius: 30 , }, yinyangAfter: { position: "accented" , tiptop: 24 , right: ii , backgroundColor: "crimson" , borderColor: "white" , borderWidth: 25 , borderRadius: 30 , }, }); Badge Ribbon
Remember, ever add backgroundColor: 'transparent' when yous are overlapping things.
const BadgeRibbon = () => { return ( < View style ={ styles.badgeRibbon } > < View style ={ styles.badgeRibbonCircle } /> < View style ={ styles.badgeRibbonNeg140 } /> < View mode ={ styles.badgeRibbon140 } /> </ View > ); }; StyleSheet. create ({ badgeRibbonCircle: { width: 100 , height: 100 , backgroundColor: "ruby-red" , borderRadius: 50 , }, badgeRibbon140: { backgroundColor: "transparent" , borderBottomWidth: lxx , borderBottomColor: "red" , borderLeftWidth: 40 , borderLeftColor: "transparent" , borderRightWidth: twoscore , borderRightColor: "transparent" , position: "absolute" , top: 70 , correct: - 10 , transform: [{ rotate: "140deg" }], }, badgeRibbonNeg140: { backgroundColor: "transparent" , borderBottomWidth: 70 , borderBottomColor: "red" , borderLeftWidth: 40 , borderLeftColor: "transparent" , borderRightWidth: twoscore , borderRightColor: "transparent" , position: "absolute" , top: 70 , left: - x , transform: [{ rotate: "-140deg" }], }, }); Infinite 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 way ={ 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 , top: 70 , backgroundColor: "red" , position: "absolute" , tiptop: - 26 , left: 39 , borderRadius: 35 , transform: [{ scaleX: 2 }, { scaleY: 0.5 }], }, tvscreenBottom: { width: 73 , height: 70 , backgroundColor: "red" , position: "absolute" , lesser: - 26 , left: 39 , borderRadius: 35 , transform: [{ scaleX: 2 }, { scaleY: 0.5 }], }, tvscreenLeft: { width: xx , acme: 38 , backgroundColor: "red" , position: "accented" , left: - seven , top: 18 , borderRadius: 35 , transform: [{ scaleX: 0.v }, { scaleY: 2 }], }, tvscreenRight: { width: 20 , height: 38 , backgroundColor: "cherry-red" , position: "absolute" , right: - 7 , top: 18 , borderRadius: 35 , transform: [{ scaleX: 0.v }, { scaleY: ii }], }, }); Chevron
Once again nosotros don't have skew, but we'll use triangles. Also magical negative scale to flip stuff around!
const Chevron = () => { return ( < View mode ={ styles.chevron } > < View style ={ styles.chevronMain } /> < View style ={ [styles.chevronTriangle, styles.chevronTopLeft] } /> < View mode ={ [styles.chevronTriangle, styles.chevronTopRight] } /> < View fashion ={ [styles.chevronTriangle, styles.chevronBottomLeft] } /> < View style ={ [styles.chevronTriangle, styles.chevronBottomRight] } /> </ View > ); }; StyleSheet. create ({ chevron: { width: 150 , height: 50 , }, chevronMain: { width: 150 , height: 50 , backgroundColor: "reddish" , }, chevronTriangle: { backgroundColor: "transparent" , borderTopWidth: 20 , borderRightWidth: 0 , borderBottomWidth: 0 , borderLeftWidth: 75 , borderTopColor: "transparent" , borderBottomColor: "transparent" , borderRightColor: "transparent" , borderLeftColor: "cerise" , }, chevronTopLeft: { position: "absolute" , top: - xx , left: 0 , }, chevronTopRight: { position: "accented" , tiptop: - 20 , right: 0 , transform: [{ scaleX: - 1 }], }, chevronBottomLeft: { position: "absolute" , bottom: - 20 , left: 0 , transform: [{ scale: - 1 }], }, chevronBottomRight: { position: "absolute" , bottom: - xx , right: 0 , transform: [{ scaleY: - 1 }], }, }); Magnifying Drinking glass
Edge around a circle with a stick. Nothing to it.
const MagnifyingGlass = () => { return ( < View style ={ styles.magnifyingGlass } > < View way ={ styles.magnifyingGlassCircle } /> < View style ={ styles.magnifyingGlassStick } /> </ View > ); }; StyleSheet. create ({ magnifyingGlass: {}, magnifyingGlassCircle: { width: 100 , height: 100 , borderRadius: 50 , borderWidth: fifteen , borderColor: "red" , }, magnifyingGlassStick: { position: "absolute" , correct: - 20 , lesser: - 10 , backgroundColor: "blood-red" , width: fifty , height: x , transform: [{ rotate: "45deg" }], }, }); Facebook Icon
This ane seems appropriate merely couldn't get information technology to work well. I attempted it and failed.
const Facebook = () => { render ( < View style ={ styles.facebook } > < View style ={ styles.facebookMain } > < View style ={ styles.facebookCurve } /> < View manner ={ styles.facebookBefore } /> < View manner ={ styles.facebookAfter } /> < View manner ={ styles.facebookRedCover } /> </ View > </ View > ); }; StyleSheet. create ({ facebook: { width: 100 , height: 110 , }, facebookMain: { backgroundColor: "scarlet" , width: 100 , height: 110 , borderRadius: 5 , borderColor: "cerise" , borderTopWidth: fifteen , borderLeftWidth: 15 , borderRightWidth: 15 , borderBottomWidth: 0 , overflow: "subconscious" , }, facebookRedCover: { width: x , height: 20 , backgroundColor: "red" , position: "absolute" , correct: 0 , height: 5 , }, facebookCurve: { width: 50 , borderWidth: 20 , borderTopWidth: 20 , borderTopColor: "white" , borderBottomColor: "transparent" , borderLeftColor: "white" , borderRightColor: "transparent" , borderRadius: 20 , position: "absolute" , right: - eight , peak: v , }, facebookBefore: { position: "absolute" , backgroundColor: "white" , width: 20 , peak: 70 , bottom: 0 , right: 22 , }, facebookAfter: { position: "absolute" , width: 55 , top: fifty , superlative: 20 , backgroundColor: "white" , correct: 5 , }, }); Moon
Box shadow...
Flag
The one on css-tricks inferred a background, we'll only flip information technology 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 , acme: 56 , backgroundColor: "ruby" , }, flagBottom: { position: "absolute" , left: 0 , bottom: 0 , width: 0 , summit: 0 , borderBottomWidth: thirteen , borderBottomColor: "transparent" , borderLeftWidth: 55 , borderLeftColor: "red" , borderRightWidth: 55 , borderRightColor: "red" , }, }); Cone
Had to modify the css on this one a bit to become the same look, 70 => 55.
const Cone = () => { return < View way ={ styles.cone } />; }; StyleSheet. create ({ cone: { width: 0 , summit: 0 , borderLeftWidth: 55 , borderLeftColor: "transparent" , borderRightWidth: 55 , borderRightColor: "transparent" , borderTopWidth: 100 , borderTopColor: "red" , borderRadius: 55 , }, }); Cross
More than of a plus then a cantankerous.
const Cross = () => { render ( < View style ={ styles.cross } > < View style ={ styles.crossUp } /> < View way ={ styles.crossFlat } /> </ View > ); }; StyleSheet. create ({ cross: {}, crossUp: { backgroundColor: "cerise" , summit: 100 , width: 20 , }, crossFlat: { backgroundColor: "red" , height: 20 , width: 100 , position: "absolute" , left: - xl , top: xl , }, }); Base
Base of operations... Home .. Home Base of operations, whichever however.
const Base = () => { return ( < View manner ={ styles.base of operations } > < View style ={ styles.baseTop } /> < View manner ={ styles.baseBottom } /> </ View > ); }; StyleSheet. create ({ base: {}, baseTop: { borderBottomWidth: 35 , borderBottomColor: "ruddy" , borderLeftWidth: fifty , borderLeftColor: "transparent" , borderRightWidth: 50 , borderRightColor: "transparent" , height: 0 , width: 0 , left: 0 , peak: - 35 , position: "absolute" , }, baseBottom: { backgroundColor: "ruby-red" , height: 55 , width: 100 , }, }); Final
Wow what a fun waste matter of fourth dimension. Modeling React Native after the spider web spec is of course a neat 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 considering it's simply too long.
Source: https://www.codedaily.io/tutorials/The-Shapes-of-React-Native
0 Response to "Draw Circle React Native View"
Post a Comment