try api

App.tsx

@@ -3,20 +3,23 @@ import { SafeAreaProvider } from 'react-native-safe-area-context';
 import useCachedResources from './hooks/useCachedResources';
 import useColorScheme from './hooks/useColorScheme';
 import Navigation from './navigation';
-import {View} from "react-native";
+import {View, Text, ScrollView, FlatList} from "react-native";
+import {useEffect, useState} from "react";
+import * as React from "react";
 
 export default function App() {
   const isLoadingComplete = useCachedResources();
   const colorScheme = useColorScheme();
 
+
   if (!isLoadingComplete) {
     return null;
   } else {
     return (
-      <SafeAreaProvider>
+        <SafeAreaProvider>
-        <Navigation colorScheme={colorScheme} />
+          <Navigation colorScheme={colorScheme} />
-        <StatusBar />
+          <StatusBar />
-      </SafeAreaProvider>
+        </SafeAreaProvider>
     );
   }
 }

README.md

@@ -0,0 +1,9 @@
+API_URL = https://api.themoviedb.org/3/movie/550?api_key=a133422b5b1f22428e8074470d321865
+IMAGE = https://image.tmdb.org/t/p/w500/kqjL17yufvn9OVLyXYpvtyrFfak.jpg
+
+JETON = eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiJhMTMzNDIyYjViMWYyMjQyOGU4MDc0NDcwZDMyMTg2NSIsInN1YiI6IjYzZGE1MDA5YTZjMTA0MDA4NTg3YTc3YiIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.EfOvULIxDJ2hrltaGwdRUkAE1wd1HCHtkCP835z7PaY
+
+<SafeAreaProvider>
+        <Navigation colorScheme={colorScheme} />
+        <StatusBar />
+      </SafeAreaProvider>

api/tmdb.tsx

@@ -0,0 +1,11 @@
+import axios from "axios";
+
+export default axios.create({
+    baseURL: 'https://api.themoviedb.org/3',
+    headers:{
+        Accept: "application/json"
+    },
+    params: {
+        api_key: 'a133422b5b1f22428e8074470d321865'
+    }
+})

components/ListWidget.tsx

@@ -0,0 +1,45 @@
+import {Image, StyleSheet, Text, View} from "react-native";
+import {BadgeFilm} from "../screens/HomeScreen";
+import * as React from "react";
+
+
+type ListWidgetProps = {
+    imageURL : string
+    name : String
+
+}
+
+const styles = StyleSheet.create({
+    filmCard: {
+        width: 70,
+        height: 100,
+        borderRadius: 8,
+
+
+    },
+});
+
+
+export function ListWidget(props: ListWidgetProps) {
+    return (
+        <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',
+                }}
+            />
+            <View style={{height: 100, borderRadius: 20, justifyContent: "flex-start", flexDirection: 'column', paddingLeft:10}} >
+                <Text style={{color: "white", fontWeight:"bold", fontSize:25}}>{props.name}</Text>
+                <Text style={{color: "grey", fontWeight:"bold", fontSize:17}}>{props.name}</Text>
+                <View style={{marginVertical:10}}>
+                    <BadgeFilm name={"Science-Ficton"}/>
+                </View>
+            </View>
+        </View>
+
+
+    );
+
+
+}

components/MovieList.tsx

@@ -0,0 +1,25 @@
+import {useEffect, useState} from "react";
+import {View} from "react-native";
+import {ListWidget} from "./ListWidget";
+import tmdb from "../api/tmdb"
+
+const MovieList = () => {
+    const [movies,setMovies] = useState([])
+
+    useEffect(()=>{
+        const fetchMovies = async() =>{
+            const {data}= await tmdb.get("movie/popular")
+            setMovies(data.results)
+        }
+
+        fetchMovies()
+    },[])
+
+    return <View>
+        {movies.map((movie, index)=>{
+            return <ListWidget name={Object.assign({}, movie)}></ListWidget>
+        })}
+    </View>
+}
+
+export default MovieList;

interfaces.ts

@@ -0,0 +1,3 @@
+export interface Movie{
+
+}

package-lock.json

@@ -18,6 +18,7 @@
         "@react-navigation/native": "^6.0.2",
         "@react-navigation/native-stack": "^6.1.0",
         "@reacticons/ionicons": "^6.0.4",
+        "axios": "^1.3.0",
         "expo": "~47.0.12",
         "expo-asset": "~8.7.0",
         "expo-constants": "~14.0.2",
@@ -5969,6 +5970,29 @@
         "node": ">= 4.5.0"
       }
     },
