For these kinds of unorthodox shapes, its better to make your own shapes with SVG and do animations with reanimated libraries. You will find a lot of similar works in GitHub.

This might actually help you, https://github.com/nomi9995/react-native-curved-bottom-tabbar it is not exactly your requirement but you will figure it out if you go through the code

This one too https://www.npmjs.com/package/react-native-curved-bottom-bar

There is such a thing called constraints which is the positioning of the elements on mobile devices, if you understand how that works it will be easier for you,https://developer.android.com/reference/androidx/constraintlayout/widget/ConstraintLayout. I know this is not the answer but the mobile styling is different from web, you can check this flexbox implementation too for reference: https://www.javatpoint.com/react-native-positioning-element-with-flex

try below steps.

1. create round view ( height = width, borderRadius=height/2)
2. add border with like 10-20 with border color
3. make it absolute and alignSelf to center.
4. new create new view for bottom bar with background color and height, width:'100%'
5. add rounded view after bar view and give ( bottom = <apropriate value to keep round little up )