Nesse exercício estaremos utilizando uma técnica comum e muito útil para melhorar o nosso código, a criação de componentes puros simples contendo estilizações padrão da aplicação e evitando assim o uso constante de View e Text pela aplicação.

1. Vamos começar criando o arquivo Container.js na pasta “components”. E vamos então colocar nele basicamente o mesmo conteúdo que já utilizamos em nossas telas, uma View com um pouco de estilização:

   Obs.: repare que precisamos utilizar a prop especial children do React para que o nosso componente aceite receber outros componentes “dentro” dele no código, esses componentes serão renderizados no local onde utilizarmos o children aqui nesse componente.

   import { StyleSheet, View } from "react-native";
   
   export default function Container({ children }) {
     return (
       <View style={styles.container}>
         {children}
       </View>
     )
   }
   
   const styles = StyleSheet.create({
     container: {
       flex: 1,
       paddingHorizontal: 16,
       marginHorizontal: 3,
       marginTop: 48
     },
   })
   

2. Agora que já temos o container padrão da nossa aplicação vamos criar o título. Crie um arquivo Title.js também na pasta “components”. Dentro dele também utilizaremos o mesmo código que já usamos nas telas do app e teremos uma prop text para o conteúdo:

   import { StyleSheet, Text } from "react-native";
   
   export default function Title({ text }) {
     return (
       <Text style={styles.title}>
         {text}
       </Text>
     )
   }
   
   const styles = StyleSheet.create({
     title: {
       fontSize: 40,
       color: '#f64348'
     }
   })
   

3. Agora só precisamos substituir o código nos componentes da pasta “screens” para utilizar os nossos próprios componentes no lugar dos componentes do React Native, eliminando também os estilos desnecessários. Vamos começar pela HomeScreen:

   import { useNavigation } from '@react-navigation/native';
   import { StatusBar } from 'expo-status-bar';
   import Container from '../components/Container';
   import NavButton from '../components/NavButton';
   import Title from '../components/Title';
   
   // ...
   
     return (
       <Container>
         <Title text="Olá, mundo!" />
         <StatusBar style="auto" />
         <NavButton text="Aula de Navegação" onPress={toNavigationScreen} />
         <NavButton text="Aula de ScrollView" onPress={toScrollViewScreen} />
         <NavButton text="Aula de FlatList" onPress={toFlatListScreen} />
       </Container>
     )
   }
   

4. Faremos o mesmo no componente FlatListScreen:

   import { useNavigation } from "@react-navigation/native"
   import { FlatList, StyleSheet, Text, View } from "react-native"
   import Container from "../components/Container"
   import NavButton from "../components/NavButton"
   import Title from "../components/Title"
   
   // ...
   
     return (
       <Container>
         <Title text="FlatList" />
         <NavButton text="Voltar" onPress={navigateBack} />
         <FlatList
           data={movies}
           renderItem={renderMovie}
           keyExtractor={(item) => item.id}
         />
       </Container>
     )
   }
   
   const styles = StyleSheet.create({
   	// EXCLUIR ESTILOS
     list: {
       marginTop: 40,
       marginHorizontal: 10,
     }
   })
   

5. No componente NavigationScreen:

   import { useNavigation } from "@react-navigation/native";
   import Container from "../components/Container";
   import NavButton from "../components/NavButton";
   import Title from "../components/Title";
   
   export default function NavigationScreen() {
     const navigation = useNavigation()
   
     const navigateBack = () => {
       navigation.goBack()
     }
   
     return (
       <Container>
         <Title text="Navegação" />
         <NavButton text="Voltar" onPress={navigateBack} />
       </Container>
     );
   }
   

6. E por último no componente ScrollViewScreen:

   import { useNavigation } from "@react-navigation/native";
   import { Text, StyleSheet, ScrollView, View } from "react-native";
   import Container from "../components/Container";
   import NavButton from "../components/NavButton";
   import Title from "../components/Title";
   
   // ...
   
     return (
       <Container>
         <Title text="ScrollView" />
         <NavButton text="Voltar" onPress={navigateBack} />
   			// ...
       </Container>
     );
   }
   
   const styles = StyleSheet.create({
   	// EXCLUIR ESTILOS
     item: {
       fontSize: 16,
       marginTop: 16
     },
   })