Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Shadow solution #635

Closed
rares-lupascu opened this issue Mar 23, 2018 · 11 comments
Closed

Shadow solution #635

rares-lupascu opened this issue Mar 23, 2018 · 11 comments

Comments

@rares-lupascu
Copy link

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
@msand
Copy link
Collaborator

msand commented Mar 24, 2018

Currently filters aren't supported, thus drop shadows don't work either. I've just used raster shadows as a workaround for now.

@noahtallen
Copy link

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!

@msand
Copy link
Collaborator

msand commented Apr 4, 2018

It would require implementing the filter attribute, filter element and the filter primitives, or at least feGaussianBlur, feOffset, feMerge and feMergeNode.
https://www.w3.org/TR/SVG/filters.html#AnExample

@msand
Copy link
Collaborator

msand commented Dec 9, 2018

Work on filters tracked here: #150

@msand msand closed this as completed Dec 9, 2018
@terrorpixel
Copy link

terrorpixel commented Jun 29, 2020 •
edited
Loading

My solution was to use foreignobject inside my SVG object:
https://github.com/react-native-community/react-native-svg#foreignobject

With foreignobject you can place a View with a regular shadow style.

@sa8ab
Copy link

sa8ab commented Jul 22, 2020

@terrorpixel Can you provide an example please?

@bleedingAyush
Copy link

bleedingAyush commented Jun 7, 2021 •
edited
Loading

I think this should work

shadowColor: "#000",
shadowOffset: {
	width: 0,
	height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 3.84,

The above code can be used to implement the box shadow property in react native.

@jstheoriginal
Copy link

I think this should work

shadowColor: "#000",
shadowOffset: {
	width: 0,
	height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 3.84,

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 elevation, which is a number and no color/other options.

@yamankatby
Copy link

My solution was to use foreignobject inside my SVG object:
https://github.com/react-native-community/react-native-svg#foreignobject

With foreignobject you can place a View with a regular shadow style.

But the shadow will not take the shape of the SVG

@byteab
Copy link

byteab commented Oct 25, 2021 •
edited
Loading 

// 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
https://ethercreative.github.io/react-native-shadow-generator/

Customizing shadow in android is not as flexible as in ios, but you can use SVG as a shadow in react native.
please have a look at this
https://github.com/879479119/react-native-shadow/blob/master/lib/BoxShadow.js
there is also an npm package for this
https://github.com/SrBrahma/react-native-shadow-2

@jakex7 jakex7 mentioned this issue Jun 28, 2024
Merged
3 tasks
jakex7 added a commit that referenced this issue Jul 11, 2024
@jakex7
feat: filters support FeColorMatrix and FilterImage (#2316)
08e9207 
# 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>
  );
};
```

![image](https://github.com/software-mansion/react-native-svg/assets/39670088/c36fb238-95f4-455d-b0aa-2a7d4038b828)

## 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,
  },
});
```


![image](https://github.com/software-mansion/react-native-svg/assets/39670088/666ed89f-68d8-491b-b97f-1eef112b7095)

## 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)
@sayan-avantai
Copy link

sayan-avantai commented Jul 11, 2024 •
edited
Loading 

const AnimatedCircle2 = Animated.createAnimatedComponent(Circle);

<AnimatedCircle2
          cx={100}
          cy={100}
          r={24}
          stroke='rgba(0,0,0,0.3)'
          strokeWidth={4}
          strokeLinecap="round"
          fill="rgba(0,0,0,0.3)"
          opacity={1}
        />
        <AnimatedCircle2
          cx={100}
          cy={100}
          r={22}
          stroke='#fff
          strokeWidth={1}
          strokeLinecap="round"
          fill="#fff"
          opacity={1}
        />

create two separate same shapes and then overlap with each other. this is the current solution.

@jakex7 jakex7 mentioned this issue Jul 23, 2024
Open
13 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
10 participants
@terrorpixel @msand @rares-lupascu @jstheoriginal @noahtallen @yamankatby @byteab @sa8ab @bleedingAyush @sayan-avantai