Как изогнуть линию в React Native

Question

Как мне добиться кривой линии в react native. вот так

Я попробовал радиус границы, но не смог добиться такого результата. Спасибо.

Answer 1

Вот как вы можете получить изогнутую линию в react-native.

<View style={{ marginTop: 100 }}>
  <View style={styles.container} />
  <View style={styles.curvedLine} />
</View>

const styles = StyleSheet.create({
  container: {
    width: "100%",
    height: 75,
    borderRadius: 12,
    backgroundColor: "blue",
  },
  curvedLine: {
    width: "20%",
    height: 100,
    position: "absolute",
    bottom: -25,
    left: "40%",
    borderRadius: 35,
    backgroundColor: "black",
    transform: [{ scaleX: 5 }, { scaleY: 1 }],
  },
});