How to add curved borders to react native

Issue

How do I create a curved linear gradient design to my page in react native, any insight would be really appreciated. I tried to require the image but quality gets distorted. Want to know if theres any way to create this using code itself

enter image description here

Solution

To be able to create gradients you can use react-native-linear-gradient package in your project.

https://www.npmjs.com/package/react-native-linear-gradient

Now, for the image that you shared I tried creating it using the same package. Here, I've created 3 different gradients and placed them as children. You will need to tweak around the styling in order to get it to close to your UI design.

import React from "react";
import { StyleSheet, SafeAreaView } from "react-native";
import LinearGradient from "react-native-linear-gradient";

const App = () => {
  return (
    <SafeAreaView style={styles?.mainContainer}>
      <LinearGradient
        start={{ x: 0, y: 0 }}
        end={{ x: 1, y: 0 }}
        colors={["#f4ac", "#ffafcc", "#00bbf9"]}
        style={styles.linearGradient1}
      >
        <LinearGradient
          start={{ x: 0, y: 0 }}
          end={{ x: 1, y: 0 }}
          colors={["#00bbf9", "#ffafcc", "#f4ac"]}
          style={styles.linearGradient2}
        >
          <LinearGradient
            start={{ x: 0, y: 0 }}
            end={{ x: 1, y: 0 }}
            colors={["#fff", "#fff", "#fff"]}
            style={styles.linearGradient3}
          ></LinearGradient>
        </LinearGradient>
      </LinearGradient>
    </SafeAreaView>
  );
};
var styles = StyleSheet.create({
  mainContainer: {
    width: "100%",
    height: "100%",
    backgroundColor: "#000",
  },
  linearGradient1: {
    height: 250,
    justifyContent: "flex-end",
  },
  linearGradient2: {
    height: 200,
    borderTopLeftRadius: 200,
    borderTopRightRadius: 200,
    width: "100%",
    justifyContent: "flex-end",
    alignSelf: "center",
    transform: [{ scaleX: 1.5 }],
  },
  linearGradient3: {
    height: 170,
    borderTopLeftRadius: 200,
    borderTopRightRadius: 200,
    width: "83%",
    alignSelf: "flex-end",
  },
});
export default App;

Answered By - Vibhor