I know there are some packages that let you create a blur view, but they all have sharp edges. There is also a blurRadius prop for the Image component, but it also renders an image with sharp edges.
How can I achieve a blurred image without sharp edges?
So I can achieve an effect like: https://www.invisionapp.com/blog/ios-10-style-shadows-sketch/
Related
In react native, devices with virtual navigation keys do not have any problems, while on phones with manual keys (e.g. Samsung A5,) the background and components are behind the bottom bar. When I give flex:1 or height:heightPercentageToDP(100) to my View, I have the same problem. how can i solve it? I'll be happy if you can help me.
i want to components and background start from the top of the bottom bar
You should add your code so it's easier to help you, or even an example screenshot to show your issue... but I will try to answer.
React Native has the Dimensions API which you can import in with your Views and Texts like so:
import { View, Text, Dimensions } from "react-native";
If you grab the height like this: const deviceHeight = Dimensions.get("window").height; using window as the param will give you the height excluding the bar you mentioned. Using screen there would provide the entire height.
You could use the windows Dimension to calculate any margin or padding you might need based on your use case.
I want to make the image like this.
Is there anything wrong with the css?
https://codesandbox.io/s/friendly-rubin-9gyne8?file=/src/App.tsx:0-3722
I'm building an image editor using NextJS, Konva and Redux. I've got a Redux state that saves data for each image, and then sends it down as 'data'. I want to let users crop images among other things.
this is a part of my image component. data, brightness, contrast and blur are sent from Redux
<>
<Image
ref={imageRef}
x={data.x}
y={data.y}
scaleX={data.scaleX}
scaleY={data.scaleY}
image={image}
width={data.width}
height={data.height}
filters={[Konva.Filters.Brighten, Konva.Filters.Contrast, Konva.Filters.Blur,]}
brightness={brightness ? brightness.value / 100 : 0}
contrast={contrast ? contrast.value : 0}
blurRadius={blur ? blur.value : 0}
I am able to modify things like brightness, width etc. without any problems but when I want to crop the image things don't work.
.
This is the Konva stage on the right and the crop button (among the others) on the left (separate react components)
When I click on crop a transformer appears that can be moved around
After someone clicks 'Save Crop' the image should be cropped based on the X, Y, width and height of that transformer.
I've tried to call layer.draw() and image.draw() after the cropping is over but to no avail. I've also using the 4 separate properties for cropping (cropX, cropY, cropWidth, cropHeight) but that didn't work either.
So how would I be able to update my image crop values with the image changing?
I am currently trying to transition through an array of images using webgl shaders and react three fiber and I am stuck. Trying to use buttons to navigate through rather than just clicking on the canvas. Unsure how to pass / change imageOne and imageTwo with left and right arrow. Is this possible?
I'm aware how to do an image slider in react alone but confused with the two image properties for the glsl mix property. All help is appreciated.
Inspiration: https://yuta-takahashi.dev/
Sandbox: https://codesandbox.io/s/snowy-cdn-os34di?file=/pages/index.js
I m using this package for the slider and I want to achieve gradient within the slider as shown in the image below how do I get this?
Firstly you cont pass gradient color as props. But you can pass component as the slider pip so
Create react native component from svg image by convert it using any online converter and push it as props.