try api

api/tmdb.tsx

@@ -1,11 +1,15 @@
 import axios from "axios";
 
-export default axios.create({
+class apiTMBD {
-    baseURL: 'https://api.themoviedb.org/3',
+    api_key: string = "a133422b5b1f22428e8074470d32186";
-    headers:{
+    base_url: string = "https://api.themoviedb.org/3/";
-        Accept: "application/json"
+
-    },
+    apiTMDB() {
-    params: {
+    };
-        api_key: 'a133422b5b1f22428e8074470d321865'
+
+    getPopularMovie() {
+
     }
-})
+
+
+}

components/ListWidget.tsx

@@ -4,8 +4,12 @@ import * as React from "react";
 
 
 type ListWidgetProps = {
-    imageURL : string
+    imageURL: string
-    name : String
+    name: String
+
+    runtime: number
+
+    director: string
 
 }
 
@@ -21,18 +25,43 @@ const styles = StyleSheet.create({
 
 
 export function ListWidget(props: ListWidgetProps) {
+
+    function formatTime(time: number) {
+        const hours = Math.floor(time / 60);
+        const minutes = time % 60;
+        return `${hours}h ${minutes < 10 ? `0${minutes}` : minutes}m`;
+    }
+
     return (
-        <View style={{height: 100, borderRadius: 20, justifyContent: "flex-start", flexDirection: 'row', paddingHorizontal:20, marginVertical:5}} >
+        <View style={{
+            height: 100,
+            borderRadius: 20,
+            justifyContent: "flex-start",
+            flexDirection: 'row',
+            paddingHorizontal: 20,
+            marginVertical: 5
+        }}>
             <Image
                 style={styles.filmCard}
                 source={{
-                    uri: 'https://fr.web.img4.acsta.net/pictures/21/11/16/10/01/4860598.jpg',
+                    uri: props.imageURL,
                 }}
             />
-            <View style={{height: 100, borderRadius: 20, justifyContent: "flex-start", flexDirection: 'column', paddingLeft:10}} >
+            <View style={{
-                <Text style={{color: "white", fontWeight:"bold", fontSize:25}}>{props.name}</Text>
+                height: 100,
-                <Text style={{color: "grey", fontWeight:"bold", fontSize:17}}>{props.name}</Text>
+                borderRadius: 20,
-                <View style={{marginVertical:10}}>
+                justifyContent: "flex-start",
+                flexDirection: 'column',
+                paddingLeft: 10
+            }}>
+                <Text numberOfLines={1} style={{
+                    color: "white",
+                    fontWeight: "bold",
+                    fontSize: 25,
+                    paddingRight: 50
+                }}>{props.director}</Text>
+                <Text style={{color: "grey", fontWeight: "bold", fontSize: 17}}>{formatTime(props.runtime)}</Text>
+                <View style={{marginVertical: 10}}>
                     <BadgeFilm name={"Science-Ficton"}/>
                 </View>
             </View>

components/MovieList.tsx

@@ -1,25 +1,118 @@
 import {useEffect, useState} from "react";
-import {View} from "react-native";
+import {FlatList, View} from "react-native";
 import {ListWidget} from "./ListWidget";
 import tmdb from "../api/tmdb"
+import axios from "axios";
+
+interface idMovie {
+    id: string
+
+}
+
+
+interface Cast {
+    cast: string
+
+}
+
+interface People {
+    name: string
+    job: string
+
+}
+
+interface Movie {
+    id: string
+    original_title: string
+    poster_path: string
+    runtime: number
+    vote_average: number
+
+    director: string
+
+
+}
+
+const opt = {
+    method: 'GET',
+    url: 'https://api.themoviedb.org/3/trending/all/day',
+    headers: {
+        Accept: "application/json"
+    },
+    params: {
+        api_key: 'a133422b5b1f22428e8074470d321865'
+    }
+}
+const opt2 = {
+    method: 'GET',
+    url: 'https://api.themoviedb.org/3/trending/all/day',
+    headers: {
+        Accept: "application/json"
+    },
+    params: {
+        api_key: 'a133422b5b1f22428e8074470d321865'
+    }
+}
 
 const MovieList = () => {
-    const [movies,setMovies] = useState([])
+    const [movies, setMovies] = useState<Movie[]>([])
+    const movielist: Movie[] = []
+
+    useEffect(() => {
+        axios.get("https://api.themoviedb.org/3/trending/all/day?api_key=a133422b5b1f22428e8074470d321865").then(async (response) => {
+            await response.data.results.forEach(async function (id: idMovie) {
+                console.log(id.id);
+                try {
+                    const sheet = await axios.get(`https://api.themoviedb.org/3/movie/${id.id}?api_key=a133422b5b1f22428e8074470d321865&language=en-US`);
+                    if (sheet && sheet.status == 200) {
+                        movielist.push(sheet.data);
+                        setMovies(movielist);
+
 
-    useEffect(()=>{
-        const fetchMovies = async() =>{
-            const {data}= await tmdb.get("movie/popular")
-            setMovies(data.results)
                     }
 
-        fetchMovies()
+                } catch (e) {
-    },[])
+                    console.log(e);
+                }
+            })
+        })
+    }, [])
+
+    useEffect(() => {
+        movies.forEach(async function (movie: Movie) {
+            console.log("-----------------------------");
+            /*console.log(movie);*/
+            axios.get(`https://api.themoviedb.org/3/movie/${movie.id}/credits?api_key=a133422b5b1f22428e8074470d321865&language=en-US`).then((response) => {
+                response.data.results.forEach(function (cast: Cast) {
+                    console.log(cast.cast);
+                    try {
+                        /*const sheet =  axios.get(`https://api.themoviedb.org/3/movie/${id.id}?api_key=a133422b5b1f22428e8074470d321865&language=en-US`);
+                        if (sheet && sheet.status == 200) {
+                            movielist.push(sheet.data);
+                            setMovies(movielist);
+
+
+                        }*/
+
+                    } catch (e) {
+                        console.log(e);
+                    }
+                })
+
+            });
+        })
+
 
-    return <View>
+    })
-        {movies.map((movie, index)=>{
+    return (
-            return <ListWidget name={Object.assign({}, movie)}></ListWidget>
+        <FlatList
-        })}
+            data={movies}
-    </View>
+            keyExtractor={item => item.id}
+            renderItem={({item}) => <ListWidget name={item.original_title}
+                                                imageURL={`https://image.tmdb.org/t/p/w500/${item.poster_path}`}
+                                                runtime={item.runtime} director={item.director}></ListWidget>}>
+        </FlatList>
+    )
 }
 
 export default MovieList;

navigation/index.tsx

@@ -61,7 +61,7 @@ function BottomTabNavigator() {
 
   return (
     <BottomTab.Navigator
-      initialRouteName="WatchLater"
+      initialRouteName="Favorite"
       screenOptions={{
         tabBarActiveTintColor: "purple",
 

screens/HomeScreen.tsx

@@ -167,7 +167,7 @@ type BadgeFilmProps = {
 export function BadgeFilm(props: BadgeFilmProps) {
 
         return (
-            <View style={{paddingHorizontal: 15,  marginHorizontal: 5,height: 30, backgroundColor: '#8906B8', borderRadius: 15, justifyContent: "center"}} >
+            <View style={{paddingHorizontal: 15,  marginHorizontal: 5,height: 30, backgroundColor: '#8906B8', borderRadius: 15, justifyContent: "center", alignSelf: "flex-start"}} >
                 <Text style={{color: "white", fontSize: 12, fontWeight:"bold"}}>{props.name}</Text>
             </View>