Comments (5)
Please try the given alternatives and give me your feedback. Depending on how they go, I can improve the support for Animations.
from react-native-shadow-2.
Hi, I don't know if it's possible for SVG. I've found the package react-native-svg-animations, but it seems it only supports SVG's Path component, not Rect etc that we also use. We can't use Path at some parts as we use '%' sizes for the first render.
What you may try is to have your bar as an Animated.View and wrap it with the Shadow. Ain't certain if it would work, but maybe it does, although with a delay. You may try also to comment those two lines in the package .js files:
react-native-shadow-2/src/index.tsx
Lines 487 to 488 in ce32eea
Commenting them, the Shadow would use '100%' width and height instead of pixel perfect acquired via onLayout at each render. In theory this would make the Shadow have the same size of your animated Children in the same render, although eventually it may happen some very tiny artifacts between sides and corners (that certainly wouldn't be visible in your case) as % sizing and positioning isn't exact. You should try this, anyway.
What maybe could also work is if you have a width state that increased over the time. If I am not mistaken Animated or Reanimated have something like this to be used without having an Animated component. (maybe this?)
I don't have yet much experience with animations, so I don't think I can help further than that.
from react-native-shadow-2.
Sure, I'm busy now with other stuff, but I will try asap, and I will put the results here.
from react-native-shadow-2.
In your time!
from react-native-shadow-2.
Closed due to inactivity
from react-native-shadow-2.
Related Issues (20)
- 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
- SVGs in corners with border radius are not aligned properly HOT 9
- I'm using react-native-shadow-2 but it's weirdly slow when switching to screen ? HOT 2
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.