The king is dead, long live the king

[range-of-motion]

Thanks for attempting to build from the remains of react-native-shadow.

Can this library already be used? What's the latest news?

[SrBrahma]

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)

[SrBrahma]

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.

[range-of-motion]

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.

[range-of-motion]

Yup, confirmed. This package is useable today, thank you! 🙏