Para este tipo de formas poco ortodoxas, es mejor crear sus propias formas con SVG y hacer animaciones con bibliotecas reanimadas. Encontrarás muchos trabajos similares en GitHub.

Esto realmente podría ayudarlo, https://github.com/nomi9995/react-native-curved-bottom-tabbar no es exactamente su requisito, pero lo descubrirá si revisa el código

Este también https://www.npmjs.com/package/react-native-curved-bottom-bar

Existe una cosa llamada restricciones que es el posicionamiento de los elementos en los dispositivos móviles, si comprende cómo funciona, será más fácil para usted, https://developer.android.com/reference/androidx/constraintlayout/widget/ConstraintLayout . Sé que esta no es la respuesta, pero el estilo móvil es diferente al de la web, también puede consultar esta implementación de flexbox como referencia: https://www.javatpoint.com/react-native-positioning-element-with-flex

intente los pasos a continuación.

1. crear una vista redonda (alto = ancho, borderRadius = alto/2)
2. agregar borde con 10-20 con color de borde
3. hazlo absoluto y alignSelf al centro.
4. nuevo crear una nueva vista para la barra inferior con color de fondo y altura, ancho: '100%'
5. agregue una vista redondeada después de la vista de barra y proporcione (inferior = <valor apropiado para mantener el redondeo un poco hacia arriba)