One of the most loved (and feared) facets of React Native is how easily it enables you to achieve consistent UI across platforms. This enables you to create truly unique experiences in a snap with confidence that it will work beautifully and be performant on all devices.
If you've checked Dribbble any time in the past few years, you would have noticed a strong design trend: shadows. Shadows/elevation are key to creating a cutting-edge UI, but React Native doesn't make it that easy for you. RN uses the native elevation prop on Android, and for iOS, you have to set a style configuration consisting of opacity, offset, color, and radius. To solve this issue, I used react-native-elevated-view. This worked well, but it had a few problems: it wasn't touchable, could only support elevation levels 1-5, and didn't generate any feedback.
So, on a cool Sunday morning in Baltimore, I decided to write my own solution. I whipped out my TI-84 and ran a linear regression on the 5 provided levels of elevation supported in the prior package. Using this, I was able to generate the elevation styles needed for any X value. And it works on both platforms!
Yeah, high school math does come in handy sometimes.
To bring the concept further, I tried to make the component more transparent, exposing the press props. This got rid of the need to wrap my views in touchables like I needed to with the other library. I also added its own feedback mode, which allows the user to configure the shadow to diminish or expand when interacted with, which leads to really cool effects. Also on iOS, you can change the color of your shadow to be whatever you please.
I'd like to thank the author of react-native-elevated-view for inspiring my work and to congratulate him for landing calculated iOS styles into his component recently.
You can check out my library here, and I'd love if you'd throw a star on the GitHub repo here.
You can find me on Twitter @fiber_god, so feel free to hit me up there if you want to chat.
Thanks for reading!