├── .expo-shared
    └── assets.json
├── .gitignore
├── App.js
├── app.json
├── assets
    ├── Bye
    │   └── bye.jpg
    ├── Drive
    │   ├── HidetoshiNishijima.jpg
    │   ├── ReikaKirishima.jfif
    │   ├── ReikaKirishima.jpg
    │   ├── SoniaYuan.jpg
    │   ├── TokoMiura.jpg
    │   └── car.jpg
    ├── Encanto
    │   ├── bruno.jpg
    │   ├── dolores.jpg
    │   ├── encanto.jpeg
    │   ├── isabela.jpg
    │   ├── luisa.jpg
    │   ├── mariano.PNG
    │   ├── maribel.jpg
    │   └── pepa.jpg
    ├── OscarCapa.png
    ├── Queen
    │   └── queen.jpg
    ├── Ritimo
    │   ├── DanielDurant.jpg
    │   ├── EmiliaJones.jpg
    │   ├── EugenioDerbez.jpg
    │   ├── FerdiaWalsh_Peelo.jpg
    │   ├── MarleeMatlin.jpg
    │   ├── TroyKotsur.jpg
    │   └── ritimo.jpg
    ├── Summer
    │   └── summer.jpg
    ├── Wiper
    │   └── wiper.jpg
    └── favicon.png
├── babel.config.js
├── package-lock.json
├── package.json
└── src
    ├── routes
        ├── Stack
        │   └── app.js
        └── app.js
    └── screens
        ├── Conteudo.js
        ├── Filme1.js
        ├── Filme2.js
        ├── Filme3.js
        ├── Filme4.js
        └── Home.js


/.expo-shared/assets.json:
--------------------------------------------------------------------------------
1 | {
2 |   "12bb71342c6255bbf50437ec8f4441c083f47cdb74bd89160c15e4f43e52a1cb": true,
3 |   "40b842e832070c58deac6aa9e08fa459302ee3f9da492c7e77d93d2fbf4a56fd": true
4 | }
5 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | node_modules/
 2 | .expo/
 3 | dist/
 4 | npm-debug.*
 5 | *.jks
 6 | *.p8
 7 | *.p12
 8 | *.key
 9 | *.mobileprovision
10 | *.orig.*
11 | web-build/
12 | 
13 | # macOS
14 | .DS_Store
15 | 


--------------------------------------------------------------------------------
/App.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | 
3 | import Route from "./src/routes/app";
4 | 
5 | export default function(){
6 |   return(
7 |     <Route />
8 |   );
9 | }


--------------------------------------------------------------------------------
/app.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "expo": {
 3 |     "name": "oscar2022",
 4 |     "slug": "oscar2022",
 5 |     "version": "1.0.0",
 6 |     "orientation": "portrait",
 7 |     "icon": "./assets/icon.png",
 8 |     "userInterfaceStyle": "light",
 9 |     "splash": {
10 |       "backgroundColor": "#ffffff"
11 |     },
12 |     "updates": {
13 |       "fallbackToCacheTimeout": 0
14 |     },
15 |     "assetBundlePatterns": [
16 |       "**/*"
17 |     ],
18 |     "ios": {
19 |       "supportsTablet": true
20 |     },
21 |     "android": {
22 |       "adaptiveIcon": {
23 |         "backgroundColor": "#FFFFFF"
24 |       }
25 |     },
26 |     "web": {
27 |       "favicon": "./assets/favicon.png"
28 |     }
29 |   }
30 | }
31 | 


--------------------------------------------------------------------------------
/assets/Bye/bye.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wwpedro/ReactProject/1cbd63ee04b316985e915dca19bd26ee389419a3/assets/Bye/bye.jpg


--------------------------------------------------------------------------------
/assets/Drive/HidetoshiNishijima.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wwpedro/ReactProject/1cbd63ee04b316985e915dca19bd26ee389419a3/assets/Drive/HidetoshiNishijima.jpg


--------------------------------------------------------------------------------
/assets/Drive/ReikaKirishima.jfif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wwpedro/ReactProject/1cbd63ee04b316985e915dca19bd26ee389419a3/assets/Drive/ReikaKirishima.jfif


--------------------------------------------------------------------------------
/assets/Drive/ReikaKirishima.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wwpedro/ReactProject/1cbd63ee04b316985e915dca19bd26ee389419a3/assets/Drive/ReikaKirishima.jpg


--------------------------------------------------------------------------------
/assets/Drive/SoniaYuan.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wwpedro/ReactProject/1cbd63ee04b316985e915dca19bd26ee389419a3/assets/Drive/SoniaYuan.jpg


--------------------------------------------------------------------------------
/assets/Drive/TokoMiura.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wwpedro/ReactProject/1cbd63ee04b316985e915dca19bd26ee389419a3/assets/Drive/TokoMiura.jpg


--------------------------------------------------------------------------------
/assets/Drive/car.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wwpedro/ReactProject/1cbd63ee04b316985e915dca19bd26ee389419a3/assets/Drive/car.jpg


--------------------------------------------------------------------------------
/assets/Encanto/bruno.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wwpedro/ReactProject/1cbd63ee04b316985e915dca19bd26ee389419a3/assets/Encanto/bruno.jpg


--------------------------------------------------------------------------------
/assets/Encanto/dolores.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wwpedro/ReactProject/1cbd63ee04b316985e915dca19bd26ee389419a3/assets/Encanto/dolores.jpg


--------------------------------------------------------------------------------
/assets/Encanto/encanto.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wwpedro/ReactProject/1cbd63ee04b316985e915dca19bd26ee389419a3/assets/Encanto/encanto.jpeg


--------------------------------------------------------------------------------
/assets/Encanto/isabela.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wwpedro/ReactProject/1cbd63ee04b316985e915dca19bd26ee389419a3/assets/Encanto/isabela.jpg


--------------------------------------------------------------------------------
/assets/Encanto/luisa.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wwpedro/ReactProject/1cbd63ee04b316985e915dca19bd26ee389419a3/assets/Encanto/luisa.jpg


--------------------------------------------------------------------------------
/assets/Encanto/mariano.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wwpedro/ReactProject/1cbd63ee04b316985e915dca19bd26ee389419a3/assets/Encanto/mariano.PNG


--------------------------------------------------------------------------------
/assets/Encanto/maribel.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wwpedro/ReactProject/1cbd63ee04b316985e915dca19bd26ee389419a3/assets/Encanto/maribel.jpg


--------------------------------------------------------------------------------
/assets/Encanto/pepa.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wwpedro/ReactProject/1cbd63ee04b316985e915dca19bd26ee389419a3/assets/Encanto/pepa.jpg


--------------------------------------------------------------------------------
/assets/OscarCapa.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wwpedro/ReactProject/1cbd63ee04b316985e915dca19bd26ee389419a3/assets/OscarCapa.png


--------------------------------------------------------------------------------
/assets/Queen/queen.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wwpedro/ReactProject/1cbd63ee04b316985e915dca19bd26ee389419a3/assets/Queen/queen.jpg


--------------------------------------------------------------------------------
/assets/Ritimo/DanielDurant.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wwpedro/ReactProject/1cbd63ee04b316985e915dca19bd26ee389419a3/assets/Ritimo/DanielDurant.jpg


--------------------------------------------------------------------------------
/assets/Ritimo/EmiliaJones.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wwpedro/ReactProject/1cbd63ee04b316985e915dca19bd26ee389419a3/assets/Ritimo/EmiliaJones.jpg


--------------------------------------------------------------------------------
/assets/Ritimo/EugenioDerbez.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wwpedro/ReactProject/1cbd63ee04b316985e915dca19bd26ee389419a3/assets/Ritimo/EugenioDerbez.jpg


