Skip to content
Snippets Groups Projects
Commit 8e43ecea authored by Anael Lacour's avatar Anael Lacour
Browse files

add review

parent da0686cb
No related branches found
No related tags found
No related merge requests found
......@@ -43,6 +43,7 @@
"react-native-safe-area-context": "4.2.4",
"react-native-screens": "~3.13.1",
"react-native-snap-carousel": "^3.9.1",
"react-native-svg": "^12.3.0",
"react-native-vector-icons": "^9.1.0",
"react-native-web": "0.17.7",
"react-redux": "^8.0.1",
......
import React from "react";
import { StyleSheet, Text, View } from "react-native";
import React, { useState, useEffect } from "react";
import { StyleSheet, Text, View, Animated, } from "react-native";
import Star from "./star"
const PercentageBar = ({ starText, percentage }) => {
const [animation] = useState(new Animated.Value(0));
useEffect(() => {
Animated.timing(animation, {
toValue: percentage,
duration: 500,
}).start();
}, [percentage]);
return (
<View
style={{
flexDirection: "row",
}}
>
<Text style={styles.progressText}>{starText}</Text>
<View style={styles.progressMiddle}>
<View style={styles.progressWrap}>
<Animated.View
style={[
styles.progressBar,
{
width: animation.interpolate({
inputRange: [0, 100],
outputRange: ["0%", "100%"],
}),
},
]}
/>
</View>
</View>
<Text style={styles.progressPercentText}>{percentage}%</Text>
</View>
);
};
export default function Review() {
return (
<View style={styles.container}>
<View style={styles.reviewContainer}>
<Text style={styles.title}>reviews</Text>
<Text style={styles.title}>Customer reviews</Text>
<View style={styles.totalWrap}>
<View
style={{
flexDirection: "row",
}}
>
<Star />
<Star />
<Star />
<Star />
<Star />
</View>
<Text>4.7 out of 5</Text>
</View>
<Text style={styles.amountText}>40 customer ratings</Text>
<View style={{ marginTop: 40 }}>
<View style={styles.spacer}>
<PercentageBar starText="5 star" percentage={84} />
</View>
<View style={styles.spacer}>
<PercentageBar starText="4 star" percentage={9} />
</View>
<View style={styles.spacer}>
<PercentageBar starText="3 star" percentage={4} />
</View>
<View style={styles.spacer}>
<PercentageBar starText="2 star" percentage={2} />
</View>
<View style={styles.spacer}>
<PercentageBar starText="1 star" percentage={1} />
</View>
</View>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
......@@ -36,4 +109,59 @@ const styles = StyleSheet.create({
color: "#323357",
textAlign: "center",
},
totalWrap: {
marginTop: 20,
marginBottom: 5,
backgroundColor: "#F5F8FF",
borderRadius: 40,
alignItems: "center",
justifyContent: "space-between",
flexDirection: "row",
paddingHorizontal: 15,
paddingVertical: 10,
},
amountText: {
fontSize: 16,
color: "#595B71",
textAlign: "center",
},
howWeCalculate: {
fontSize: 15,
color: "#2A5BDA",
textAlign: "center",
},
spacer: {
marginBottom: 14,
},
progressText: {
width: 50,
fontSize: 14,
color: "#2A5BDA",
},
progressPercentText: { width: 40, fontSize: 14, color: "#323357" },
progressMiddle: {
height: 15,
flex: 1,
marginHorizontal: 10,
},
progressWrap: {
backgroundColor: "#F5F8FF",
borderRadius: 18,
position: "absolute",
top: 0,
left: 0,
bottom: 0,
right: 0,
padding: 2,
},
progressBar: {
flex: 1,
shadowOffset: { width: 0, height: 0 },
shadowColor: "#ffcc48",
shadowOpacity: 1.0,
shadowRadius: 4,
backgroundColor: "#FFCC48",
borderRadius: 18,
minWidth: 5,
},
});
import React from "react";
import Svg, { Path } from "react-native-svg";
const Star = (props) => {
return (
<Svg width={24} height={22} viewBox="0 0 33 30" fill="none" {...props}>
<Path
d="M16.5 0l4.849 9.826 10.843 1.575-7.846 7.648 1.852 10.8-9.698-5.1-9.698 5.1 1.852-10.8-7.846-7.648L11.65 9.826 16.5 0z"
fill="#FFCC48"
/>
</Svg>
);
};
export default Star;
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment