1 files changed, 162 insertions, 0 deletions
diff --git a/screens/home.js b/screens/home.js
new file mode 100644
index 0000000..184bbf9
--- /dev/null
+++ b/screens/home.js
@@ -0,0 +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;