Nessa aula você irá aprender a consumir APIs no React Native e verá que é bem simples, assim como fazemos no React na web.

1. A primeira coisa a fazer é instalar o axios, a biblioteca que usaremos para as requisições:

   yarn add axios
   

2. Vamos também criar uma tela para o código dessa aula em um novo arquivo chamado UsingApisScreen.js na pasta “screens”. A princípio vamos apenas adicionar uma tela simples com um botão de voltar:

   import { useNavigation } from "@react-navigation/native";
   import Container from "../components/Container";
   import StyledButton from "../components/StyledButton";
   import StyledTitle from "../components/StyledTitle";
   
   export default function UsingApisScreen() {
     const navigation = useNavigation()
   
     const navigateBack = () => {
       navigation.goBack()
     }
   
     return (
       <Container>
         <StyledTitle>Consumindo APIs</StyledTitle>
         <StyledButton onPress={navigateBack}>Voltar</StyledButton>
       </Container>
     )
   }
   

3. E depois vamos incluir esse componente no StackNavigator.js como uma nova tela e também criar um botão para acessá-lo em HomeScreen.js:

   StackNavigator.js

   // ...
   import StyledComponentsScreen from "./screens/StyledComponentsScreen"
   import UsingApisScreen from "./screens/UsingApisScreen"
   
   const Stack = createNativeStackNavigator()
   
   // ...
   
           <Stack.Screen name="Styled" component={StyledComponentsScreen} />
           <Stack.Screen name="API" component={UsingApisScreen} />
         </Stack.Navigator>
       </NavigationContainer>
     )
   }
   

   HomeScreen.js

   // ...
   
     const toStyledComponentsScreen = () => {
       navigation.navigate('Styled')
     }
   
     const toApiScreen = () => {
       navigation.navigate('API')
     }
   
     return (
       <Container>
         <StyledTitle>Olá, mundo!</StyledTitle>
         <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} />
         <NavButton text="Aula de Styled Components" onPress={toStyledComponentsScreen} />
         <NavButton text="Aula de Consumo de APIs" onPress={toApiScreen} />
       </Container>
     )
   }
   

4. Com toda a estrutura pronta, vamos de fato realizar a chamada a uma API uilizando o axios. Para isso, dentro do componente UsingApisScreen iremos criar um estado para armazenar a resposta da API e renderizá-la na tela:

   Obs.: aqui estamos usando alguns estilos apenas para deixar a tela mais agradável.

   import axios from "axios";
   import { useNavigation } from "@react-navigation/native";
   import { useEffect, useState } from "react";
   import { Image, StyleSheet, Text } from "react-native";
   import Container from "../components/Container";
   import StyledButton from "../components/StyledButton";
   import StyledTitle from "../components/StyledTitle";
   
   export default function UsingApisScreen() {
     const [user, setUser] = useState({})
   
     const navigation = useNavigation()
   
     const navigateBack = () => {
       navigation.goBack()
     }
   
     const fetchGithubUser = async () => {
       const res = await axios.get('<https://api.github.com/users/julianaconde>')
       setUser(res.data)
     }
   
     useEffect(() => {
       fetchGithubUser()
     }, [])
   
     return (
       <Container>
         <StyledTitle>Consumindo APIs</StyledTitle>
         <Text style={styles.text}>{user.name}</Text>
   			<Text>{user.bio}</Text>
         <Image source={{ uri: user.avatar_url }} style={styles.avatar} />
         <StyledButton onPress={navigateBack}>Voltar</StyledButton>
       </Container>
     )
   }
   
   const styles = StyleSheet.create({
     avatar: {
       alignSelf: 'center',
       borderRadius: 999,
       height: 200,
       width: 200,
       marginVertical: 20
     },
     text: {
       fontSize: 20,
       marginTop: 20,
       textAlign: 'center'
     }
   })