--------------------------------------------------------------------------------
/assets/Ritimo/FerdiaWalsh_Peelo.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wwpedro/ReactProject/1cbd63ee04b316985e915dca19bd26ee389419a3/assets/Ritimo/FerdiaWalsh_Peelo.jpg


--------------------------------------------------------------------------------
/assets/Ritimo/MarleeMatlin.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wwpedro/ReactProject/1cbd63ee04b316985e915dca19bd26ee389419a3/assets/Ritimo/MarleeMatlin.jpg


--------------------------------------------------------------------------------
/assets/Ritimo/TroyKotsur.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wwpedro/ReactProject/1cbd63ee04b316985e915dca19bd26ee389419a3/assets/Ritimo/TroyKotsur.jpg


--------------------------------------------------------------------------------
/assets/Ritimo/ritimo.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wwpedro/ReactProject/1cbd63ee04b316985e915dca19bd26ee389419a3/assets/Ritimo/ritimo.jpg


--------------------------------------------------------------------------------
/assets/Summer/summer.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wwpedro/ReactProject/1cbd63ee04b316985e915dca19bd26ee389419a3/assets/Summer/summer.jpg


--------------------------------------------------------------------------------
/assets/Wiper/wiper.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wwpedro/ReactProject/1cbd63ee04b316985e915dca19bd26ee389419a3/assets/Wiper/wiper.jpg


--------------------------------------------------------------------------------
/assets/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wwpedro/ReactProject/1cbd63ee04b316985e915dca19bd26ee389419a3/assets/favicon.png


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = function(api) {
2 |   api.cache(true);
3 |   return {
4 |     presets: ['babel-preset-expo'],
5 |   };
6 | };
7 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "app-pedro",
 3 |   "version": "1.0.0",
 4 |   "main": "node_modules/expo/AppEntry.js",
 5 |   "scripts": {
 6 |     "start": "expo start",
 7 |     "android": "expo start --android",
 8 |     "ios": "expo start --ios",
 9 |     "web": "expo start --web",
10 |     "eject": "expo eject"
11 |   },
12 |   "dependencies": {
13 |     "@expo-google-fonts/lora": "^0.2.2",
14 |     "@expo-google-fonts/montserrat": "^0.2.2",
15 |     "@react-navigation/native": "^6.0.11",
16 |     "@react-navigation/native-stack": "^6.7.0",
17 |     "expo": "~45.0.0",
18 |     "expo-app-loading": "~2.0.0",
19 |     "expo-font": "~10.1.0",
20 |     "expo-status-bar": "~1.3.0",
21 |     "link": "^1.5.0",
22 |     "react": "17.0.2",
23 |     "react-dom": "17.0.2",
24 |     "react-native": "0.68.2",
25 |     "react-native-safe-area-context": "^4.2.4",
26 |     "react-native-screens": "~3.11.1",
27 |     "react-native-vector-icons": "^9.2.0",
28 |     "react-native-web": "0.17.7"
29 |   },
30 |   "devDependencies": {
31 |     "@babel/core": "^7.12.9"
32 |   },
33 |   "private": true
34 | }
35 | 


--------------------------------------------------------------------------------
/src/routes/Stack/app.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | // dizer quais são as rotas
 4 | import Home from "../../screens/Home";
 5 | import Filme1 from "../../screens/Filme1";
 6 | import Filme2 from "../../screens/Filme2";
 7 | import Filme3 from "../../screens/Filme3";
 8 | import Conteudo from "../../screens/Conteudo";
 9 | 
10 | //importar create para trabalhar com navegacoes
11 | import { createNativeStackNavigator } from "@react-navigation/native-stack";
12 | 
13 | //criando contexto de navegação do tipo stack
14 | const { Navigator, Screen} = createNativeStackNavigator()
15 | 
16 | export default function(){
17 |     return(
18 |         //recebe as telas
19 |         <Navigator initialRouteName="Home" screenOptions={{headerShown:false}}>
20 |             <Screen name="Home" component={Home} />
21 |             <Screen name="Filme1" component={Filme1} />
22 |             <Screen name="Filme2" component={Filme2} />
23 |             <Screen name="Filme3" component={Filme3} />
24 |             <Screen name="Conteudo" component={Conteudo} />
25 |         </Navigator>
26 |     );
27 | }


--------------------------------------------------------------------------------
/src/routes/app.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | import {NavigationContainer} from "@react-navigation/native";
 4 | 
 5 | import Stack from "./Stack/app"
 6 | 
 7 | //colocar todas as rotas entro de navgation
 8 | export default function(){
 9 |     return(
10 |         <NavigationContainer>
11 |             <Stack />
12 |         </NavigationContainer>
13 |     );
14 | }


--------------------------------------------------------------------------------
/src/screens/Conteudo.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import {StyleSheet, TouchableOpacity, View } from "react-native";
 3 | import {useNavigation} from '@react-navigation/native';
 4 | 
 5 | import Ionicons from "react-native-vector-icons/Ionicons";
 6 | import IconFontAwesome from "react-native-vector-icons/FontAwesome";
 7 | 
 8 | export default function Conteudos() {
 9 | 
10 |     const navigation = useNavigation();
11 | 
12 |     return (
13 |       
14 |         <View style={estilos.tela}>
15 |             <Ionicons name="ios-construct-sharp" size={50} color="gray"></Ionicons>
16 |             <TouchableOpacity onPress={()=>navigation.goBack()}>
17 |                 <IconFontAwesome name="arrow-left" size={50} color="black" ></IconFontAwesome>
18 |             </TouchableOpacity>
19 |             
20 |         </View>
21 |     );
22 | }
23 | 
24 | const estilos = StyleSheet.create({
25 |     tela:{
26 |         alignItems:"center",
27 |         justifyContent:"center",
28 |         flex: 1,
29 |         flexDirection: "column"
30 |     }
31 | })


