React Native: How to create a circular image with border and shadow

I needed to tailor icons to look like the image in the above title picture for a React App. After fiddling with the React components’ properties for a while, it turned out not to be an easy task. When trawling through some discussion boards, I found many related topics describing different approaches, but none of them seemed to work. So, after some more research plus trial and error, I got it looking pretty similar on iOS, Android, as well as in a browser-view.

Cumbersome, but it works

An image needs to be nested within two view-components because the style-properties can’t be assigned altogether to a single object.
One view is required for shaping since ‘borderRadius’ can’t be applied to the image-component directly.
Another view-component encapsulates the view/image compound to drop the shadow. Applying the shadow-props to the first container doesn’t work. The effect won’t show up then since the shadow gets cropped by the radius setting.

Unfortunately, the shadow-props do not work on Android devices. Still, one can use the elevation property instead, which affects the z-order to create a drop shadow, using Android’s underlying elevation API.
But since the opacity- and offset-values do not have any impact, the shadow effect on Android doesn’t look as neat as on iOS.

Try it out right away

I have created an Expo-Snack, where you can change the code directly to see how it affects an image’s look on the different platforms.