Comments (9)
Interesting, when I tried paint inside before I did not expect it to be underneath the background-color
. But it does appear to give the result I'm looking for.
It's worth noting that I imagine you should be able to resolve this because the behavior is identical across android,iOS, and web, so I don't think it's just caused by a difference in the internal react-native or web-specific engines. Strangely in our implementation it is identical across iOS/Android/web but in the snack it is not. Possibly caused by some of our nested views in the local implementation. Or potentially something with expo 49, but for some reason there are errors running it on expo 49 in the snack...
I will give your solution a try and see how it works in our environment. Cheers
from react-native-shadow-2.
Is it iOS?
from react-native-shadow-2.
Also, please provide me a reproducible example in Expo Snack
from react-native-shadow-2.
Web, iOS, and Android. I'll hopefully be able to work on a snack for you soon.
from react-native-shadow-2.
Hi @SrBrahma I found the time to create a snack that exhibits the issue.
The modal is opened with transparent={true}
on top of a view that has a red background. You can clearly see the red leaking through on the edges of the modal before the shadow begins. See accompanying screenshots.
Let me know what you think or if there is another way I can help you out with this.
from react-native-shadow-2.
The thing is that the borderRadius is handled differently by React Native styles and the SVG engine, and that engine depends on the platform.
In that example, you can put the View with the white background as a child of the Shadow component, and change the paintInside to true. This way, any gap caused by the different borderRadiuses will just have the Shadow color filling it; the red won't be visible between the two components.
from react-native-shadow-2.
Also, in your example, you can just simply put that white background color inside the style
property of the Shadow instead of having it on the wrapping View, together with the paintInside=true.
from react-native-shadow-2.
The solution you mentioned has worked for us and we've gone ahead with that for now.
I wish there was some way I could have guessed this behavior and come up with the solution on my own. I did try paintInside={true}
but saw that it covered the whole of the component and did not expect that setting a background would paint the background on top of the shadow :/
Thanks again for your help. Maybe this would be worth adding to the FAQ section?
from react-native-shadow-2.
I believe the reason it covered the whole component is because the white background you had was caused by the parent component, so the child component is rendered after the parent, that's why the paintInside was on top of the parent's background.
Any idea how to write about that on the README? Either on FAQ or on the paintInside/style props description.
from react-native-shadow-2.
Related Issues (20)
- How to convert Figma design with box-shadow HOT 4
- Web can't support more than 1 shadow. HOT 2
- Not able to apply shadow on Pressable HOT 4
- Bug: The argument must be a React element, but you passed null with & weird behavior in corners - newest version HOT 17
- Support multiple children and follow shape of SVG HOT 1
- Have tried to use this lib, but I can't. What am doing wrong? HOT 5
- [Fixed in v13.6.0] Incompatible with react-native-svg v13.5.0 HOT 5
- On IOS, setting distance=0 does not work properly HOT 2
- Border radius problem HOT 2
- x-axis offset not working as expected (iOS) HOT 1
- could you provide a new prop `blur`? HOT 3
- X offset not working on IOS HOT 1
- Inner shadow HOT 4
- Issue with borderRadius in the latest version 7 when size of the elements changes HOT 5
- Unable to find an element with testID HOT 3
- Can I do this effect with this library? HOT 1
- Sides and corners HOT 2
- Fail to compile on web "Support for the experimental syntax 'jsx' isn't currently enabled" HOT 3
- Android
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-native-shadow-2.