Estaba desarrollando una App en React Native, que tratará de conectar con una API y devolver los datos para pintarlos en pantalla.
El tema es que tengo un error al llamar al useNavigation(), que bajo mi desconocimiento tiene pinta de tratarse por un mal uso del mismo.
El error es el siguiente:
Coudn't find a navigation object. Is your component inside a screen in a navigator?`
El código del archivo donde cargo el componente es el siguiente:
HomeScreen.tsx
import React, {useEffect} from 'react';
import {View, ActivityIndicator, FlatList, Text} from 'react-native';
import {useNews} from '../hooks/useNews';
import {HomeComponent} from '../components/HomeComponent';
import {TouchableWithoutFeedback} from 'react-native-gesture-handler';
import {useNavigation} from '@react-navigation/native';
//TODO: Mostrar las noticias ordenadas por fecha,:
const data = useNews();
const navigation = useNavigation();
//const dataSort = data.sort((a, b) => new Date(a.fechas).getTime() > new Date(b.fechas).getTime(),);
export const HomeScreen = () => {
//const {isLoading, title, description, url,
//urlToImage} = useNews();
const {isLoading} = useNews();
useEffect(() => {
isLoading == false;
}, [useNews]);
if (isLoading) {
return (
<View>
<ActivityIndicator color="red" size={100} />
</View>
);
}
return (
<View>
<FlatList
data={data as unknown as readonly []}
keyExtractor={(_item, index) => '' + index}
renderItem={() => (
<TouchableWithoutFeedback
onPress={() => navigation.navigate('DetailScreen', data)}>
<HomeComponent />
</TouchableWithoutFeedback>
)}
horizontal={true}
showsHorizontalScrollIndicator={false}
style={{marginTop: 10, height: 70}}
/>
</View>
);
};
y el código del componente como tal es el siguiente:
HomeComponent.tsx:
import React, {useEffect, useState} from 'react';
import {Image, Text, View, ActivityIndicator, StyleSheet} from 'react-native';
import {useNews} from '../hooks/useNews';
const {title, description, urlToImage, isLoading} = useNews();
//const navigation = useNavigation();
export const HomeComponent = () => {
const uri = `https://image.tmdb.org/t/p/w500${urlToImage}`;
useEffect(() => {
isLoading == false;
}, [title, description, urlToImage, isLoading]);
if (isLoading) {
return (
<View>
<ActivityIndicator color="red" size={100} />
</View>
);
}
//TODO: Hacer un map para recoger el mismo indice, que corresponda a cada noticia.
return (
<View>
<Text>Titulo: {title}</Text>
<Text>Descripcion: {description.substring(0, 20)}</Text>
<Image source={{uri}} style={styles.image} />
</View>
);
};
const styles = StyleSheet.create({
image: {
borderRadius: 18,
},
});
Como digo se trata evidentemente de un con el uso del useNavigation, debido principalmente a que llevo unos meses desarrollando en ReactNative.
Espero puedan ayuda y si es asi muchas gracias de ante mano!