Integrações com React Native - #6 RN + API

No tutorial de hoje aprenderemos como fazer a integração do seu app criado no React Native com uma API de um website externo.

API com React Native

Para trabalhar com a API de exemplo dessa aula, vamos utilizar a PokeAPI.

views/Busca.js

Vamos criar a screen de busca de pokemons:

import React,{useState,useEffect} from 'react';
import config from "../config/config.json";
import {Image, Modal, Keyboard, Text, TextInput, TouchableOpacity, TouchableWithoutFeedback, View} from "react-native";
import {css} from "../assets/css/Css";

export default function Busca({navigation}) {
    [search,setSearch]=useState(null);
    [pokemon,setPokemon]=useState(null);
    [image,setImage]=useState(null);
    [price,setPrice]=useState(null);

    async function searchPokemons()
    {
        let reqs = await fetch('https://pokeapi.co/api/v2/pokemon/'+search,
            {
                method:'GET',
                headers:{
                    'Accept':'application/json',
                    'Content-Type':'application/json'
                }
            });
        let ress = await reqs.json();
        setPokemon(ress.name);
        setImage(ress.sprites.front_default);
        setPrice(ress.weight);
        Keyboard.dismiss();
    }

    //Função de registro de captura de pokemons
    async function catchPokemons()
    {

    }

    return (
        <TouchableWithoutFeedback onPress={()=>Keyboard.dismiss()}>
            <View style={css.container}>

                <View style={css.header}>
                    <Image style={css.header__img} source={require('../assets/img/logo.png')} />
                </View>

                <View style={css.busca}>
                    <TextInput
                            style={css.input}
                            onChangeText={text=>setSearch(text)}
                        value={search}
                        placeholder='Buscar pokemons...'
                    />

                    <TouchableOpacity onPress={searchPokemons} style={css.button}>
                        <Text style={css.button__text}>Buscar</Text>
                    </TouchableOpacity>
                </View>

                {image && (
                    <View>
                        <Image style={{width:200,height:200}} source={{uri:image}} />
                        <Text>{pokemon}</Text>
                        <Text>R$ {price}</Text>
                        <TouchableOpacity onPress={catchPokemons}>
                            <Text>Capturar</Text>
                        </TouchableOpacity>
                    </View>
                )}
            </View>
        </TouchableWithoutFeedback>
    );
}

Por hoje é só turma. Sucesso nos códigos e na vida!

Precisando de assessoria? webdesignemfoco@gmail.com