--------------------------------------------------------------------------------
/src/screens/Filme1.js:
--------------------------------------------------------------------------------
  1 | import React from "react";
  2 | import { Image, ScrollView, StyleSheet, Text, View,Linking } from "react-native";
  3 | import {useNavigation} from '@react-navigation/native';
  4 | import AppLoading from 'expo-app-loading';
  5 | import { useFonts, Lora_400Regular } from '@expo-google-fonts/lora';
  6 | 
  7 | import IconFontAwesome from "react-native-vector-icons/FontAwesome";
  8 | import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityIcons";
  9 | 
 10 | import Encanto from "../../assets/Encanto/encanto.jpeg";
 11 | import Maribel from "../../assets/Encanto/maribel.jpg";
 12 | import Isabela from "../../assets/Encanto/isabela.jpg";
 13 | import Bruno from "../../assets/Encanto/bruno.jpg";
 14 | import Luisa from "../../assets/Encanto/luisa.jpg";
 15 | import Pepa from "../../assets/Encanto/pepa.jpg";
 16 | import Dolores from "../../assets/Encanto/dolores.jpg";
 17 | 
 18 | export default function Conteudos() {
 19 | 
 20 |     const navigation = useNavigation();
 21 |     
 22 |     let [fontsLoaded] = useFonts({
 23 |         Lora_400Regular,
 24 |       });
 25 |     
 26 |     if (!fontsLoaded) {
 27 |         return <AppLoading />;
 28 |     }
 29 | 
 30 |     return (
 31 |       
 32 |         <ScrollView style={estilos.scrow}>
 33 |             <View style={estilos.tela}>
 34 |                 <View style={estilos.capa}>
 35 |                     <Image  source={Encanto} style={estilos.imagemCapa} />
 36 |                     <View style={estilos.imagemCapaConteudo}>
 37 |                         <IconFontAwesome onPress={()=>navigation.goBack()} name="arrow-left" size={20} color="#ffffff" style={estilos.classificacaoEstrela}></IconFontAwesome>
 38 |                     </View>    
 39 |                 </View>
 40 |                 <View style={estilos.conteudoView}>
 41 |                     <View style={estilos.sobreFilme}>
 42 |                         <Text style={estilos.titulo}>
 43 |                             Encanto
 44 |                         </Text>
 45 |                         <View style={estilos.texto}>            
 46 |                             <Text style={estilos.textoConteudo}>
 47 |                                 <Text style={estilos.primeiraLetra}>V</Text>
 48 |                                 encedor do Globo de Ouro de animação e um dos favoritos na disputa 
 49 |                                 do Oscar deste ano, conta a história dos Madrigal, uma família extraordinária 
 50 |                                 que vive em um povoado na Colômbia. Cada membro tem um dom especial: força 
 51 |                                 excepcional, a capacidade de criar flores ou o poder de curar através da comida.
 52 |                             </Text>
 53 |                             <MaterialCommunityIcons name="movie-filter" size={30} color="blck" onPress={()=>{Linking.openURL('https://www.youtube.com/watch?v=zRMicKd9IH8');}} ></MaterialCommunityIcons>
 54 |                         </View>
 55 |                     </View>
 56 | 
 57 |                     <View style={estilos.elenco}>
 58 |                         <Text style={estilos.tituloElenco}>Personagens</Text>
 59 |                         <View style={estilos.elencoScrowll}>
 60 |                             <ScrollView horizontal={true} showsHorizontalScrollIndicator={false}>
 61 |                                 <View style={estilos.personagem}>
 62 |                                     <Image  source={Maribel} style={estilos.elencoImg}/>
 63 |                                     <Text style={estilos.pessoaElenco}>Mirabel Madrigal</Text>
 64 |                                 </View>
 65 |                                 <View style={estilos.personagem}>
 66 |                                     <Image  source={Bruno} style={estilos.elencoImg}/>
 67 |                                     <Text style={estilos.pessoaElenco}>Bruno Madrigal</Text>
 68 |                                 </View>
 69 |                                 <View style={estilos.personagem}>
 70 |                                     <Image  source={Isabela} style={estilos.elencoImg}/>
 71 |                                     <Text style={estilos.pessoaElenco}>Isabela Madrigal</Text>
 72 |                                 </View>
 73 |                                 <View style={estilos.personagem}>
 74 |                                     <Image  source={Luisa} style={estilos.elencoImg}/>
 75 |                                     <Text style={estilos.pessoaElenco}>Luisa Madrigal</Text>
 76 |                                 </View>
 77 |                                 <View style={estilos.personagem}>
 78 |                                     <Image  source={Pepa} style={estilos.elencoImg}/>
 79 |                                     <Text style={estilos.pessoaElenco}>Pepa Madrigal</Text>
 80 |                                 </View>
 81 |                                 <View style={estilos.personagem}>
 82 |                                     <Image  source={Dolores} style={estilos.elencoImg}/>
 83 |                                     <Text style={estilos.pessoaElenco}>Dolores Madrigal</Text>
 84 |                                 </View>
 85 |                             </ScrollView>
 86 |                         </View>
 87 |                     </View>
 88 | 
 89 |                     <View style={estilos.classificacao}>
 90 |                         <Text style={estilos.titulo}>Classificação</Text>
 91 |                         <View style={estilos.classificacaoEstrelas}>
 92 |                             <IconFontAwesome name="star" size={30} color="black" style={estilos.classificacaoEstrela}></IconFontAwesome>
 93 |                             <IconFontAwesome name="star" size={30} color="black" style={estilos.classificacaoEstrela}></IconFontAwesome>
 94 |                             <IconFontAwesome name="star" size={30} color="black" style={estilos.classificacaoEstrela}></IconFontAwesome>
 95 |                             <IconFontAwesome name="star" size={30} color="black" style={estilos.classificacaoEstrela}></IconFontAwesome>
 96 |                             <IconFontAwesome name="star" size={30} color="black" style={estilos.classificacaoEstrela}></IconFontAwesome>
 97 |                         </View>
 98 |                     </View>
 99 |                 </View>
100 |             </View>
101 | 
102 |         </ScrollView>
103 |     );
104 | }
105 | 
106 | const estilos = StyleSheet.create({
107 |     scrow:{
108 |         backgroundColor: "#ffffff",
109 |     },
110 |     tela:{
111 |         alignItems:"center",
112 |         flexDirection:"column",
113 |         flex:1,
114 |         justifyContent:"center"
115 |     },
116 |     
117 |     //capa
118 |     capa:{
119 |         height: 300,
120 |         width: "100%",
121 |         borderBottomLeftRadius: 50,
122 |         flexDirection:"row",
123 |         marginTop:"15%"
124 |     },
125 |     imagemCapa:{
126 |         width: "100%",
127 |         height:300,
128 |         borderBottomLeftRadius: 70,
129 |     },
130 |     imagemCapaConteudo:{
131 |         height: 300,
132 |         width: "40%",
133 |         borderBottomLeftRadius: 50,
134 |         position:"absolute",
135 |         marginTop: 70,
136 |         marginLeft:10 
137 |     },
138 |     botao:{
139 |         padding:20,
140 |         margin:30,
141 |         backgroundColor: "#D4D4D4"
142 |     },
143 | 
144 |     //conteudo de texto
145 |     conteudoView:{
146 |         flexDirection:"column",
147 |         alignItems:"center",
148 |         width:"100%"
149 |     },
150 |     sobreFilme:{
151 |         flexDirection:"column",
152 |         alignItems:"center"
153 |     },
154 |     titulo:{
155 |         fontSize: 40,
156 |         fontFamily:"Lora_400Regular"
157 |     },
158 |     texto:{
159 |         flexDirection: "column",
160 |         width:"80%",
161 |         alignItems:"flex-end",
162 |         justifyContent:"center"
163 |     },
164 |     primeiraLetra:{
165 |         height:50,
166 |         width:50,
167 |         fontSize:50,
168 |         alignItems:"center",
169 |         justifyContent:"center",
170 |         position:"relative",
171 |         fontFamily:"Lora_400Regular"
172 |     },
173 |     textoConteudo:{
174 |         fontSize:15,
175 |         fontFamily:"Lora_400Regular"
176 |     },
177 | 
178 | 
179 |     //elenco
180 |     elenco:{
181 |         marginTop:30,
182 |         height:"40%",
183 |         width:"100%",
184 |         backgroundColor:"black",
185 |         justifyContent:"center",
186 |         alignItems:"center"
187 |     },
188 |     tituloElenco:{
189 |         color:"#ffffff",
190 |         fontSize: 40,
191 |         fontFamily:"Lora_400Regular"
192 |     },
193 |     pessoaElenco:{
194 |         color:"#ffffff",
195 |         fontSize:15,
196 |         fontFamily:"Lora_400Regular"
197 |     },
198 |     elencoScrowll:{
199 |         flexDirection:"row",
200 |         paddingTop: 10,
201 |         padding:20,
202 |         paddingHorizontal:0
203 |         
204 |     },
205 |     elencoImg:{
206 |         width: 150,
207 |         height: 200,
208 |         margin:10,
209 |     },
210 |     personagem:{
211 |         alignItems:"center"
212 |     },
213 | 
214 |         
215 |     classificacao:{
216 |         marginVertical:20
217 |     },
218 |     classificacaoEstrelas:{
219 |         justifyContent:"center",
220 |         alignItems:"center",
221 |         flexDirection:"row",
222 |         marginVertical:30
223 |     },
224 |     classificacaoEstrela:{
225 |         marginHorizontal:10
226 |     }
227 | })


