diff --git a/App.tsx b/App.tsx index 9b54a76..7d62845 100644 --- a/App.tsx +++ b/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 ( - - - - + + + + ); } } diff --git a/README.md b/README.md new file mode 100644 index 0000000..33a5028 --- /dev/null +++ b/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 + + + + + \ No newline at end of file diff --git a/api/tmdb.tsx b/api/tmdb.tsx new file mode 100644 index 0000000..092d176 --- /dev/null +++ b/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' + } +}) \ No newline at end of file diff --git a/components/ListWidget.tsx b/components/ListWidget.tsx new file mode 100644 index 0000000..ca7e7f9 --- /dev/null +++ b/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 ( + + + + {props.name} + {props.name} + + + + + + + + ); + + +} \ No newline at end of file diff --git a/components/MovieList.tsx b/components/MovieList.tsx new file mode 100644 index 0000000..9416bc7 --- /dev/null +++ b/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 + {movies.map((movie, index)=>{ + return + })} + +} + +export default MovieList; \ No newline at end of file diff --git a/interfaces.ts b/interfaces.ts new file mode 100644 index 0000000..e902dc5 --- /dev/null +++ b/interfaces.ts @@ -0,0 +1,3 @@ +export interface Movie{ + +} \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index ba86c83..5380fff 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 261a135..7d7888a 100644 --- a/package.json +++ b/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", diff --git a/screens/FavoriteScreen.tsx b/screens/FavoriteScreen.tsx index 93d40ce..de42c15 100644 --- a/screens/FavoriteScreen.tsx +++ b/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 ( @@ -19,21 +21,7 @@ export default function FavoriteScreen({ navigation }: RootTabScreenProps<'Favor - } - /> + ); } @@ -58,32 +46,4 @@ const styles = StyleSheet.create({ }, }); -type ListWidgetProps = { - name : String - -} - -export function ListWidget(props: ListWidgetProps) { - return ( - - - - {props.name} - {props.name} - - - - - - - - ); - - -} diff --git a/screens/HomeScreen.tsx b/screens/HomeScreen.tsx index 4ad3320..d0906a6 100644 --- a/screens/HomeScreen.tsx +++ b/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',