diff options
Diffstat (limited to 'screens/home.js')
| -rw-r--r-- | screens/home.js | 324 |
1 files changed, 162 insertions, 162 deletions
diff --git a/screens/home.js b/screens/home.js index 184bbf9..9d5addc 100644 --- a/screens/home.js +++ b/screens/home.js @@ -1,162 +1,162 @@ -import {useCallback, useEffect, useState} from 'react'; -import { - ImageBackground, - Platform, - Pressable, - SafeAreaView, - ScrollView, - Text, - TextInput, - View, -} from 'react-native'; -import tw from 'twrnc'; -import {useDeviceContext} from 'twrnc'; -import requests from '../lib/requests'; -import PreviewCard from '../components/PreviewCard'; -import Modal from './modal'; -//ICONS -import {TvIcon} from 'react-native-heroicons/outline'; -import {MagnifyingGlassIcon} from 'react-native-heroicons/outline'; -import {ChevronDownIcon} from 'react-native-heroicons/solid'; -import {UserIcon} from 'react-native-heroicons/outline'; -import ImageColors from 'react-native-image-colors'; -import LinearGradient from 'react-native-linear-gradient'; - -const Home = ({navigation}) => { - useDeviceContext(tw); - const imgAssets = process.env.IMG_ASSETS; - const [heroMovie, setHeroMovie] = useState(); - const [heroMovieColor, setHeroMovieColor] = useState(); - const [topRatedMovies, setTopRatedMovies] = useState(); - const [isModalVisible, setModalVisible] = useState(false); - const [modalContent, setModalContent] = useState(); - - const toggleModal = (movie) => { - setModalVisible(!isModalVisible); - setModalContent(movie); -}; - - useEffect(() => { - fetch(`https://api.themoviedb.org/3/movie/top_rated?api_key=f247ff737ec8062f3b5e027789eab748&language=en`) - .then(res => res.json()) - .then(data => { - setHeroMovie(data.results[1]); - setTopRatedMovies(data.results) - }); - }, []); - - useEffect(() => { - const fetchColor = async () => { - const data = await ImageColors.getColors( - `https://image.tmdb.org/t/p/original${heroMovie?.poster_path}`, - { - fallback: '#000000', - cache: true, - key: 'unique_key', - }, - ).then(data => { - if (Platform.OS === 'ios') { - setHeroMovieColor(data.primary); - } else { - setHeroMovieColor(data.average); - } - }); - } - if (heroMovie?.poster_path != undefined) { - fetchColor() - .catch(e => { - console.log(e) - return e - }); - } - }, [heroMovie]) - - return ( - <ScrollView style={tw`bg-black flex-1`}> - <SafeAreaView> - <View - style={tw`relative z-10 flex flex-row justify-between items-center px-6 gap-4 android:pt-4`} - > - <Text style={tw`android:hidden text-white font-bold text-xl`}> - For Matias - </Text> - <View style={tw`ios:hidden flex-6 relative`}> - <MagnifyingGlassIcon - style={tw`absolute z-10 left-2 top-2.5`} - color={tw.color('gray-300')} - size={20} - /> - <TextInput - style={tw`pr-4 pl-8 h-10 font-medium bg-white rounded w-full text-white`} - autoCorrect={false} - autoCapitalize={'none'} - placeholderTextColor={tw.color('text-gray-400')} - placeholder={'Search'} - /> - </View> - <View style={tw`flex android:flex-1 flex-row items-center gap-4`}> - <MagnifyingGlassIcon - style={tw`android:hidden`} - color={tw.color('white')} - size={20} - /> - <TvIcon color={tw.color('white')} size={20} /> - <Pressable - onPress={() => navigation.navigate('Profile')} - style={tw`rounded bg-white/20 w-6 h-6 flex items-center justify-center`} - > - <UserIcon color={tw.color('white')} size={16} /> - </Pressable> - </View> - </View> - <View style={tw`flex flex-row px-6 pt-3 gap-4 relative z-10`}> - <Pressable style={tw`border border-white/30 rounded-full px-2 py-1`}> - <Text style={tw`text-white`}>TV Shows</Text> - </Pressable> - <Pressable style={tw`border border-white/30 rounded-full px-2 py-1`}> - <Text style={tw`text-white`}>Movies</Text> - </Pressable> - <Pressable - style={tw`border border-white/30 rounded-full px-2 py-1 flex flex-row items-center gap-1`} - > - <Text style={tw`text-white`}>Categories</Text> - <ChevronDownIcon color={tw.color('gray-300')} size={16} /> - </Pressable> - </View> - <View style={tw`p-6 relative z-10`}> - <ImageBackground - source={{uri: `https://image.tmdb.org/t/p/original${heroMovie?.poster_path}`}} - resizeMode={'cover'} - style={tw`rounded-xl bg-white h-[500px] border border-white/30 overflow-hidden`} - ></ImageBackground> - </View> - {heroMovieColor !== undefined && ( - <LinearGradient - style={tw`absolute top-0 left-0 w-screen h-screen z-0`} - colors={[`${heroMovieColor}`, tw.color('black')]} - /> - )} - <View> - <Text style={tw`text-white mx-8`}>Popular on Netflix</Text> - <ScrollView - contentContainerStyle={tw`p-3 flex gap-3`} - horizontal - showsHorizontalScrollIndicator={false} - > - { - topRatedMovies?.map((movie, index) => ( - <Pressable key={index} onPress={() => toggleModal(movie)}> - <PreviewCard key={index} movie={movie} /> - </Pressable> - ))} - </ScrollView> - </View> - {isModalVisible && ( - <Modal closeModal={toggleModal} movie={modalContent}/> - )} - </SafeAreaView> - </ScrollView> - ); -}; - -export default Home; +import {useCallback, useEffect, useState} from 'react';
+import {
+ ImageBackground,
+ Platform,
+ Pressable,
+ SafeAreaView,
+ ScrollView,
+ Text,
+ TextInput,
+ View,
+} from 'react-native';
+import tw from 'twrnc';
+import {useDeviceContext} from 'twrnc';
+import requests from '../lib/requests';
+import PreviewCard from '../components/PreviewCard';
+import Modal from './modal';
+//ICONS
+import {TvIcon} from 'react-native-heroicons/outline';
+import {MagnifyingGlassIcon} from 'react-native-heroicons/outline';
+import {ChevronDownIcon} from 'react-native-heroicons/solid';
+import {UserIcon} from 'react-native-heroicons/outline';
+import ImageColors from 'react-native-image-colors';
+import LinearGradient from 'react-native-linear-gradient';
+
+const Home = ({navigation}) => {
+ useDeviceContext(tw);
+ const imgAssets = process.env.IMG_ASSETS;
+ const [heroMovie, setHeroMovie] = useState();
+ const [heroMovieColor, setHeroMovieColor] = useState();
+ const [topRatedMovies, setTopRatedMovies] = useState();
+ const [isModalVisible, setModalVisible] = useState(false);
+ const [modalContent, setModalContent] = useState();
+
+ const toggleModal = (movie) => {
+ setModalVisible(!isModalVisible);
+ setModalContent(movie);
+};
+
+ useEffect(() => {
+ fetch(`https://api.themoviedb.org/3/movie/top_rated?api_key=f247ff737ec8062f3b5e027789eab748&language=en`)
+ .then(res => res.json())
+ .then(data => {
+ setHeroMovie(data.results[1]);
+ setTopRatedMovies(data.results)
+ });
+ }, []);
+
+ useEffect(() => {
+ const fetchColor = async () => {
+ const data = await ImageColors.getColors(
+ `https://image.tmdb.org/t/p/original${heroMovie?.poster_path}`,
+ {
+ fallback: '#000000',
+ cache: true,
+ key: 'unique_key',
+ },
+ ).then(data => {
+ if (Platform.OS === 'ios') {
+ setHeroMovieColor(data.primary);
+ } else {
+ setHeroMovieColor(data.average);
+ }
+ });
+ }
+ if (heroMovie?.poster_path != undefined) {
+ fetchColor()
+ .catch(e => {
+ console.log(e)
+ return e
+ });
+ }
+ }, [heroMovie])
+
+ return (
+ <ScrollView style={tw`bg-black flex-1`}>
+ <SafeAreaView>
+ <View
+ style={tw`relative z-10 flex flex-row justify-between items-center px-6 gap-4 android:pt-4`}
+ >
+ <Text style={tw`android:hidden text-white font-bold text-xl`}>
+ For Matias
+ </Text>
+ <View style={tw`ios:hidden flex-6 relative`}>
+ <MagnifyingGlassIcon
+ style={tw`absolute z-10 left-2 top-2.5`}
+ color={tw.color('gray-300')}
+ size={20}
+ />
+ <TextInput
+ style={tw`pr-4 pl-8 h-10 font-medium bg-white rounded w-full text-white`}
+ autoCorrect={false}
+ autoCapitalize={'none'}
+ placeholderTextColor={tw.color('text-gray-400')}
+ placeholder={'Search'}
+ />
+ </View>
+ <View style={tw`flex android:flex-1 flex-row items-center gap-4`}>
+ <MagnifyingGlassIcon
+ style={tw`android:hidden`}
+ color={tw.color('white')}
+ size={20}
+ />
+ <TvIcon color={tw.color('white')} size={20} />
+ <Pressable
+ onPress={() => navigation.navigate('Profile')}
+ style={tw`rounded bg-white/20 w-6 h-6 flex items-center justify-center`}
+ >
+ <UserIcon color={tw.color('white')} size={16} />
+ </Pressable>
+ </View>
+ </View>
+ <View style={tw`flex flex-row px-6 pt-3 gap-4 relative z-10`}>
+ <Pressable style={tw`border border-white/30 rounded-full px-2 py-1`}>
+ <Text style={tw`text-white`}>TV Shows</Text>
+ </Pressable>
+ <Pressable style={tw`border border-white/30 rounded-full px-2 py-1`}>
+ <Text style={tw`text-white`}>Movies</Text>
+ </Pressable>
+ <Pressable
+ style={tw`border border-white/30 rounded-full px-2 py-1 flex flex-row items-center gap-1`}
+ >
+ <Text style={tw`text-white`}>Categories</Text>
+ <ChevronDownIcon color={tw.color('gray-300')} size={16} />
+ </Pressable>
+ </View>
+ <View style={tw`p-6 relative z-10`}>
+ <ImageBackground
+ source={{uri: `https://image.tmdb.org/t/p/original${heroMovie?.poster_path}`}}
+ resizeMode={'cover'}
+ style={tw`rounded-xl bg-white h-[500px] border border-white/30 overflow-hidden`}
+ ></ImageBackground>
+ </View>
+ {heroMovieColor !== undefined && (
+ <LinearGradient
+ style={tw`absolute top-0 left-0 w-screen h-screen z-0`}
+ colors={[`${heroMovieColor}`, tw.color('black')]}
+ />
+ )}
+ <View>
+ <Text style={tw`text-white mx-8`}>Popular on Netflix</Text>
+ <ScrollView
+ contentContainerStyle={tw`p-3 flex gap-3`}
+ horizontal
+ showsHorizontalScrollIndicator={false}
+ >
+ {
+ topRatedMovies?.map((movie, index) => (
+ <Pressable key={index} onPress={() => toggleModal(movie)}>
+ <PreviewCard key={index} movie={movie} />
+ </Pressable>
+ ))}
+ </ScrollView>
+ </View>
+ {isModalVisible && (
+ <Modal closeModal={toggleModal} movie={modalContent}/>
+ )}
+ </SafeAreaView>
+ </ScrollView>
+ );
+};
+
+export default Home;
|