I use a React Native BlurView in my React Native project. I want to have a blur effect like in Adobe XD or Figma where the color stays the same, but everything which is under the view will get blurred.
When I apply the BlurView on my View I get this result:
If I change it to dark it looks like this:
But is there no way that the colors stay the same like this?:
Sadly there is no option to do this. If you use React Native Blur View there is no option where you can choose whether the blur should be dark or bright. Today there is not good library for blur in React Native. Maybe there will be a new in the future.
Try to add a style to your BlurView and then add it a backGround color.
I would set the brightest one and then a light grey with transparency.
Related
Is there any way to make grayscale color to all element underneath an overlay view? A look I want to achieve is something like below:
Please how do I properly change the default background color of app icon which is white to a one of my choice?
I'm using React-native 0.62
if your icon has already a white background you are not able to change that from the app,if you want to do that it need some complicated border detecting and then you can change it!, you need to modify changes outside of app, or just make its background transparent with Photoshop then use and give background to its parent.
i hope it helps
I saw a package for bottom navigation for Flutter which looks very nice.
Curved Navigation Bar (Flutter)
Basically, it will look like this
I am trying to replicate it in React Native (UI first, then will work on Animation) but not successful. Is it actually possible to replicate this in React Native?
The closest I can get is as shown in this image. However I used 4 different shapes positioned as absolute to achieve this.
This image differentiates the shapes I used (Gray, Orange, Red and Blue) to form the navigation bar.
Please advice me if there is a way to make this perfect (better without the workarounds like I did).
Thank you very much.
The close approach is to use Views like this.
Mask off the red part on yellow or do apply same background color to red. It will look like this.
Since I couldn't found how to mask it, I just applied background color to the red color View.
Then you can use animations and interpolation to move the entire shape on the click event.
And the final product will look like this.
I've published the same on https://www.npmjs.com/package/rn-curved-navigation-bar
Or you can check out and clone the project on github
There is library react-native-tabbar-interaction , you can have a try with it. Look similar as you need
i'm facing a problem in react native
Want to real image is clickable but should not click the alpha background. Please suggest me how can i do this.
In below image i used zIndex to placing the birds ,red color indicate the alpha area of above birdenter image description here
Unfortunately, there's no easy way to do this with React Native. The best solution I've found is by defining SVGs and using react-native-svg, which supports touch events. If you're using Expo, then it is already preinstalled and can be imported like import { Svg } from 'expo'; const { Circle, Rect } = Svg;.
Alternatively, you may be able to use a WebView (mirror) and CSS masking to achieve your desired result.
I'm adding a shadow to an image, and it works fine but I want the shadow to be gradient like in this picture (from dark to bright ) :
In the documentation shadow Props doesn't have such property, so is there any way to achieve it?
I'm not sure how Expo is doing it but we've used the react-native-linear-gradient for things like that
https://github.com/react-native-community/react-native-linear-gradient