Как я могу добиться дизайна ниже в React Native?

Используйте следующий стиль для вашего изогнутого вида,

curvedViewStyle: {
    borderRadius: window.width,
    width: window.width * 2,
    height: window.width * 2,
    marginLeft: -(window.width / 2),
    position: "absolute",
    bottom: 0,
    overflow: "hidden",
    backgroundColor: "red"
  },

и не забудьте добавить «окно» сверху, const window = Dimensions.get("window");

Чтобы получить круг, вам нужно создать квадрат (ширина === высота) и установить для свойства borderRadius значение, равное половине его ширины или высоты.

В твоем случае; вам нужно рассчитать значение для получения только 30% отображения нижней стороны (используйте отрицательный marginTop), а также рассчитать, как значение для обеспечения того, чтобы центр круга был таким же, как центр ширины экрана (используйте отрицательный поле слева). Ниже приведен пример этого.

render() {
    return (
      <View style = {myStyle.container}>
        <View style = {myStyle.top_background}>
          <View style = {myStyle.top_content}>
            <Text style = {myStyle.text1}>Hey there</Text>
            <Text style = {myStyle.text1}>WHAT'S UP</Text>
            <Text style = {myStyle.text1}>Doc'?</Text>
            <Text style = {myStyle.text2}>BUGS BUNNY</Text>
          </View>
        </View>
      </View>
    );
}

и таблица стилей

const sWidth  = Dimensions.get('window').width;
const sHeight = Dimensions.get('window').height;
const ratio   = sWidth / sHeight; //sWidth = ratio * sHeight
const myStyle = StyleSheet.create({
  container: {
    width: sWidth,
    height: sHeight,
    backgroundColor: '#fff'
  },
  top_background: {
    width: sHeight * 2,
    height: sHeight * 2,
    borderRadius: sHeight * 1,
    borderTopLeftRadius: 0,
    borderTopRightRadius: 0,
    backgroundColor: '#aaa',
    alignItems: 'center',
    marginLeft: ((ratio * sHeight) * 0.5) - (sHeight),
    marginTop: -sHeight * 1.7,
    paddingTop: sHeight * 1.7,
  },
  top_content: {
    paddingTop: sHeight * 0.02,
    width: sWidth,
    height: sHeight * 0.3,
    alignItems: 'center',
  },
  text1: {
    fontSize: 14,
    color: '#fff'
  },  
  text2: {
    marginTop: sHeight * 0.1,
    fontSize: 25,
    fontWeight: 'bold',
    color: '#fff'
  }
});

marginTop и paddingTop в top_background предназначены только для использования верхних 30% экрана и запускают содержимое в разделе, который можно увидеть на экране соответственно.

Вы можете добиться такого дизайна кривой, используя SVG. SVG предоставляет несколько элементов и их свойства (Прямоугольник, Круг, Линия, Полилиния, Многоугольник, G и т. д.). Вы можете настроить дизайн в соответствии с вашими потребностями.

https://www.npmjs.com/package/react-native-svg?activeTab=версии

import Svg,{ Circle } from 'react-native-svg';


<Circle 
       cx = {screenWidth / 2}
       cy = {`-${898 - headerHeight + 2}`} 
       r = "898.5" fill = "#87ceeb"
       stroke = "#87ceeb" 
      strokeWidth = "2" 
/>