Giter VIP home page Giter VIP logo

Comments (4)

range-of-motion avatar range-of-motion commented on June 25, 2024 1

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.

range-of-motion avatar range-of-motion commented on June 25, 2024 1

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

from react-native-shadow-2.

SrBrahma avatar SrBrahma commented on June 25, 2024

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.

SrBrahma avatar SrBrahma commented on June 25, 2024

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)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.