1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
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;
|
