new ui , search in list, and vote

model/Movie.tsx

@@ -3,25 +3,23 @@ class Movie {
 
     public poster_path: string
     public runtime: number
-    public vote_average : number
+    public vote_average: number
     public release_date: string
     public overview: string
     public genres: string[]
 
 
-    constructor(original_title: string, poster_path: string,runtime: number, vote_average: number, release_date : string, genres : string[], overview : string) {
+    constructor(original_title: string, poster_path: string, runtime: number, vote_average: number, release_date: string, genres: string[], overview: string) {
         this.original_title = original_title;
-        this.poster_path = 'https://image.tmdb.org/t/p/w780'+poster_path;
+        this.poster_path = 'https://image.tmdb.org/t/p/w780' + poster_path;
         this.runtime = runtime;
-        this.vote_average = vote_average;
+        this.release_date = release_date.substring(0, 4);
-        this.release_date = release_date;
         this.genres = genres;
         this.overview = overview;
+        this.vote_average = vote_average;
     }
 
 
-
-
 }
 
 export default Movie;

navigation/index.tsx

@@ -3,15 +3,15 @@
  * https://reactnavigation.org/docs/getting-started
  *
  */
-import { FontAwesome } from '@expo/vector-icons';
+import {FontAwesome} from '@expo/vector-icons';
-import { FontAwesomeIcon} from "@fortawesome/react-native-fontawesome";
+import {FontAwesomeIcon} from "@fortawesome/react-native-fontawesome";
-import { faClock, faFilm, faHeart} from "@fortawesome/free-solid-svg-icons";
+import {faClock, faFilm, faHeart} from "@fortawesome/free-solid-svg-icons";
 import Ionicons from '@expo/vector-icons/Ionicons';
-import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
-import { NavigationContainer, DefaultTheme, DarkTheme } from '@react-navigation/native';
+import {NavigationContainer, DefaultTheme, DarkTheme} from '@react-navigation/native';
-import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import {createNativeStackNavigator} from '@react-navigation/native-stack';
 import * as React from 'react';
-import { ColorSchemeName, Pressable } from 'react-native';
+import {ColorSchemeName, Pressable} from 'react-native';
 
 import Colors from '../constants/Colors';
 import useColorScheme from '../hooks/useColorScheme';
@@ -19,17 +19,17 @@ import NotFoundScreen from '../screens/NotFoundScreen';
 import WatchLaterScreen from '../screens/WatchLaterScreen';
 import FavoriteScreen from '../screens/FavoriteScreen';
 import HomeScreen from '../screens/HomeScreen';
-import { RootStackParamList, RootTabParamList, RootTabScreenProps } from '../types';
+import {RootStackParamList, RootTabParamList, RootTabScreenProps} from '../types';
 import LinkingConfiguration from './LinkingConfiguration';
 
-export default function Navigation({ colorScheme }: { colorScheme: ColorSchemeName }) {
+export default function Navigation({colorScheme}: { colorScheme: ColorSchemeName }) {
-  return (
+    return (
-    <NavigationContainer
+        <NavigationContainer
-      linking={LinkingConfiguration}
+            linking={LinkingConfiguration}
-      theme={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
+            theme={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
-      <RootNavigator />
+            <RootNavigator/>
-    </NavigationContainer>
+        </NavigationContainer>
-  );
+    );
 }
 
 /**
@@ -39,15 +39,15 @@ export default function Navigation({ colorScheme }: { colorScheme: ColorSchemeNa
 const Stack = createNativeStackNavigator<RootStackParamList>();
 
 function RootNavigator() {
-  return (
+    return (
-    <Stack.Navigator>
+        <Stack.Navigator>
-        <Stack.Screen name="Root" component={BottomTabNavigator} options={{ headerShown: false }} />
+            <Stack.Screen name="Root" component={BottomTabNavigator} options={{headerShown: false}}/>
-        <Stack.Screen name="Home" component={HomeScreen} options={{ headerShown: false }} />
+            <Stack.Screen name="Home" component={HomeScreen} options={{headerShown: false}}/>
-      <Stack.Screen name="NotFound" component={NotFoundScreen} options={{ title: 'Oops!' }} />
+            <Stack.Screen name="NotFound" component={NotFoundScreen} options={{title: 'Oops!'}}/>
-        <Stack.Screen name="Favorite" component={FavoriteScreen} options={{ headerShown: false }} />
+            <Stack.Screen name="Favorite" component={FavoriteScreen} options={{headerShown: false}}/>
-        <Stack.Screen name="WatchLater" component={WatchLaterScreen} options={{ headerShown: false }} />
+            <Stack.Screen name="WatchLater" component={WatchLaterScreen} options={{headerShown: false}}/>
-    </Stack.Navigator>
+        </Stack.Navigator>
-  );
+    );
 }
 
 /**
@@ -57,54 +57,54 @@ function RootNavigator() {
 const BottomTab = createBottomTabNavigator<RootTabParamList>();
 
 function BottomTabNavigator() {
-  const colorScheme = useColorScheme();
+    const colorScheme = useColorScheme();
 
-  return (
+    return (
-    <BottomTab.Navigator
+        <BottomTab.Navigator
-      initialRouteName="Home"
+            initialRouteName="Home"
-      screenOptions={{
+            screenOptions={{
-        tabBarActiveTintColor: "purple",
+                tabBarActiveTintColor: "white",
 
-      }}>
+            }}>
-      <BottomTab.Screen
+            <BottomTab.Screen
-        name="WatchLater"
+                name="WatchLater"
 
-        component={WatchLaterScreen}
+                component={WatchLaterScreen}
-        options={({ navigation }: RootTabScreenProps<'WatchLater'>) => ({
+                options={({navigation}: RootTabScreenProps<'WatchLater'>) => ({
-          tabBarIcon: ({ color, size}) => <TabBarIcon name={faClock} color={color} size={20}/>,
+                    tabBarIcon: ({color, size}) => <TabBarIcon name={faClock} color={color} size={20}/>,
-            headerShown: false,
+                    headerShown: false,
 
-        })}
+                })}
-      />
+            />
-        <BottomTab.Screen
+            <BottomTab.Screen
-            name="Home"
+                name="Home"
-            component={HomeScreen}
+                component={HomeScreen}
 
-            options={{
+                options={{
-                headerShown: false,
+                    headerShown: false,
-                tabBarIcon: ({ color, size }) => <TabBarIcon name={faFilm} color={color} size={20}/>,
+                    tabBarIcon: ({color, size}) => <TabBarIcon name={faFilm} color={color} size={20}/>,
-            }}
+                }}
-        />
+            />
-      <BottomTab.Screen
+            <BottomTab.Screen
-        name="Favorite"
+                name="Favorite"
-        component={FavoriteScreen}
+                component={FavoriteScreen}
 
-        options={{
+                options={{
-            headerShown: false,
+                    headerShown: false,
-          tabBarIcon: ({ color, size }) => <TabBarIcon name={faHeart} color={color} size={20} />,
+                    tabBarIcon: ({color, size}) => <TabBarIcon name={faHeart} color={color} size={20}/>,
-        }}
+                }}
-      />
+            />
-    </BottomTab.Navigator>
+        </BottomTab.Navigator>
-  );
+    );
 }
 
 /**
  * You can explore the built-in icon families and icons on the web at https://icons.expo.fyi/
  */
 function TabBarIcon(props: {
-  name: any;
+    name: any;
-  color: string;
+    color: string;
-  size: number;
+    size: number;
 }) {
-  return <FontAwesomeIcon icon={props.name} style={{marginBottom: -5}} size={props.size} color={props.color} />;
+    return <FontAwesomeIcon icon={props.name} style={{marginBottom: -5}} size={props.size} color={props.color}/>;
 }

package-lock.json

@@ -30,6 +30,7 @@
         "expo-status-bar": "~1.4.2",
         "expo-system-ui": "~2.0.1",
         "expo-web-browser": "~12.0.0",
+        "moment": "^2.29.4",
         "react": "18.1.0",
         "react-dom": "18.1.0",
         "react-native": "0.70.5",
@@ -13428,6 +13429,14 @@
         "mkdirp": "bin/cmd.js"
       }
     },
+    "node_modules/moment": {
+      "version": "2.29.4",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz",
+      "integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -28014,6 +28023,11 @@
         "minimist": "^1.2.6"
       }
     },
+    "moment": {
+      "version": "2.29.4",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz",
+      "integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w=="
+    },
     "ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",

package.json

@@ -35,6 +35,7 @@
     "expo-status-bar": "~1.4.2",
     "expo-system-ui": "~2.0.1",
     "expo-web-browser": "~12.0.0",
+    "moment": "^2.29.4",
     "react": "18.1.0",
     "react-dom": "18.1.0",
     "react-native": "0.70.5",

screens/HomeScreen.tsx

@@ -17,11 +17,19 @@ import {useSafeAreaInsets} from "react-native-safe-area-context";
 import {addMovieToWatchLater, getTrendingID, removeMovieTrending,} from "../redux/actions/actionGetTrendingID";
 import {useDispatch, useSelector} from 'react-redux';
 import Movie from "../model/Movie";
+import * as url from "url";
+import moment from 'moment';
 
-export default function HomeScreen({ navigation }: RootStackScreenProps<'Home'>) {
+export default function HomeScreen({navigation}: RootStackScreenProps<'Home'>) {
     // @ts-ignore
     const trendingMovies = useSelector(state => state.appReducer.trendingMovies);
 
+
+    const [hours, setHours] = useState(0);
+    const [minutes, setMinutes] = useState(0);
+    const [seconds, setSeconds] = useState(0);
+
+
     //console.log("liste [0]: ", trendingMovies[0]);
 
     const insets = useSafeAreaInsets();
@@ -30,23 +38,22 @@ export default function HomeScreen({ navigation }: RootStackScreenProps<'Home'>)
         background: {
             backgroundColor: 'black',
             height: '100%',
+            width: '100%',
             paddingTop: insets.top,
         },
 
-        container:{
+        container: {
             flex: 1,
         },
         filmCard: {
-            width: '80%',
+            width: '85%',
-            height: '60%',
+            height: '68%',
-            justifyContent:'center',
+            justifyContent: 'center',
-            marginLeft:'auto',
+            marginLeft: 'auto',
-            marginRight:'auto',
+            marginRight: 'auto',
-            borderRadius: 15,
+            borderRadius: 22,
-
+            marginTop: 15,
-        },
+            alignItems: 'center',
-        image: {
-            position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, justifyContent: 'center', alignItems: 'center',
             shadowColor: "#000",
             shadowOffset: {
                 width: 0,
@@ -54,10 +61,10 @@ export default function HomeScreen({ navigation }: RootStackScreenProps<'Home'>)
             },
             shadowOpacity: 0.39,
             shadowRadius: 8.30,
-            flex: 1,
+
-            paddingTop: 70,
             alignSelf: 'center',
             elevation: 13,
+
         },
         backgroundImage: {
             flex: 1,
@@ -67,6 +74,14 @@ export default function HomeScreen({ navigation }: RootStackScreenProps<'Home'>)
             flex: 1,
             backgroundColor: 'rgba(0,0,0,0.5)',
         },
+        circle: {
+            width: 6,
+            height: 6,
+            borderRadius: 100 / 2,
+            marginTop: 4,
+            backgroundColor: "lightgray",
+            marginHorizontal: 8
+        },
 
     });
 
@@ -74,6 +89,36 @@ export default function HomeScreen({ navigation }: RootStackScreenProps<'Home'>)
     const dispatch = useDispatch();
 
     useEffect(() => {
+        // Créez une date avec la valeur actuelle
+        const interval = setInterval(() => {
+            const today = moment();
+
+// Définissez l'heure sur minuit
+            today.set({hour: 0, minute: 0, second: 0, millisecond: 0});
+
+// Ajoutez un jour pour obtenir demain (ce soir à minuit)
+            const tonight = today.add(1, 'days');
+
+// Obtenez le timestamp en millisecondes
+            const timestamp = tonight.valueOf();
+            const now = new Date();
+            const difference = timestamp - now.getTime();
+            const h = Math.floor(
+                (difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
+            );
+
+            setHours(h);
+
+            const m = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
+            setMinutes(m);
+
+            const s = Math.floor((difference % (1000 * 60)) / 1000);
+
+            setSeconds(s);
+            //console.log("timer", h, m, s);
+        });
+        setTimeout(() => interval, 10000);
+
         const loadTrendingID = async () => {
             // @ts-ignore
             await dispatch(getTrendingID());
@@ -83,15 +128,17 @@ export default function HomeScreen({ navigation }: RootStackScreenProps<'Home'>)
     }, [dispatch]);
 
     type ItemProps = {
-        movie : Movie
+        movie: Movie
 
     }
-    function addWatchLater(props: Movie){
+
-       dispatch(addMovieToWatchLater(props));
+    function addWatchLater(props: Movie) {
-       dispatch(removeMovieTrending(props));
+        dispatch(addMovieToWatchLater(props));
+        dispatch(removeMovieTrending(props));
     }
 
-    function popFirstTrending(props: Movie){
+
+    function popFirstTrending(props: Movie) {
         dispatch(removeMovieTrending(props));
     }
 
@@ -101,121 +148,99 @@ export default function HomeScreen({ navigation }: RootStackScreenProps<'Home'>)
         const minutes = time % 60;
         return `${hours}h ${minutes < 10 ? `0${minutes}` : minutes}m`;
     }
+
     let rotateValueHolder = new Animated.Value(0);
 
-     function startImageRotateFunction(){
-        rotateValueHolder.setValue(0);
-        Animated.timing(rotateValueHolder, {
-            toValue: 0.5,
-            duration: 800,
-            easing: Easing.linear,
-            useNativeDriver: true,
-        }).start();}
-
-    const RotateData = rotateValueHolder.interpolate({
-        inputRange: [0, 1],
-        outputRange: ['0deg', '360deg'],
-    });
 
-    return(
+    return (
         <>
-        {trendingMovies.length !== 0 && (
+            {trendingMovies.length !== 0 && (
-        <SafeAreaView style={styles.background}>
+                <SafeAreaView style={styles.background}>
-                <ImageBackground blurRadius={8}
+                    <ImageBackground blurRadius={8}
-                                 style={{
+                                     style={{
-                                     position: 'absolute',
+                                         position: 'absolute',
-                                     width: "200%",
+                                         width: "200%",
-                                     height: "200%",
+                                         height: "200%",
-                                     justifyContent: "center",
+                                         justifyContent: "center",
-                                     alignItems: "center",
+                                         alignItems: "center",
-                                     opacity: 0.48
+                                         opacity: 0.68
-                                 }}
+                                     }}
-                                 source={{
+                                     source={{
-                                     uri: trendingMovies[0].poster_path,
+                                         uri: trendingMovies[0].poster_path,
-                                 }}
+                                     }}
-                ></ImageBackground>
+                    ></ImageBackground>
-                <View style={styles.image}>
+                    <View style={{flexDirection: 'column', alignSelf: 'center', paddingHorizontal: 30, width: '100%', alignItems: "center"}}>
+                        <Text numberOfLines={1} style={{color: "white", fontSize: 30, fontWeight: "bold", paddingTop: 5, alignSelf: "center"}}>{trendingMovies[0].original_title}</Text>
+                        <View style={{flexDirection: 'row', justifyContent: "center", alignItems: "center", alignSelf: "center"}}>
+                            <Text style={{color: "#AAAAAA", fontSize: 20, fontWeight: "normal", paddingTop: 5}}>{`${trendingMovies[0].release_date}`}</Text>
+                            <View style={styles.circle}/>
+                            <Text style={{color: "#AAAAAA", fontSize: 20, fontWeight: "normal", paddingTop: 5}}>{`${trendingMovies[0].genres[0]}, ${trendingMovies[0].genres[1]}`}</Text>
+                            <View style={styles.circle}/>
+                            <Text style={{color: "#AAAAAA", fontSize: 20, fontWeight: "normal", paddingTop: 5}}>{`${formatTime(trendingMovies[0].runtime)}`}</Text>
+                        </View>
+                        <Stars note={Math.round(trendingMovies[0].vote_average)}/>
+                    </View>
                     <Image
                         style={styles.filmCard}
                         source={{
                             uri: trendingMovies[0].poster_path,
                         }}
                     />
-                </View>
+                    <View style={{flexDirection: 'row', alignItems: 'flex-end', justifyContent: "space-evenly", paddingHorizontal: 30, width: '100%', position: "absolute", top: "79%", zIndex: 30}}>
-                <View style={{height:35, marginTop: 10, marginBottom: 15}}>
+                        <TouchableOpacity onPress={() => addWatchLater(trendingMovies[0])}>
-                    <ScrollView
+                            <Image
-                        horizontal={true}
+                                source={require('../assets/images/watchlater_button.png')} style={{resizeMode: "stretch", height: '55%', aspectRatio: 1,}}
-                        showsHorizontalScrollIndicator={false}>
+                            />
-                        <BadgeGenre name={"Popular"} isSelected={false}></BadgeGenre>
+                        </TouchableOpacity>
-                        <BadgeGenre name={"Trending"} isSelected={true}></BadgeGenre>
+                        <TouchableOpacity onPress={
-                        <BadgeGenre name={"Classic"} isSelected={false}></BadgeGenre>
+                            () => popFirstTrending(trendingMovies[0])}>
-                        <BadgeGenre name={"New"} isSelected={false}></BadgeGenre>
+                            <Animated.Image
-                        <BadgeGenre name={"Cartoon"} isSelected={false}></BadgeGenre>
+                                source={require('../assets/images/delete_button.png')} style={{
-                        <BadgeGenre name={"Serie"} isSelected={false}></BadgeGenre>
+                                resizeMode: "stretch", height: '55%', aspectRatio: 1,
-                        <BadgeGenre name={"cc"} isSelected={false}></BadgeGenre>
+                            }}
-                        <BadgeGenre name={"cc"} isSelected={false}></BadgeGenre>
+                            />
-                        <BadgeGenre name={"cc"} isSelected={false}></BadgeGenre>
+
-
+                        </TouchableOpacity>
-
+                        <TouchableOpacity>
-
+                            <Image
-                    </ScrollView>
+                                source={require('../assets/images/like_button.png')} style={{resizeMode: "stretch", height: '55%', aspectRatio: 1,}}
-                </View>
+                            />
-                <View style={{ flexDirection: 'column', alignSelf: 'flex-start', alignItems: 'flex-start', paddingHorizontal: 30, flex: 1 }}>
+
-
+                        </TouchableOpacity>
-                    <View style={{ flexDirection: 'row', alignSelf: 'flex-start', justifyContent: 'flex-start', width: "100%"}}>
-                        <FlatList horizontal
-                            data={trendingMovies[0].genres}
-                            renderItem={({item}) => <BadgeFilm name={item}></BadgeFilm>}
-                        />
                     </View>
-                    <View>
+                    <View style={{zIndex: 10, alignItems: "center", justifyContent: "center", flex: 1, flexDirection: "row"}}>
-                        <Text numberOfLines={1} style={{color: "white", fontSize: 28, fontWeight: "bold", paddingTop: 5}}>{trendingMovies[0].original_title}</Text>
+                        <Text style={{color: "#FFF", fontSize: 16, fontWeight: "500"}}>Nouvelle collection dans</Text>
+                        <Image source={require('../assets/images/timer_icon.png')} style={{
+                            height: 30,
+                            resizeMode: 'contain'
+                        }}></Image>
+                        <Text style={{color: "#FFF", fontSize: 16, fontWeight: "500"}}>{`${hours.toString().padStart(2, '0')}:`}</Text>
+                        <Text style={{color: "#FFF", fontSize: 16, fontWeight: "500"}}>{`${minutes.toString().padStart(2, '0')}:`}</Text>
+                        <Text style={{color: "#FFF", fontSize: 16, fontWeight: "500"}}>{`${seconds.toString().padStart(2, '0')}`}</Text>
                     </View>
-                    <Text style={{color: "lightgray", fontSize: 20, fontWeight: "bold"}}>{trendingMovies[0].release_date}</Text>
-                </View>
-                <View style={{ flexDirection: 'row' ,alignItems: 'center', justifyContent: "space-evenly", paddingHorizontal: 30, height: '20%', width:'100%'}}>
-                    <TouchableOpacity onPress={() => addWatchLater(trendingMovies[0])}>
-                        <Image
-                            source={require('../assets/images/WatchLater.png')} style={{ resizeMode:"stretch",  height:'45%', aspectRatio: 1,}}
-                        />
-                    </TouchableOpacity>
-                    <TouchableOpacity onPress={
-                        () => popFirstTrending(trendingMovies[0]) }>
-                        <Animated.Image
-                            source={require('../assets/images/Generate.png')} style={{resizeMode:"stretch", height:'45%',aspectRatio: 1,transform: [{ rotate: RotateData }],
-                        }}
-                        />
 
-                    </TouchableOpacity>
-                    <TouchableOpacity>
-                        <Image
-                            source={require('../assets/images/Favorite.png')} style={{ resizeMode:"stretch", height:'45%', aspectRatio: 1,}}
-                        />
 
-                    </TouchableOpacity>
+                </SafeAreaView>)}
-                </View>
-            </SafeAreaView>)}
         </>
-)
+    )
 }
 type BadgeGenreProps = {
-    name : String
+    name: String
     isSelected: Boolean
 
 }
 
 export function BadgeGenre(props: BadgeGenreProps) {
-    if(props.isSelected===false){
+    if (props.isSelected === false) {
         return (
-            <View style={{paddingHorizontal: 20,  marginHorizontal: 5,height: 35, backgroundColor: '#2E2E2E', borderRadius: 20, justifyContent: "center"}} >
+            <View style={{paddingHorizontal: 20, marginHorizontal: 5, height: 35, backgroundColor: '#2E2E2E', borderRadius: 20, justifyContent: "center"}}>
                 <Text style={{color: "white"}}>{props.name}</Text>
             </View>
 
         );
-    }
+    } else {
-    else{
         return (
-            <View style={{paddingHorizontal: 20,  marginHorizontal: 5,height: 35, backgroundColor: '#5C5C5C', borderRadius: 20, borderWidth: 1, borderColor: "white" ,justifyContent: "center"}} >
+            <View style={{paddingHorizontal: 20, marginHorizontal: 5, height: 35, backgroundColor: '#5C5C5C', borderRadius: 20, borderWidth: 1, borderColor: "white", justifyContent: "center"}}>
                 <Text style={{color: "white"}}>{props.name}</Text>
             </View>
 
@@ -226,25 +251,57 @@ export function BadgeGenre(props: BadgeGenreProps) {
 }
 
 type BadgeFilmProps = {
-    name : String
+    name: String
 
 }
+
 export function BadgeFilm(props: BadgeFilmProps) {
 
-        return (
+    return (
-            <View style={{
+        <View style={{
-                paddingHorizontal: 15,
+            paddingHorizontal: 15,
-                marginHorizontal: 5,
+            marginHorizontal: 5,
-                height: 30,
+            height: 30,
-                backgroundColor: '#8906B8',
+            backgroundColor: '#8906B8',
-                borderRadius: 15,
+            borderRadius: 15,
-                justifyContent: "center",
+            justifyContent: "center",
-                alignSelf: "flex-start"
+            alignSelf: "flex-start"
-            }}>
+        }}>
-                <Text style={{color: "white", fontSize: 12, fontWeight: "bold"}}>{props.name}</Text>
+            <Text style={{color: "white", fontSize: 12, fontWeight: "bold"}}>{props.name}</Text>
-            </View>
+        </View>
 
-        );
+    );
 
 
 }
+
+type StarsProps = {
+    note: number
+
+}
+
+export function Stars(props: StarsProps) {
+    console.log("note", props.note)
+    let imageSource;
+
+    if (props.note < 2)
+        imageSource = require('../assets/images/1stars_vote.png');
+    else if (props.note < 4)
+        imageSource = require('../assets/images/2stars_vote.png');
+    else if (props.note < 6)
+        imageSource = require('../assets/images/3stars_vote.png');
+    else if (props.note < 8)
+        imageSource = require('../assets/images/4stars_vote.png');
+    else if (props.note < 10)
+        imageSource = require('../assets/images/5stars_vote.png');
+
+    return (
+        <View>
+            <Image source={imageSource} style={{
+                width: 130,
+                height: 40,
+                resizeMode: 'contain'
+            }}/>
+        </View>
+    );
+};