refine() is not working in react-native
const InfiniteHits = ({ hits, hasMore, refine }) => {
return <FlatList
data={hits}
keyExtractor={item => item.objectID}
onEndReached={() => refine()}
renderItem={({ item }) => (
<CardListingItem item={item}/>
)}
/>
}
I tried another alternative using connectPagination also not working:
const Pagination = ({refine}) => {
return <Button
title="more"
onPress={() => refine()}
/>
}
export const ConnectedPagination = connectPagination(Pagination)
Version:
"algoliasearch": "^3.33.0",
"react-instantsearch-native": "^5.6.0",
what's the problem ?
Related
Here is my model
<View style={styles.centeredView}>
<Modal
animationType="slide"
transparent={true}
visible={modalVisible}
onRequestClose={() => {
Alert.alert('Modal has been closed.');
setModalVisible(!modalVisible);
}}>
when i click this share button model is opening until come all item inside the flat list.
here the share button
<Button
style={[styles.buttons, styles.buttonClose]}
onPress={handleSubmit}
disabled={!isValid}
title="Share"
/>
Here the flat list
<FlatList
data={newPost}
renderItem={({ item , index}) =>
//rest of code
keyExtractor={item => item._id}
/>
I need to stop model opening more than one.Please help me
here the handleSubmit()
const [modalVisible, setModalVisible] = useState(false);
const handleSubmit = (values) => {
const formData = {
firstN: values.firstN,
secondN: values.secondN,
thirdN: values.thirdN,
firstT: values.firstT,
secondT: values.secondT,
thirdT: values.thirdT,
event: values.event,
date: "2027-12-12 19:10:00",
description: values.description,
type: values.type,
gender: values.gender,
}
axios.post(`${BASE_URL}pastevents/post`, formData)
.then(data => {
console.log(" success ")
setModalVisible(!modalVisible);
}
)
.catch(err => console.log(err))
}
I'm trying to add and remove items from my movies favlist but I am unable to render things immediately with useState. I also trying to update favoritesFilm in UseEffect but my page crashed for continuing re-render.
This is my fav component:
export default function FavouriteBox() {
const navigation = useNavigation<NavigationProps>()
const [favoritesFilm, setFavorite] = useState<Movie[]>([])
const [isLoadingFav, setIsLoadingFav] = useState(true)
useEffect(() => {
getFav()
}, [])
useEffect(() => {
console.log(favoritesFilm)
}, [favoritesFilm])
async function removeMovie() {
const removed = StorageResources.storageRemove('favmovies')
setFavorite(favoritesFilm)
}
async function getFav() {
const favoriteMovies = await StorageResources.storageGet('favmovies')
setFavorite(favoriteMovies)
setIsLoadingFav(false)
}
const renderItemFav = ({ item }: any) => (
<FavMovie name={item.name} title={item.title} poster_path={item.poster_path} id={item.id} />
)
const FavMovie = ({ title, poster_path, name, id }: any) => (
<View style={styles.wrap}>
<Image
style={styles.image}
source={{
uri: `https://image.tmdb.org/t/p/w500/${poster_path}`,
}}
/>
{title && <Text style={styles.fav}>{title}</Text>}
{!title && <Text style={styles.fav}>{name}</Text>}
<MaterialCommunityIcons onPress={() => removeMovie()} name="bookmark-minus-outline" style={styles.book} />
</View>
)
return (
<View style={styles.container}>
<Text style={styles.title}>Preferiti</Text>
{isLoadingFav && <LoaderBox />}
{!isLoadingFav && (
<FlatList
data={favoritesFilm}
keyExtractor={(item) => item.id}
renderItem={renderItemFav}
horizontal
></FlatList>
)}
</View>
)
}
In my home component I use this function to add to fav:
const addToFavorites = async (item: Movie) => {
if (favorites.includes(item)) return null
StorageResources.storageSave('favmovies', [...favorites, item])
setFavorites([...favorites, item])
}
I would like to understand why it doesn't work and why every time I want to show movies in the favmovies component I have to refresh. (I used AsyncStorage for getItem and removeItem)
How to use datalist in react-native.I want to use datalist in react native with fetch api .
I use laravel for back end so I want to fetch data in react native datalist
Use Flatlist in react-native to show the dynamic data like
import React, { useEffect, useState } from 'react';
import { ActivityIndicator, FlatList, Text, View } from 'react-native';
export default App = () => {
const [isLoading, setLoading] = useState(true);
const [data, setData] = useState([]);
useEffect(() => {
fetch('https://reactnative.dev/movies.json')
.then((response) => response.json())
.then((json) => setData(json.movies))
.catch((error) => console.error(error))
.finally(() => setLoading(false));
}, []);
return (
<View style={{ flex: 1, padding: 24 }}>
{isLoading ? <ActivityIndicator/> : (
<FlatList
data={data}
keyExtractor={({ id }, index) => id}
renderItem={({ item }) => (
<Text>{item.title}, {item.releaseYear}</Text>
)}
/>
)}
</View>
);
};
Use react-native-autocomplete-input
$ npm install --save react-native-autocomplete-input
render() {
const { query } = this.state;
const data = filterData(query);
return (
<Autocomplete
data={data}
value={query}
onChangeText={(text) => this.setState({ query: text })}
flatListProps={{
keyExtractor: (_, idx) => idx,
renderItem: ({ item }) => <Text>{item}</Text>,
}}
/>
);
}
react-native-autocomplete-input
I have a request pulling in from YouTube, to create a list of videos I want to display in a flatlist. I use the same approach across the application (calling WordPress, etc...), but when Im trying to achieve the same with the YouTube API (I've got the key setup etc..), it throws an error;
const Watch = ({typeOfProfile}) => {
const [isLoading, setLoading] = useState(true);
const [data, setData] = useState([]);
let x = {foo: 11, bar: 42};
function playertype(val) {
return 'https://www.googleapis.com/youtube/v3/searchpart=snippet&channelId=UCa_6KiOjxm6dEC_mMRP5lGA&maxResults=20&order=date&type=video&key=xxxxx';
}
useEffect(() => {
fetch(playertype(typeOfProfile))
.then((response) => response.json())
.then((json) => {
x = setData(json)
})
.catch((error) => console.error(error))
.finally(() => setLoading(false));
}, []);
const result = Object.keys(x).map(key => ({[key]: x[key]}));
return (
<View style={styles.body}>
<View style={styles.topscroll}>
{isLoading ? <ActivityIndicator/> : (
<FlatList
data={result}
horizontal={true}
keyExtractor={({ id }, index) => id}
renderItem={({ item }) => (
<View>
<Text>
{x.val}
</Text>
</View>
)}
/>
)}
</View>
</View>
);
};
Someone mentioned it could be an object being returned instead of an array, seems odd the json structure is the same as other requests I use this approach for.
I discovered that I had to add brackets on the data property of the FlatList. So instead of
data={data}
I had to change it too;
data={[data]}
Code now;
<FlatList
data={[data]}
horizontal={true}
keyExtractor={({ id }, index) => id}
renderItem={({ item, index }) => (
<View style={styles.container}>
<Image style={styles.imgyoutubeprev} source={{ uri: chkValue(item.items[0].snippet.thumbnails.high.url) }} />
</View>
)}
/>
Below is the javascript code:
const onSelectEdit = (id) => {
` `props.navigation.navigate("EditProduct", {
productId: id,
});
};
const dispatch = useDispatch();
return (
<FlatList
data={userProducts}
keyExtractor={(item) => item.id}
renderItem={(itemData) => (
<ProductItem
image={itemData.item.imageUrl}
title={itemData.item.title}
price={itemData.item.price}
onSelect={() => {
onSelectEdit("p1");
}}>
<Button
color={Colors.primary}
title="Edit"
onPress={() => {
onSelectEdit("p1");
}}
/>
From this page I want t pass productId through navigation.navigate. and want catch that parameter from another screen,
const EditProduct = (props) => {
const prodId = props.route.params.productId;
But this error occured - undefined is not an object( evaluating 'props.route.params.productId')
what should I do to fix this
TIA