--------------------------------------------------------------------------------
/src/screens/Filme2.js:
--------------------------------------------------------------------------------
  1 | import React from "react";
  2 | import { Image, ScrollView, StyleSheet, Text, View,Linking } from "react-native";
  3 | import {useNavigation} from '@react-navigation/native';
  4 | import AppLoading from 'expo-app-loading';
  5 | import { useFonts, Lora_400Regular } from '@expo-google-fonts/lora';
  6 | 
  7 | import IconFontAwesome from "react-native-vector-icons/FontAwesome";
  8 | import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityIcons";
  9 | 
 10 | import Ritimo from "../../assets/Ritimo/ritimo.jpg"
 11 | import Emilia from "../../assets/Ritimo/EmiliaJones.jpg"
 12 | import DanielDurant from "../../assets/Ritimo/DanielDurant.jpg"
 13 | import EugenioDerbez from "../../assets/Ritimo/EugenioDerbez.jpg"
 14 | import FerdiaWalsh_Peelo from "../../assets/Ritimo/FerdiaWalsh_Peelo.jpg"
 15 | import MarleeMatlin from "../../assets/Ritimo/MarleeMatlin.jpg"
 16 | import TroyKotsur from "../../assets/Ritimo/TroyKotsur.jpg"
 17 | 
 18 | export default function Conteudos() {
 19 | 
 20 |     const navigation = useNavigation();
 21 |     
 22 |     let [fontsLoaded] = useFonts({
 23 |         Lora_400Regular,
 24 |       });
 25 |     
 26 |     if (!fontsLoaded) {
 27 |         return <AppLoading />;
 28 |     }
 29 | 
 30 |     return (
 31 |       
 32 |         <ScrollView style={estilos.scrow}>
 33 |             <View style={estilos.tela}>
 34 |                 <View style={estilos.capa}>
 35 |                     <Image  source={Ritimo} style={estilos.imagemCapa} />
 36 |                     <View style={estilos.imagemCapaConteudo}>
 37 |                         <IconFontAwesome onPress={()=>navigation.goBack()} name="arrow-left" size={20} color="#ffffff" style={estilos.classificacaoEstrela}></IconFontAwesome>
 38 |                     </View>    
 39 |                 </View>
 40 |                 <View style={estilos.conteudoView}>
 41 |                     <View style={estilos.sobreFilme}>
 42 |                         <Text style={estilos.titulo}>
 43 |                             No Ritmo do Coração
 44 |                         </Text>
 45 |                         <View style={estilos.texto}>            
 46 |                             <Text style={estilos.textoConteudo}>
 47 |                                 <Text style={estilos.primeiraLetra}>N</Text>
 48 |                                 o Ritmo do Coração conta a história de uma família com 
 49 |                                 deficiência auditiva que comanda um negócio de pesca em 
 50 |                                 Gloucester, nos Estados Unidos. Ruby (Emilia Jones), a 
 51 |                                 única pessoa da família que escuta, ajuda os pais e o 
 52 |                                 irmão surdo com as atividades do dia-a-dia. Mas por conta 
 53 |                                 disso, ela é vista como alguém estranha em sua escola, 
 54 |                                 isso até ela se juntar ao coral, onde acaba se envolvendo 
 55 |                                 romanticamente com um de seus colegas e começa a fazer 
 56 |                                 amizades. Com o tempo, ela percebe que tem uma grande 
 57 |                                 paixão por cantar e seu professor a encoraja a tentar 
 58 |                                 entrar em uma escola de música, já que sua voz é linda. 
 59 |                                 Enquanto isso, sua família luta para pagar as contas com 
 60 |                                 o negócio de pesca, pois novas taxas e sanções são impostas 
 61 |                                 pelo conselho local. A jovem, então, treina para ser aceita 
 62 |                                 na faculdade de Berklee, onde poderá seguir com o canto, mas 
 63 |                                 ela precisa decidir entre continuar ajudando sua família ou 
 64 |                                 ir atrás de seus sonhos.
 65 |                             </Text>
 66 |                             <MaterialCommunityIcons name="movie-filter" size={30} color="blck" onPress={()=>{Linking.openURL('https://www.youtube.com/watch?v=vVU2ixNLOt8');}} ></MaterialCommunityIcons>
 67 |                         </View>
 68 |                     </View>
 69 | 
 70 |                     <View style={estilos.elenco}>
 71 |                         <Text style={estilos.tituloElenco}>Personagens</Text>
 72 |                         <View style={estilos.elencoScrowll}>
 73 |                             <ScrollView horizontal={true} showsHorizontalScrollIndicator={false}>
 74 |                                 <View style={estilos.personagem}>
 75 |                                     <Image  source={Emilia} style={estilos.elencoImg}/>
 76 |                                     <Text style={estilos.pessoaElenco}>Emilia Torn</Text>
 77 |                                 </View>
 78 |                                 <View style={estilos.personagem}>
 79 |                                     <Image  source={DanielDurant} style={estilos.elencoImg}/>
 80 |                                     <Text style={estilos.pessoaElenco}>Daniel Durant</Text>
 81 |                                 </View>
 82 |                                 <View style={estilos.personagem}>
 83 |                                     <Image  source={EugenioDerbez} style={estilos.elencoImg}/>
 84 |                                     <Text style={estilos.pessoaElenco}>Eugenio Derbez</Text>
 85 |                                 </View>
 86 |                                 <View style={estilos.personagem}>
 87 |                                     <Image  source={FerdiaWalsh_Peelo} style={estilos.elencoImg}/>
 88 |                                     <Text style={estilos.pessoaElenco}>Ferdia Walsh-Peelo</Text>
 89 |                                 </View>
 90 |                                 <View style={estilos.personagem}>
 91 |                                     <Image  source={MarleeMatlin} style={estilos.elencoImg}/>
 92 |                                     <Text style={estilos.pessoaElenco}>Marlee Matlin</Text>
 93 |                                 </View>
 94 |                                 <View style={estilos.personagem}>
 95 |                                     <Image  source={TroyKotsur} style={estilos.elencoImg}/>
 96 |                                     <Text style={estilos.pessoaElenco}>Troy Kotsur</Text>
 97 |                                 </View>
 98 |                             </ScrollView>
 99 |                         </View>
100 |                     </View>
101 | 
102 |                     <View style={estilos.classificacao}>
103 |                         <Text style={estilos.titulo}>Classificação</Text>
104 |                         <View style={estilos.classificacaoEstrelas}>
105 |                             <IconFontAwesome name="star" size={30} color="black" style={estilos.classificacaoEstrela}></IconFontAwesome>
106 |                             <IconFontAwesome name="star" size={30} color="black" style={estilos.classificacaoEstrela}></IconFontAwesome>
107 |                             <IconFontAwesome name="star" size={30} color="black" style={estilos.classificacaoEstrela}></IconFontAwesome>
108 |                             <IconFontAwesome name="star" size={30} color="black" style={estilos.classificacaoEstrela}></IconFontAwesome>
109 |                             <IconFontAwesome name="star" size={30} color="black" style={estilos.classificacaoEstrela}></IconFontAwesome>
110 |                         </View>
111 |                     </View>
112 |                 </View>
113 |             </View>
114 | 
115 |         </ScrollView>
116 |     );
117 | }
118 | 
119 | const estilos = StyleSheet.create({
120 |     scrow:{
121 |         backgroundColor: "#ffffff",
122 |     },
123 |     tela:{
124 |         alignItems:"center",
125 |         flexDirection:"column",
126 |         flex:1,
127 |         justifyContent:"center"
128 |     },
129 |     
130 |     //capa
131 |     capa:{
132 |         height: 300,
133 |         width: "100%",
134 |         borderBottomLeftRadius: 50,
135 |         flexDirection:"row",
136 |         marginTop:"10%"
137 |     },
138 |     imagemCapa:{
139 |         width: "100%",
140 |         height:300,
141 |         borderBottomLeftRadius: 70,
142 |     },
143 |     imagemCapaConteudo:{
144 |         height: 300,
145 |         width: "40%",
146 |         borderBottomLeftRadius: 50,
147 |         position:"absolute",
148 |         marginTop: 70,
149 |         marginLeft:10 
150 |     },
151 |     botao:{
152 |         padding:20,
153 |         margin:30,
154 |         backgroundColor: "#D4D4D4"
155 |     },
156 | 
157 |     //conteudo de texto
158 |     conteudoView:{
159 |         flexDirection:"column",
160 |         alignItems:"center",
161 |         width:"100%"
162 |     },
163 |     sobreFilme:{
164 |         flexDirection:"column",
165 |         alignItems:"center"
166 |     },
167 |     titulo:{
168 |         fontSize: 40,
169 |         fontFamily:"Lora_400Regular"
170 |     },
171 |     texto:{
172 |         flexDirection: "column",
173 |         width:"80%",
174 |         alignItems:"flex-end",
175 |         justifyContent:"center"
176 |     },
177 |     primeiraLetra:{
178 |         height:50,
179 |         width:50,
180 |         fontSize:50,
181 |         alignItems:"center",
182 |         justifyContent:"center",
183 |         position:"relative",
184 |         fontFamily:"Lora_400Regular"
185 |     },
186 |     textoConteudo:{
187 |         fontSize:15,
188 |         fontFamily:"Lora_400Regular"
189 |     },
190 | 
191 | 
192 |     //elenco
193 |     elenco:{
194 |         marginTop:30,
195 |         height:"30%",
196 |         width:"100%",
197 |         backgroundColor:"black",
198 |         justifyContent:"center",
199 |         alignItems:"center"
200 |     },
201 |     tituloElenco:{
202 |         color:"#ffffff",
203 |         fontSize: 40,
204 |         fontFamily:"Lora_400Regular"
205 |     },
206 |     pessoaElenco:{
207 |         color:"#ffffff",
208 |         fontSize:15,
209 |         fontFamily:"Lora_400Regular"
210 |     },
211 |     elencoScrowll:{
212 |         flexDirection:"row",
213 |         paddingTop: 10,
214 |         padding:20,
215 |         paddingHorizontal:0
216 |         
217 |     },
218 |     elencoImg:{
219 |         width: 150,
220 |         height: 200,
221 |         margin:10,
222 |     },
223 |     personagem:{
224 |         alignItems:"center"
225 |     },
226 | 
227 |         
228 |     classificacao:{
229 |         marginVertical:20
230 |     },
231 |     classificacaoEstrelas:{
232 |         justifyContent:"center",
233 |         alignItems:"center",
234 |         flexDirection:"row",
235 |         marginVertical:30
236 |     },
237 |     classificacaoEstrela:{
238 |         marginHorizontal:10
239 |     }
240 | })


