NPM Package

[ftzi]

I use regularly this site to have similar looks in iOS and Android. However, would be nicer to have a npm package and to just

StyleSheet.create({
  container: {
    ...shadow(5)
  }
};

instead of having all those lines that are painful to look at and to change (open browser, find the site, copy paste into the code, delete all if changing...).

I suggest you to create this package, or I can do it myself if you allow me to.

Thanks!

[Tam]

Feel free to do whatever you want (I forgot I made this)!

[ftzi]

Opening for discussions and for future references, if anyone is interested and as this repo have >100 stars:

I have made a linear regression (to have a y = ax + b) for the shadow opacity and radius proportional to the elevation, and manually ajusted it, having a <3 % error for the values. While the results are good and very fast to be obtained, looks like the width and height of the component changes the visual effects for Android and iOS.

Also, from what I tested in Expo Snack, looks like that the y-pos of the component in Android also changes the elevation effect (the shadow gets stronger as it gets closer to the bottom, and almost disappear when on top). To have a equivalent effect in iOS, it would require a constant re-render to change the style values on y new value. If I keep developing it, I will probably ignore initially this dynamic Y behaviour.

Maybe for Android to handle this y-related shadow, if being the y constant, there could be a 'static' parameter option, so the returning elevation prop could be relative to the given y, so the results would be more predictable when inputting the first parameter of the shadow().

If using all parameters, it would look like this:

StyleSheet.create({
  container: {
    ...shadow(5, {h: 20, w: 100, y: 400, static: true})
  }
};

If any is omitted, would use some default value.

This y is even more problematic: is it proportional to the screen height or use absolute values? Also, it would need to be get from the component a render before, or previously calculated.

It isn't an easy problem. Maybe it's better to just use something like https://www.npmjs.com/package/react-native-shadow that uses svg or something else that doesn't uses the elevation/iOS shadow.

Edit: Also, in https://ethercreative.github.io/react-native-shadow-generator/, the height prop value is the half of the given elevation. Having a, for example, 8 height component with 24 elevation, the shadow in iOS would start 4 units below (24/2+8) the component. That's a reason the height of the component is important to be known. Math.floor(Math.min(height/2, elevation/2)) for the shadow height resolves this.

[ftzi]

I've made some time ago the following package: https://github.com/SrBrahma/react-native-shadow-2