Skip to content
Snippets Groups Projects
Commit d383ad22 authored by Anael Lacour's avatar Anael Lacour Committed by Antoine Marquis
Browse files

add review

parent fa1ddb16
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