How to detect if screen has rounded corners in react-native

Question

How can I detect whether device screen has rounded corners and also estimate the radius of the corners (if possible) ?

I want to modify my view more typically cardview to adapt these screens. I have successfully retrieved the screen width and height by using Dimensions

width: Dimensions.get('window').width,
height: Dimensions.get('window').height

I am not able to adapt my parent view according to the curves at 4 corners with above approach. If I give static radius to the parent view it give bad look & feel on rectangular screens and it's not acceptable.

One approach I thought of is generate a list of all devices with rounded corners and apply border radius to only these devices. But it's harder to maintain the list and adapt the list with newcomers in the market.

Can anyone help me with it ? Any sort of approach or guideline will really help me. Thank you in advance

Answer 1

After struggling with it, I came with a much easier solution that why shouldn't I ask user whether he/she has rounded cornered screen when the app starts first time and later giving an option in settings under my app to change whenever user wanted.

I stored user's selection in local storage and modified my view based on that flag. Now I don't have to maintain a list of all devices instead it will cover all use cases.

Answer 2

Currently there is no option to get corner radius from Dimensions. There is only 4 values in Dimensions object given below.

{ width: 384, height: 592, scale: 2, fontScale: 1 }

Answer 3

Even if you have answered and accepted your own answer already, it is not really a solution for the original post.

I think basically all phones with notches have round corners while devices without notches typically do not have round corners. If you have notches, you have an inset in your Safe Area. If you are using react-native-safe-area-context for example, you can get the insets with

const insets = useSafeAreaInsets();
const hasNotch = insets.top || insets.bottom || insets.right || insets.left;