+    "node_modules/axios": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.3.0.tgz",
+      "integrity": "sha512-oCye5nHhTypzkdLIvF9SaHfr8UAquqCn1KY3j8vsrjeol8yohAdGxIpRPbF1bOLsx33HOAatdfMX1yzsj2cHwg==",
+      "dependencies": {
+        "follow-redirects": "^1.15.0",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
+    "node_modules/axios/node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/babel-core": {
       "version": "7.0.0-bridge.0",
       "resolved": "https://registry.npmjs.org/babel-core/-/babel-core-7.0.0-bridge.0.tgz",
@@ -8778,6 +8802,25 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/follow-redirects": {
+      "version": "1.15.2",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
+      "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/fontfaceobserver": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/fontfaceobserver/-/fontfaceobserver-2.3.0.tgz",
@@ -14516,6 +14559,11 @@
         "react-is": "^16.13.1"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "node_modules/psl": {
       "version": "1.9.0",
       "resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz",
@@ -22100,6 +22148,28 @@
       "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
       "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg=="
     },
+    "axios": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.3.0.tgz",
+      "integrity": "sha512-oCye5nHhTypzkdLIvF9SaHfr8UAquqCn1KY3j8vsrjeol8yohAdGxIpRPbF1bOLsx33HOAatdfMX1yzsj2cHwg==",
+      "requires": {
+        "follow-redirects": "^1.15.0",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      },
+      "dependencies": {
+        "form-data": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+          "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+          "requires": {
+            "asynckit": "^0.4.0",
+            "combined-stream": "^1.0.8",
+            "mime-types": "^2.1.12"
+          }
+        }
+      }
+    },
     "babel-core": {
       "version": "7.0.0-bridge.0",
       "resolved": "https://registry.npmjs.org/babel-core/-/babel-core-7.0.0-bridge.0.tgz",
@@ -24279,6 +24349,11 @@
       "resolved": "https://registry.npmjs.org/flow-parser/-/flow-parser-0.121.0.tgz",
       "integrity": "sha512-1gIBiWJNR0tKUNv8gZuk7l9rVX06OuLzY9AoGio7y/JT4V1IZErEMEq2TJS+PFcw/y0RshZ1J/27VfK1UQzYVg=="
     },
+    "follow-redirects": {
+      "version": "1.15.2",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
+      "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA=="
+    },
     "fontfaceobserver": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/fontfaceobserver/-/fontfaceobserver-2.3.0.tgz",
@@ -28673,6 +28748,11 @@
         "react-is": "^16.13.1"
       }
     },
+    "proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "psl": {
       "version": "1.9.0",
       "resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz",

package.json

@@ -23,6 +23,7 @@
     "@react-navigation/native": "^6.0.2",
     "@react-navigation/native-stack": "^6.1.0",
     "@reacticons/ionicons": "^6.0.4",
+    "axios": "^1.3.0",
     "expo": "~47.0.12",
     "expo-asset": "~8.7.0",
     "expo-constants": "~14.0.2",

screens/FavoriteScreen.tsx

@@ -1,12 +1,14 @@
 import {FlatList, StyleSheet, SafeAreaView, Text, View, Image, TextInput} from 'react-native';
 import * as React from "react";
-import {BadgeFilm} from "./HomeScreen";
 import { FontAwesomeIcon} from "@fortawesome/react-native-fontawesome";
 import { faHeart} from "@fortawesome/free-solid-svg-icons";
 import {RootTabScreenProps} from "../types.js";
+import {useState} from "react";
+import MovieList from "../components/MovieList";
 
 
 export default function FavoriteScreen({ navigation }: RootTabScreenProps<'Favorite'>) {
+
     return (
         <SafeAreaView style={styles.container}>
             <View style={{height: 50, justifyContent: "flex-start",flexDirection: 'row', paddingHorizontal:20,  marginBottom: 15,marginVertical:5, alignItems:"flex-end"}} >
@@ -19,21 +21,7 @@ export default function FavoriteScreen({ navigation }: RootTabScreenProps<'Favor
             <View style={{height:40, width:400, backgroundColor:"grey", borderRadius:20, marginVertical:10, alignSelf:"center"}}>
                 <TextInput style={{width:'100%', height:40, marginHorizontal:20}} ></TextInput>
             </View>
-            <FlatList
+            <MovieList></MovieList>
-                data={[
-                    {key: 'Devin'},
-                    {key: 'Dan'},
-                    {key: 'Dominic'},
-                    {key: 'Jackson'},
-                    {key: 'James'},
-                    {key: 'Joel'},
-                    {key: 'John'},
-                    {key: 'Jillian'},
-                    {key: 'Jimmy'},
-                    {key: 'Julie'},
-                ]}
-                renderItem={({item}) => <ListWidget name={item.key} ></ListWidget>}
-            />
         </SafeAreaView>
     );
 }
@@ -58,32 +46,4 @@ const styles = StyleSheet.create({
     },
 });
 
-type ListWidgetProps = {
-    name : String
-
-}
-
-export function ListWidget(props: ListWidgetProps) {
-    return (
-        <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',
-                }}
-            />
-            <View style={{height: 100, borderRadius: 20, justifyContent: "flex-start", flexDirection: 'column', paddingLeft:10}} >
-                <Text style={{color: "white", fontWeight:"bold", fontSize:25}}>{props.name}</Text>
-                <Text style={{color: "grey", fontWeight:"bold", fontSize:17}}>{props.name}</Text>
-                <View style={{marginVertical:10}}>
-                    <BadgeFilm name={"Science-Ficton"}/>
-                </View>
-            </View>
-        </View>
-
-
-    );
-
-
-}
 

screens/HomeScreen.tsx

@@ -2,14 +2,15 @@ import * as React from 'react';
 import {Button,TouchableOpacity,ScrollView,View, Text, StyleSheet, Image, ImageBackground, SafeAreaView} from 'react-native';
 import {RootStackScreenProps} from "../types.js";
 import Rive from 'rive-react-native';
-import {useRef} from "react";
+import {useEffect, useRef, useState} from "react";
 import {RiveViewManager} from "rive-react-native/lib/typescript/Rive.js";
 import {useSafeAreaInsets} from "react-native-safe-area-context";
 
 export default function App({ navigation }: RootStackScreenProps<'Home'>) {
-    const riveRef = useRef();
     const insets = useSafeAreaInsets();
 
+
+
     const styles = StyleSheet.create({
         background: {
             backgroundColor: 'black',