Shadow solution #635
Comments
|
Currently filters aren't supported, thus drop shadows don't work either. I've just used raster shadows as a workaround for now. |
|
If one was to look into creating a PR to support shadows, where would they begin? As outlined in many previous issues, this would be a great feature! |
|
It would require implementing the filter attribute, filter element and the filter primitives, or at least feGaussianBlur, feOffset, feMerge and feMergeNode. |
|
Work on filters tracked here: #150 |
|
My solution was to use foreignobject inside my SVG object: With foreignobject you can place a View with a regular shadow style. |
|
@terrorpixel Can you provide an example please? |
|
I think this should work The above code can be used to implement the box shadow property in react native. |
These 4 properties only work on iOS, in case anyone sees this. Android only supports |
But the shadow will not take the shape of the |
// for ios
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 3.84,
// for android
elevation: 5,you can use this website to generate your desired shadow Customizing shadow in android is not as flexible as in ios, but you can use SVG as a shadow in react native. |
# Summary Introducing the long-awaited **Filters** in `react-native-svg` 🎉 ### Motivation This PR is the beginning of bringing support of SVG Filters into `react-native-svg`. * **related issues**: This PR series will address the following issues: #150, #176, #635, #883, #994, #996, #1216 * **feature overview**: This PR is a boilerplate for Filters * introducing `Filter` component and `FeColorMatrix` as a start. * It also introduces a new subdirectory called `react-native-svg/filter-image` with a `FilterImage` component. # Usage ## Filter and Fe... Filters are compatible with the web familiar standard, so most things should be compatible out-of-the-box and changes will be limited to using a capital letter as it's component. ### Example ```tsx import React from 'react'; import { FeColorMatrix, Filter, Rect, Svg } from 'react-native-svg'; export default () => { return ( <Svg height="300" width="300"> <Filter id="myFilter"> <FeColorMatrix type="saturate" values="0.2" /> </Filter> <Rect x="0" y="0" width="300" height="300" fill="red" filter="url(#myFilter)" /> </Svg> ); }; ```  ## Filter Image `FilterImage` is a new component that is not strictly related to SVG. Its behavior should be the same as a regular `Image` component from React Native with one exception - the additional prop `filters`, which accepts an array of filters to apply to the image. ### Example ```tsx import React from 'react'; import { StyleSheet } from 'react-native'; import { FilterImage } from 'react-native-svg/filter-image'; const myImage = require('./myImage.jpg'); export default () => { return ( <FilterImage style={styles.image} source={myImage} filters={[ { name: 'colorMatrix', type: 'saturate', values: 0.2 }, { name: 'colorMatrix', type: 'matrix', values: [ 0.2, 0.2, 0.2, 0, 0, 0.2, 0.2, 0.2, 0, 0, 0.2, 0.2, 0.2, 0, 0, 0, 0, 0, 1, 0, ], }, ]} /> ); }; const styles = StyleSheet.create({ image: { width: 200, height: 200, }, }); ```  ## Test Plan **Example App**: Updated the example app with various filter effects, showcasing real-world usage. ## Compatibility | OS | Implemented | | ------- | :---------: | | iOS | ✅ | | Android | ✅ | ## Checklist - [x] I have tested this on a device and a simulator - [x] I added documentation in `README.md` and `USAGE.md` - [x] I updated the typed files (typescript)
create two separate same shapes and then overlap with each other. this is the current solution. |
Hi everyone
I read almost all the opened and closed issues related to dropping shadows ...
They are pretty old so is there any recommended way to do this? if not how would one go about doing that?
thanks
The text was updated successfully, but these errors were encountered: