Nessa aula vamos praticar uma técnica muito importante do desenvolvimento com React e que se estende para o React Native, a componentização. Para isso, vamos criar um componente reutilizável para o botão que usamos em todas as telas.

1. A primeira coisa que precisamos fazer é pegar todo o código relacionado ao botão, jsx e estilos, e colocar em um novo arquivo. Vamos criar uma pasta “components” dentro de “src” e então um arquivo NavButton.js dentro de “components”:

   import { StyleSheet, TouchableOpacity } from "react-native";
   
   export default function NavButton() {
     return (
       <TouchableOpacity
         activeOpacity={0.8}
         style={styles.button}
       >
         <Text style={styles.buttonText}>Texto do Botão</Text>
       </TouchableOpacity>
     )
   }
   
   const styles = StyleSheet.create({
     button: {
       backgroundColor: "#1c1a1d",
       padding: 10,
       borderRadius: 10,
       marginTop: 10
     },
     buttonText: {
       color: "#FFFFFF",
     }
   })
   

2. Agora que temos um componente, precisamos usar as props para que ele possa receber diferentes textos e funções de onPress em cada local em que formos utilizá-lo. Vamos definir duas props, onPress e text, para isso:

   import { StyleSheet, Text, TouchableOpacity } from "react-native";
   
   export default function NavButton({ onPress, text }) {
     return (
       <TouchableOpacity
         activeOpacity={0.8}
         style={styles.button}
         onPress={onPress}
       >
         <Text style={styles.buttonText}>{text}</Text>
       </TouchableOpacity>
     )
   }
   
   // ...
   

3. Agora que o nosso componente NavButton está pronto podemos começar a utilizá-lo no lugar do código antigo. Vamos começar as substituições na tela inicial HomeScreen:

   Obs.: lembrar de excluir estilos e imports desnecessários.

   import { useNavigation } from '@react-navigation/native';
   import { StatusBar } from 'expo-status-bar';
   import { StyleSheet, Text, View } from 'react-native';
   import NavButton from '../components/NavButton';
   
   // ...
   
     return (
       <View style={styles.container}>
         <Text style={styles.title}>Olá, mundo!</Text>
         <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} />
       </View>
     )
   }
   
   const styles = StyleSheet.create({
     container: {
       flex: 1,
       backgroundColor: '#fff',
       alignItems: 'center',
       justifyContent: 'center',
     },
     title: {
       fontSize: 40,
       color: '#f64348'
     }
   	// EXCLUIR OS ESTILOS ANTIGOS
   });
   

4. Vamos substituir também o botão das outros telas. Primeiro em FlatListScreen:

   import { useNavigation } from "@react-navigation/native"
   import { FlatList, StyleSheet, Text, View } from "react-native"
   import NavButton from '../components/NavButton';
   
   // ...
   
     return (
       <View style={styles.container}>
         <Text style={styles.title}>FlatList</Text>
         <NavButton text="Voltar" onPress={navigateBack} />
         <FlatList
           data={movies}
           renderItem={renderMovie}
           keyExtractor={(item) => item.id}
         />
       </View>
     )
   }
   
   // ...
   
     title: {
       fontSize: 40,
       color: '#f64348'
     },
   	// EXCLUIR ESTILOS
     list: {
       marginTop: 40,
       marginHorizontal: 10,
     }
   })
   

5. Vamos atualizar também o componente ScrollViewScreen:

   import { useNavigation } from "@react-navigation/native";
   import { Text, StyleSheet, ScrollView, View } from "react-native";
   import NavButton from '../components/NavButton';
   
   // ...
   
     return (
       <View style={styles.container}>
         <Text style={styles.title}>ScrollView</Text>
         <NavButton text="Voltar" onPress={navigateBack} />
         <ScrollView>
           // ...
         </ScrollView>
       </View>
     );
   }
   
   // ...
   
     title: {
       fontSize: 40,
       color: '#f64348'
     },
   	// EXCLUIR ESTILOS
     item: {
       fontSize: 16,
       marginTop: 16
     },
   })
   

6. E por fim, o componente NavigationScreen:

   import { useNavigation } from "@react-navigation/native";
   import { View, Text, StyleSheet } from "react-native";
   import NavButton from '../components/NavButton';
   
   // ...
   
       return (
           <View style={styles.container}>
               <Text style={styles.title}>Aula de Navegação</Text>
               <NavButton text="Voltar" onPress={navigateBack} />
           </View>
       );
   }
   
   const styles = StyleSheet.create({
     container: {
       flex: 1,
       justifyContent: "center",
       alignItems: "center",
     },
     title: {
       fontSize: 40,
       color: '#f64348'
     }
   	// EXCLUIR ESTILOS
   });