This content originally appeared on DEV Community and was authored by Fatih Telis
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.
👋
This content originally appeared on DEV Community and was authored by Fatih Telis
Fatih Telis | Sciencx (2022-02-10T19:28:56+00:00) Better Shadow Generator for React Native 📱. Retrieved from https://www.scien.cx/2022/02/10/better-shadow-generator-for-react-native-%f0%9f%93%b1/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.