Comments (4)
So what you're saying is, I can use this today and I don't need to specify a fixed width or height? Because if that's the case, my man you are dope.
from react-native-shadow-2.
Yup, confirmed. This package is useable today, thank you! 🙏
from react-native-shadow-2.
Hey! Nice discovery of this lib :) hehe
I am already using it in prod, working nice. I only need to write the README when I have the will to do it.
It uses Typescript. You can just import it, wrap your desired component, and follow Intellisense hints to use it. The props are JSDoc'ed.
Here is my code to have two buttons, one at each bottom corner of the screen. For basic usage, like shadows all around the component, its usage is much simpler. For now, only startColor and distance props are required. Maybe I can even give them a default value.
const ButtonShadow: React.FC<{side: 'left' | 'right'}> = ({ children, side }) => (
<Shadow
distance={12}
startColor='#00000012'
containerViewStyle={{ flex: 1 }}
contentViewStyle={{ flex: 1 }}
radius={{ ...(side === 'left') ? {
topRight: buttonBorderRadius
} : {
topLeft: buttonBorderRadius
} }}
corners={[side === 'left' ? 'topRight' : 'topLeft']}
sides={['top', side === 'left' ? 'right' : 'left']}
>
{children}
</Shadow>
);
As you can see, it's like the react-native-shadow, but with more possibilities (mainly to increase performance by not creating out of screen shadows)
from react-native-shadow-2.
Unlike to react-native-shadow, this one doesn't require inputting the component size, it will get the component size onLayout and then apply the shadow (1 render to apply it). It can be instantly applied if inputting the component size.
During its dev, I had an idea to apply the shadow on the same render and with automatic sizing, but requires further research.
from react-native-shadow-2.
Related Issues (20)
- 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
- the shadow can not as same as web css 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.