Estoy utilizando la PokeApi y solo me falta ir a la siguiente y anterior pagina... Por ahora pense en hacer una función utilizando el set pero no quiere acceder a "poke". A continuación dejo el codigo . (Quiero aclarar que dentro de la api esta el array next el cual tiene la siguiente pagina.)
import axios from "axios";
import React, {useState, useEffect} from "react";
import {useNavigation} from "@react-navigation/native";
import {Card, ListItem, Button, Icon} from 'react-native-elements'
import {
View,
Text,
FlatList,
Image,
TouchableOpacity,
StyleSheet
} from "react-native";
function Pokedex() {
const styles = StyleSheet.create({
textoPoke: {
textTransform: 'capitalize',
color: 'red',
fontSize: 30
},
cuadrado: {
backgroundColor: "pink",
marginBottom: 10,
borderWidth: 2,
borderBottomLeftRadius: 20,
borderBottomRightRadius: 20,
borderTopLeftRadius: 20,
borderTopRightRadius: 20
},
icono: {
width: 80,
height: 80,
position: "absolute",
marginTop: "-4%",
marginLeft: "80%"
},
boton: {
padding: 50,
}
});
const [poke, setPoke] = useState([]);
const [loadPoke, setLoadPoke] = useState(
"https://pokeapi.co/api/v2/pokemon?limit=10"
);
const getpoke = async () => {
const res = await fetch(loadPoke);
const data = await res.json();
setLoadPoke(data.next);
function crearObjetoPokemon(result) {
result.forEach(async (pokemon) => {
const res = await fetch(`https://pokeapi.co/api/v2/pokemon/${pokemon.name}`);
const data = await res.json();
setPoke((currentList) => [
...currentList,
data
]);
});
}
crearObjetoPokemon(data.results);
};
useEffect(() => {
getpoke();
}, []);
const navigation = useNavigation();
function siguientePagina(){
useEffect(() => {
setpoke(poke.next);
}, []);
}
return (
<View
style={{
justifyContent: "center",
alignItems: "center"
}}>
<FlatList
data={poke}
renderItem={({item: pokeItem}) => (
<Card>
<Card.Title>{pokeItem.name}</Card.Title>
<Card.Divider/>
<Card.Image
source={{
uri: `https://projectpokemon.org/images/normal-sprite/${pokeItem.name}.gif`
}}></Card.Image>
<Text>Peso: {pokeItem.height}</Text>
<Text>Altura: {pokeItem.weight}</Text>
<Text
style={{
textTransform: 'capitalize'
}}>Habilidades: {
pokeItem
.abilities[0]
.ability
.name
}</Text>
</Card>
)}/>
</View>
);
};
export default Pokedex;
¿Alguna sugerencia para function siguientepagina() ? Actualizo la pregunta agregando mas información. No se si hice mal la función, mal el onpress, sinceramente estoy bastante confundido. Tampoco se si el usestate se puede usar dentro de una función o tal vez existe una manera mas simple y correcta.