--------------------------------------------------------------------------------
/src/screens/Filme3.js:
--------------------------------------------------------------------------------
  1 | import React from "react";
  2 | import { Image, ScrollView, StyleSheet, Text, View,Linking } from "react-native";
  3 | import {useNavigation} from '@react-navigation/native';
  4 | import AppLoading from 'expo-app-loading';
  5 | import { useFonts, Lora_400Regular } from '@expo-google-fonts/lora';
  6 | 
  7 | import IconFontAwesome from "react-native-vector-icons/FontAwesome";
  8 | import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityIcons";
  9 | 
 10 | import Car from "../../assets/Drive/car.jpg"
 11 | import Reika from "../../assets/Drive/ReikaKirishima.jpg"
 12 | import Toko from "../../assets/Drive/TokoMiura.jpg"
 13 | import Hidetoshi from "../../assets/Drive/HidetoshiNishijima.jpg"
 14 | import Sonia from "../../assets/Drive/SoniaYuan.jpg"
 15 | 
 16 | export default function Conteudos() {
 17 | 
 18 |     const navigation = useNavigation();
 19 |     
 20 |     let [fontsLoaded] = useFonts({
 21 |         Lora_400Regular,
 22 |       });
 23 |     
 24 |     if (!fontsLoaded) {
 25 |         return <AppLoading />;
 26 |     }
 27 | 
 28 |     return (
 29 |       
 30 |         <ScrollView style={estilos.scrow}>
 31 |             <View style={estilos.tela}>
 32 |                 <View style={estilos.capa}>
 33 |                     <Image  source={Car} style={estilos.imagemCapa} />
 34 |                     <View style={estilos.imagemCapaConteudo}>
 35 |                         <IconFontAwesome onPress={()=>navigation.goBack()} name="arrow-left" size={20} color="#ffffff" style={estilos.classificacaoEstrela}></IconFontAwesome>
 36 |                     </View>    
 37 |                 </View>
 38 |                 <View style={estilos.conteudoView}>
 39 |                     <View style={estilos.sobreFilme}>
 40 |                         <Text style={estilos.titulo}>
 41 |                             Drive My Car
 42 |                         </Text>
 43 |                         <View style={estilos.texto}>            
 44 |                             <Text style={estilos.textoConteudo}>
 45 |                                 <Text style={estilos.primeiraLetra}>E</Text>
 46 |                                 m Drive My Car, adaptado de um conto de Haruki Murakami, o 
 47 |                                 filme segue duas pessoas solitárias que encontram coragem para
 48 |                                  enfrentar o seu passado. Yusuke Kafuku (Hidetoshi Nishijima) é 
 49 |                                  um ator e diretor de sucesso no teatro, casado com Oto 
 50 |                                  (Reika Kirishima), uma mulher muito bonita, porém também uma 
 51 |                                  roteirista com muitos segredos, com que divide sua vida, seu 
 52 |                                  passado e colaboração artística. Quando Oto morre repentinamente, 
 53 |                                  Kafuku é deixado com muitas perguntas sem respostas de seu relacionamento 
 54 |                                  com ela e arrependimento de nunca conseguir compreendê-la completamente. 
 55 |                                  Dois anos depois, ainda sem conseguir sair do luto, ele aceita dirigir uma 
 56 |                                  peça no teatro de Hiroshima, embarcando em seu precioso carro Saab 900. Lá, 
 57 |                                  ele conhece e tem que lidar com Misaki Watari (Toko Miura), uma jovem chauffeur, 
 58 |                                  com que tem que deixar o carro. Apesar de suas dúvidas iniciais, uma relação muito 
 59 |                                  especial se desenvolve entre os dois.
 60 |                             </Text>
 61 |                             <MaterialCommunityIcons name="movie-filter" size={30} color="blck" onPress={()=>{Linking.openURL('https://www.youtube.com/watch?v=vVU2ixNLOt8');}} ></MaterialCommunityIcons>
 62 |                         </View>
 63 |                     </View>
 64 | 
 65 |                     <View style={estilos.elenco}>
 66 |                         <Text style={estilos.tituloElenco}>Personagens</Text>
 67 |                         <View style={estilos.elencoScrowll}>
 68 |                             <ScrollView horizontal={true} showsHorizontalScrollIndicator={false}>
 69 |                                 <View style={estilos.personagem}>
 70 |                                     <Image  source={Reika} style={estilos.elencoImg}/>
 71 |                                     <Text style={estilos.pessoaElenco}>Reika Kirishima</Text>
 72 |                                 </View>
 73 |                                 <View style={estilos.personagem}>
 74 |                                     <Image  source={Toko} style={estilos.elencoImg}/>
 75 |                                     <Text style={estilos.pessoaElenco}>Toko Miura</Text>
 76 |                                 </View>
 77 |                                 <View style={estilos.personagem}>
 78 |                                     <Image  source={Hidetoshi} style={estilos.elencoImg}/>
 79 |                                     <Text style={estilos.pessoaElenco}>Hidetoshi Nishijima</Text>
 80 |                                 </View>
 81 |                                 <View style={estilos.personagem}>
 82 |                                     <Image  source={Sonia} style={estilos.elencoImg}/>
 83 |                                     <Text style={estilos.pessoaElenco}>Sonia Yuan</Text>
 84 |                                 </View>
 85 |                             </ScrollView>
 86 |                         </View>
 87 |                     </View>
 88 | 
 89 |                     <View style={estilos.classificacao}>
 90 |                         <Text style={estilos.titulo}>Classificação</Text>
 91 |                         <View style={estilos.classificacaoEstrelas}>
 92 |                             <IconFontAwesome name="star" size={30} color="black" style={estilos.classificacaoEstrela}></IconFontAwesome>
 93 |                             <IconFontAwesome name="star" size={30} color="black" style={estilos.classificacaoEstrela}></IconFontAwesome>
 94 |                             <IconFontAwesome name="star" size={30} color="black" style={estilos.classificacaoEstrela}></IconFontAwesome>
 95 |                             <IconFontAwesome name="star" size={30} color="black" style={estilos.classificacaoEstrela}></IconFontAwesome>
 96 |                             <IconFontAwesome name="star" size={30} color="black" style={estilos.classificacaoEstrela}></IconFontAwesome>
 97 |                         </View>
 98 |                     </View>
 99 |                 </View>
100 |             </View>
101 | 
102 |         </ScrollView>
103 |     );
104 | }
105 | 
106 | const estilos = StyleSheet.create({
107 |     scrow:{
108 |         backgroundColor: "#ffffff",
109 |     },
110 |     tela:{
111 |         alignItems:"center",
112 |         flexDirection:"column",
113 |         flex:1,
114 |         justifyContent:"center"
115 |     },
116 |     
117 |     //capa
118 |     capa:{
119 |         height: 300,
120 |         width: "100%",
121 |         borderBottomLeftRadius: 50,
122 |         flexDirection:"row",
123 |         marginTop:"10%"
124 |     },
125 |     imagemCapa:{
126 |         width: "100%",
127 |         height:300,
128 |         borderBottomLeftRadius: 70,
129 |     },
130 |     imagemCapaConteudo:{
131 |         height: 300,
132 |         width: "40%",
133 |         borderBottomLeftRadius: 50,
134 |         position:"absolute",
135 |         marginTop: 70,
136 |         marginLeft:10 
137 |     },
138 |     botao:{
139 |         padding:20,
140 |         margin:30,
141 |         backgroundColor: "#D4D4D4"
142 |     },
143 | 
144 |     //conteudo de texto
145 |     conteudoView:{
146 |         flexDirection:"column",
147 |         alignItems:"center",
148 |         width:"100%"
149 |     },
150 |     sobreFilme:{
151 |         flexDirection:"column",
152 |         alignItems:"center"
153 |     },
154 |     titulo:{
155 |         fontSize: 40,
156 |         fontFamily:"Lora_400Regular"
157 |     },
158 |     texto:{
159 |         flexDirection: "column",
160 |         width:"80%",
161 |         alignItems:"flex-end",
162 |         justifyContent:"center"
163 |     },
164 |     primeiraLetra:{
165 |         height:50,
166 |         width:50,
167 |         fontSize:50,
168 |         alignItems:"center",
169 |         justifyContent:"center",
170 |         position:"relative",
171 |         fontFamily:"Lora_400Regular"
172 |     },
173 |     textoConteudo:{
174 |         fontSize:15,
175 |         fontFamily:"Lora_400Regular"
176 |     },
177 | 
178 | 
179 |     //elenco
180 |     elenco:{
181 |         marginTop:30,
182 |         height:"30%",
183 |         width:"100%",
184 |         backgroundColor:"black",
185 |         justifyContent:"center",
186 |         alignItems:"center"
187 |     },
188 |     tituloElenco:{
189 |         color:"#ffffff",
190 |         fontSize: 40,
191 |         fontFamily:"Lora_400Regular"
192 |     },
193 |     pessoaElenco:{
194 |         color:"#ffffff",
195 |         fontSize:15,
196 |         fontFamily:"Lora_400Regular"
197 |     },
198 |     elencoScrowll:{
199 |         flexDirection:"row",
200 |         paddingTop: 10,
201 |         padding:20,
202 |         paddingHorizontal:0
203 |         
204 |     },
205 |     elencoImg:{
206 |         width: 150,
207 |         height: 200,
208 |         margin:10,
209 |     },
210 |     personagem:{
211 |         alignItems:"center"
212 |     },
213 | 
214 |         
215 |     classificacao:{
216 |         marginVertical:20
217 |     },
218 |     classificacaoEstrelas:{
219 |         justifyContent:"center",
220 |         alignItems:"center",
221 |         flexDirection:"row",
222 |         marginVertical:30
223 |     },
224 |     classificacaoEstrela:{
225 |         marginHorizontal:10
226 |     }
227 | })


