How to make complicated designs like curved bottom tab bar in react native?

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 )