Better Shadow Generator for React Native 📱

Hi everyone,

I was working on a React Native project some time ago and I needed a box shadow generator which will give the same result both on iOS and Android for different elevations. There are very few online tools doing this and they do not give similar results on all cases for both platforms.

As a frontend developer who is actively coding an online toolbox (10015.io), this pushed me to develop a better shadow generator for React Native.

Here you can see the React Native shadow generator I developed.

👉 https://10015.io/tools/react-native-shadow-generator

The main problem on other tools is: in Android, opacity of the box shadow is decreased exponentially when you increase the elevation. All other tools make a lineer interpolation, so when you increase the elevation, box shadow looks darker in iOS with respect to Android. I solved this problem by setting the opacity exponentially, and it gives far more better results on both platforms for both low and high elevations.

Here you can see a sample code for style props generated by the tool.

shadowColor: "#000000",
shadowOffset: {
  width: 0,
  height: 3,
},
shadowOpacity:  0.17,
shadowRadius: 3.05,
elevation: 4

If you are a React Native developer, I will be grateful if you give me feedback about the results.

👋