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
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
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.