--------------------------------------------------------------------------------
/src/screens/Filme4.js:
--------------------------------------------------------------------------------
  1 | import React from "react";
  2 | import { Image, ScrollView, StyleSheet, Text, View,Linking } from "react-native";
  3 | import {useNavigation} from '@react-navigation/native';
  4 | import AppLoading from 'expo-app-loading';
  5 | import { useFonts, Lora_400Regular } from '@expo-google-fonts/lora';
  6 | 
  7 | import IconFontAwesome from "react-native-vector-icons/FontAwesome";
  8 | import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityIcons";
  9 | 
 10 | import Summer from "../../assets/Summer/summer.jpg"
 11 | 
 12 | 
 13 | export default function Conteudos() {
 14 | 
 15 |     const navigation = useNavigation();
 16 |     
 17 |     let [fontsLoaded] = useFonts({
 18 |         Lora_400Regular,
 19 |       });
 20 |     
 21 |     if (!fontsLoaded) {
 22 |         return <AppLoading />;
 23 |     }
 24 | 
 25 |     return (
 26 |       
 27 |         <ScrollView style={estilos.scrow}>
 28 |             <View style={estilos.tela}>
 29 |                 <View style={estilos.capa}>
 30 |                     <Image  source={Summer} style={estilos.imagemCapa} />
 31 |                     <View style={estilos.imagemCapaConteudo}>
 32 |                         <IconFontAwesome onPress={()=>navigation.goBack()} name="arrow-left" size={20} color="#ffffff" style={estilos.classificacaoEstrela}></IconFontAwesome>
 33 |                     </View>    
 34 |                 </View>
 35 |                 <View style={estilos.conteudoView}>
 36 |                     <View style={estilos.sobreFilme}>
 37 |                         <Text style={estilos.titulo}>
 38 |                             Summer of Soul
 39 |                         </Text>
 40 |                         <View style={estilos.texto}>            
 41 |                             <Text style={estilos.textoConteudo}>
 42 |                                 <Text style={estilos.primeiraLetra}>S</Text>
 43 |                                 ummer of Soul é parte filme musical, parte registro 
 44 |                                 histórico criado em torno de um evento épico que celebrou
 45 |                                  a história, cultura e moda negra. Ao longo de seis 
 46 |                                  semanas no verão de 1969, a apenas 160 quilômetros 
 47 |                                  ao sul de Woodstock, o Harlem Cultural Festival foi filmado 
 48 |                                  no Mount Morris Park (agora Marcus Garvey Park). O filme captura 
 49 |                                  um empolgante momento cultural nos Estados Unidos, embora 
 50 |                                  subestimado historicamente. Entrevistas com artistas 
 51 |                                  que participaram do evento são intercaladas com 
 52 |                                  apresentações de shows nunca antes vistos 
 53 |                                  de Stevie Wonder, Nina Simone, Sly and the 
 54 |                                  Family Stone, Gladys Knight and the Pips, Mahalia Jackson, 
 55 |                                  B.B. King, The 5th Dimension e muito outros. O lendário Festival 
 56 |                                  Cultural Harlem 1969, celebrou a música e a cultura afro-americana 
 57 |                                  e promoveu o orgulho e a unidade negra, naquele momento do país.
 58 |                             </Text>
 59 |                             <MaterialCommunityIcons name="movie-filter" size={30} color="blck" onPress={()=>{Linking.openURL('https://www.youtube.com/watch?v=vVU2ixNLOt8');}} ></MaterialCommunityIcons>
 60 |                         </View>
 61 |                     </View>
 62 | 
 63 |                     <View style={estilos.elenco}>
 64 |                         <Text style={estilos.tituloElenco}>Personagens</Text>
 65 |                         <View style={estilos.elencoScrowll}>
 66 |                             <ScrollView horizontal={true} showsHorizontalScrollIndicator={false}>
 67 |                                 <View style={estilos.personagem}>
 68 |                                     <Image  source={Summer} style={estilos.elencoImg}/>
 69 |                                     <Text style={estilos.pessoaElenco}>Summer of Soul</Text>
 70 |                                 </View>
 71 |                                 <View style={estilos.personagem}>
 72 |                                     <Image  source={Summer} style={estilos.elencoImg}/>
 73 |                                     <Text style={estilos.pessoaElenco}>Summer of Soul</Text>
 74 |                                 </View>
 75 |                                 <View style={estilos.personagem}>
 76 |                                     <Image  source={Summer} style={estilos.elencoImg}/>
 77 |                                     <Text style={estilos.pessoaElenco}>Summer of Soul</Text>
 78 |                                 </View>
 79 |                                 <View style={estilos.personagem}>
 80 |                                     <Image  source={Summer} style={estilos.elencoImg}/>
 81 |                                     <Text style={estilos.pessoaElenco}>Summer of Soul</Text>
 82 |                                 </View>
 83 |                             </ScrollView>
 84 |                         </View>
 85 |                     </View>
 86 | 
 87 |                     <View style={estilos.classificacao}>
 88 |                         <Text style={estilos.titulo}>Classificação</Text>
 89 |                         <View style={estilos.classificacaoEstrelas}>
 90 |                             <IconFontAwesome name="star" size={30} color="black" style={estilos.classificacaoEstrela}></IconFontAwesome>
 91 |                             <IconFontAwesome name="star" size={30} color="black" style={estilos.classificacaoEstrela}></IconFontAwesome>
 92 |                             <IconFontAwesome name="star" size={30} color="black" style={estilos.classificacaoEstrela}></IconFontAwesome>
 93 |                             <IconFontAwesome name="star" size={30} color="black" style={estilos.classificacaoEstrela}></IconFontAwesome>
 94 |                             <IconFontAwesome name="star" size={30} color="black" style={estilos.classificacaoEstrela}></IconFontAwesome>
 95 |                         </View>
 96 |                     </View>
 97 |                 </View>
 98 |             </View>
 99 | 
100 |         </ScrollView>
101 |     );
102 | }
103 | 
104 | const estilos = StyleSheet.create({
105 |     scrow:{
106 |         backgroundColor: "#ffffff",
107 |     },
108 |     tela:{
109 |         alignItems:"center",
110 |         flexDirection:"column",
111 |         flex:1,
112 |         justifyContent:"center"
113 |     },
114 |     
115 |     //capa
116 |     capa:{
117 |         height: 300,
118 |         width: "100%",
119 |         borderBottomLeftRadius: 50,
120 |         flexDirection:"row",
121 |         marginTop:"10%"
122 |     },
123 |     imagemCapa:{
124 |         width: "100%",
125 |         height:300,
126 |         borderBottomLeftRadius: 70,
127 |     },
128 |     imagemCapaConteudo:{
129 |         height: 300,
130 |         width: "40%",
131 |         borderBottomLeftRadius: 50,
132 |         position:"absolute",
133 |         marginTop: 70,
134 |         marginLeft:10 
135 |     },
136 |     botao:{
137 |         padding:20,
138 |         margin:30,
139 |         backgroundColor: "#D4D4D4"
140 |     },
141 | 
142 |     //conteudo de texto
143 |     conteudoView:{
144 |         flexDirection:"column",
145 |         alignItems:"center",
146 |         width:"100%"
147 |     },
148 |     sobreFilme:{
149 |         flexDirection:"column",
150 |         alignItems:"center"
151 |     },
152 |     titulo:{
153 |         fontSize: 40,
154 |         fontFamily:"Lora_400Regular"
155 |     },
156 |     texto:{
157 |         flexDirection: "column",
158 |         width:"80%",
159 |         alignItems:"flex-end",
160 |         justifyContent:"center"
161 |     },
162 |     primeiraLetra:{
163 |         height:50,
164 |         width:50,
165 |         fontSize:50,
166 |         alignItems:"center",
167 |         justifyContent:"center",
168 |         position:"relative",
169 |         fontFamily:"Lora_400Regular"
170 |     },
171 |     textoConteudo:{
172 |         fontSize:15,
173 |         fontFamily:"Lora_400Regular"
174 |     },
175 | 
176 | 
177 |     //elenco
178 |     elenco:{
179 |         marginTop:30,
180 |         height:"30%",
181 |         width:"100%",
182 |         backgroundColor:"black",
183 |         justifyContent:"center",
184 |         alignItems:"center"
185 |     },
186 |     tituloElenco:{
187 |         color:"#ffffff",
188 |         fontSize: 40,
189 |         fontFamily:"Lora_400Regular"
190 |     },
191 |     pessoaElenco:{
192 |         color:"#ffffff",
193 |         fontSize:15,
194 |         fontFamily:"Lora_400Regular"
195 |     },
196 |     elencoScrowll:{
197 |         flexDirection:"row",
198 |         paddingTop: 10,
199 |         padding:20,
200 |         paddingHorizontal:0
201 |         
202 |     },
203 |     elencoImg:{
204 |         width: 150,
205 |         height: 200,
206 |         margin:10,
207 |     },
208 |     personagem:{
209 |         alignItems:"center"
210 |     },
211 | 
212 |         
213 |     classificacao:{
214 |         marginVertical:20
215 |     },
216 |     classificacaoEstrelas:{
217 |         justifyContent:"center",
218 |         alignItems:"center",
219 |         flexDirection:"row",
220 |         marginVertical:30
221 |     },
222 |     classificacaoEstrela:{
223 |         marginHorizontal:10
224 |     }
225 | })


