I am pretty new to react native, and I want to create a weirdly shaped Hexagon. I tried looking up how I would do that, but the only things I could find are examples of polygons made on google maps. And I am not interested in that.
This is an example of the kinda polygon I want to add in my app:
this would is the css of the polygon:
clip-path: polygon(36% 0, 100% 0, 100% 50%, 64% 100%, 0 100%, 0 45%);
How can I create this polygon in react native?
Thank you in advance!
Related
const array_data = [{x:12,y:13,duration:1,type:"point"},{x:14,y:16,duration:3,type:"point"},{x:20,y:20,duration:3,type:"point"},{x:55,y:55,duration:1,type:"point"},{x:55,y:55,duration:1,type:"circle"}]
I want to draw these points like animation. So that as it will start start draw from
array_data[0] and draw till last length of the array. Also signify what it has to draw like point, line ,circle, eclipse. I tried with redraw library and animated view library but not able to get how can i achieve this animation.
Let me know if anybody have a good idea to get this in react native. Thanks for your time and give some good suggestions.
I have google Map. in react native Now I want to draw circle on any location I want with 2km radius and I also want to draw line from on location to another location. is possible. if yes please tell me how.
I'm using the react-native-linear-gradient package to form a linear gradient. I've picked the exact same colors with color picker in XD design to form the same gradient in my app. Here is my code:
<LinearGradient start={{x:0,y:0}} end={{x:1,y:1}} style={StyleSheet.absoluteFill} colors={['#D300B5', '#FF5400']} >...
These hex values are the same values with the design, yet, here is the result compared with the design:
The colors are significantly washed out. I've checked the opacities to make sure everything is at 100%, there aren't anything over the gradient, the gradient view isn't extending beyond the screen, both XD, my Mac, and the iPhone X use the Display P3 color space.
Why are the colors washed out?
Note: This solution is iOS-only and applies to all colors used in app.
After a long time of not being able to find out anything, I've created a patch of React Native itself, as the problem originates from how React Native creates colors itself in native code in RCTConvert.m:
return [UIColor colorWithRed:... green:... blue:...]
Switching both occurances (there are two as of writing) of colorWithRed to colorWithDisplayP3Red and rebuilding (don't forget as we're changing native code, hot reloading won't work) the app worked: Colors are now rendered in P3 color space. Please note that this approach changes all colors that you create/use in app, so every color will basically look more crisp.
I'm building weather app and want to do this blur at the end of View of hour forecast, I've tried to use linear gradient, but I wasn't able to figure out, how to do that.
Thanks in advice :)
There is showed that blur, that I want to achieve. https://imgur.com/a/LZ4Rv6b
I've tried react-native-linear-gradient, but I didn't figure out, making that with this library.
I'm using react-native-svg to create such effect in my app.
Just use the LinearGradient to create a view with gradient fill of your blue with different stopOpacity values
I'm working on simple side project and small part of it is rendering a terrain. I'm rendering the terrain using height map information. But here is my problem:
I would like to render just a silhouette/outline of the terrain/horizon. Here is screenshot from my app rendering height map:
And here is screenshot similar to desired result from peakfinder.org:
I would like to draw just lines representing silhouette of terrain with the rest transparent or solid colour. How can I solve it? Calculate local maximum somehow?
I created sample project here, in case you want to help me.
Thanks!