--------------------------------------------------------------------------------
/src/screens/Home.js:
--------------------------------------------------------------------------------
  1 | import React from "react";
  2 | import { StyleSheet, Text, View,TouchableOpacity, ScrollView, Image } from "react-native";
  3 | import {useNavigation} from '@react-navigation/native';
  4 | import IconFontAwesome from "react-native-vector-icons/FontAwesome";
  5 | import AppLoading from 'expo-app-loading';
  6 | import { useFonts, Lora_400Regular } from '@expo-google-fonts/lora';
  7 | 
  8 | import Capa from "../../assets/OscarCapa.png";
  9 | import Encanto from "../../assets/Encanto/encanto.jpeg";
 10 | import Ritimo from "../../assets/Ritimo/ritimo.jpg";
 11 | import Car from "../../assets/Drive/car.jpg";
 12 | import Summer from "../../assets/Summer/summer.jpg";
 13 | import Queen from "../../assets/Queen/queen.jpg";
 14 | import Wiper from "../../assets/Wiper/wiper.jpg";
 15 | import Bye from "../../assets/Bye/bye.jpg";
 16 | 
 17 | export default function Home() {
 18 |     const navigation = useNavigation();
 19 |     let [fontsLoaded] = useFonts({
 20 |         Lora_400Regular,
 21 |       });
 22 |     
 23 |     if (!fontsLoaded) {
 24 |         return <AppLoading />;
 25 |     }
 26 |     return (
 27 |         <ScrollView style={estilos.scrow}>
 28 |             <View style={estilos.tela}>
 29 |                 <Image  source={Capa} style={estilos.capa} />
 30 |                 <Text style={estilos.texto}>Os Filmes que ganharam a Premiação Oscars 2022</Text>
 31 |                 
 32 |                 <TouchableOpacity onPress={()=>navigation.navigate("Filme1")}>
 33 |                     <View style={estilos.cartao}>
 34 |                         <Image  source={Encanto} style={estilos.imagemCartao} />
 35 |                         <View style={estilos.imagemCartaoInterno}>
 36 |                         <IconFontAwesome name="film" size={30} color="#ffffff"></IconFontAwesome>
 37 |                             <Text style={estilos.textoBranco}>Encanto</Text>
 38 |                         </View>    
 39 |                     </View>
 40 |                 </TouchableOpacity>
 41 |                 
 42 |                 <TouchableOpacity onPress={()=>navigation.navigate("Filme2")}>
 43 |                     <View style={estilos.cartao}>
 44 |                         <Image  source={Ritimo} style={estilos.imagemCartao} />
 45 |                         <View style={estilos.imagemCartaoInterno}>
 46 |                             <IconFontAwesome name="film" size={30} color="#ffffff"></IconFontAwesome>
 47 |                             <Text style={estilos.textoBranco}>No Ritmo do Coração</Text>
 48 |                         </View>    
 49 |                     </View>
 50 |                 </TouchableOpacity>
 51 |             
 52 |                 <TouchableOpacity onPress={()=>navigation.navigate("Filme3")}>
 53 |                     <View style={estilos.cartao}>
 54 |                         <Image  source={Car} style={estilos.imagemCartao} />
 55 |                         <View style={estilos.imagemCartaoInterno}>
 56 |                             <IconFontAwesome name="film" size={30} color="#ffffff"></IconFontAwesome>
 57 |                             <Text style={estilos.textoBranco}>Drive My Car (Japão)</Text>
 58 |                         </View>    
 59 |                     </View>
 60 |                 </TouchableOpacity>
 61 | 
 62 |                 <TouchableOpacity onPress={()=>navigation.navigate("Conteudo")}>
 63 |                     <View style={estilos.cartao}>
 64 |                         <Image  source={Summer} style={estilos.imagemCartao} />
 65 |                         <View style={estilos.imagemCartaoInterno}>
 66 |                             <IconFontAwesome name="film" size={30} color="#ffffff"></IconFontAwesome>
 67 |                             <Text style={estilos.textoBranco}>cc</Text>
 68 |                         </View>    
 69 |                     </View>
 70 |                 </TouchableOpacity>
 71 | 
 72 |                 <TouchableOpacity onPress={()=>navigation.navigate("Conteudo")}>
 73 |                     <View style={estilos.cartao}>
 74 |                         <Image  source={Queen} style={estilos.imagemCartao} />
 75 |                         <View style={estilos.imagemCartaoInterno}>
 76 |                             <IconFontAwesome name="film" size={30} color="#ffffff"></IconFontAwesome>
 77 |                             <Text style={estilos.textoBranco}>The Queen of Basketball</Text>
 78 |                         </View>    
 79 |                     </View>
 80 |                 </TouchableOpacity>
 81 | 
 82 |                 <TouchableOpacity onPress={()=>navigation.navigate("Conteudo")}>
 83 |                     <View style={estilos.cartao}>
 84 |                         <Image  source={Wiper} style={estilos.imagemCartao} />
 85 |                         <View style={estilos.imagemCartaoInterno}>
 86 |                             <IconFontAwesome name="film" size={30} color="#ffffff"></IconFontAwesome>
 87 |                             <Text style={estilos.textoBranco}>The Windshield Wiper</Text>
 88 |                         </View>    
 89 |                     </View>
 90 |                 </TouchableOpacity>
 91 |                 
 92 |                 <TouchableOpacity onPress={()=>navigation.navigate("Conteudo")}>
 93 |                     <View style={estilos.cartao}>
 94 |                         <Image  source={Bye} style={estilos.imagemCartao} />
 95 |                         <View style={estilos.imagemCartaoInterno}>
 96 |                             <IconFontAwesome name="film" size={30} color="#ffffff"></IconFontAwesome>
 97 |                             <Text style={estilos.textoBranco}>The Long Goodbye</Text>
 98 |                         </View>    
 99 |                     </View>
100 |                 </TouchableOpacity>
101 |             
102 |             </View>
103 | 
104 |         </ScrollView>
105 |     );
106 | }
107 | 
108 | const estilos = StyleSheet.create({
109 |     scrow:{
110 |         backgroundColor: "#ffffff" 
111 |     },
112 |     tela:{
113 |         alignItems:"center",
114 |         flexDirection:"column",
115 |         flex:1,
116 |         justifyContent:"center"
117 |     },
118 |     capa:{
119 |         height: 300,
120 |         width: "100%",
121 |         borderBottomLeftRadius: 150,
122 |     },
123 |     texto:{
124 |         fontSize: 20,
125 |         paddingTop: 30,
126 |         textAlign: "center",
127 |         color: "#A9A9A9",
128 |         fontFamily:"Lora_400Regular",
129 |         marginBottom: 30
130 |     },
131 |     textoBranco:{
132 |         color: "#ffffff",
133 |         fontFamily:"Lora_400Regular",
134 |         padding:5,
135 |         textAlign: "center"
136 |     },
137 |     cartao:{
138 |         height: 150,
139 |         width: "90%",
140 |         marginBottom: 40,
141 |         borderBottomLeftRadius: 50,
142 |         flexDirection:"row",
143 |     },
144 |     imagemCartao:{
145 |         width: "100%",
146 |         height: 150,
147 |         borderBottomLeftRadius: 50,
148 |     },
149 |     imagemCartaoInterno:{
150 |         height: 150,
151 |         width: "40%",
152 |         backgroundColor: "#000000",
153 |         borderBottomLeftRadius: 50,
154 |         position:"absolute",
155 |         opacity: 0.6,
156 |         alignItems: "center",
157 |         justifyContent:"center",
158 |         
159 |     },
160 |     botao:{
161 |         padding:20,
162 |         margin:30,
163 |         backgroundColor: "#D4D4D4"
164 |     }
165 | })


--------------------------------------------------------------------------------