Here's my code to generate a paging scrollview in React-native:
<ScrollView
horizontal
pagingEnabled
onScrollEndDrag={this.handlePagerScroll}
scrollsToTop={false}
scrollEventThrottle={100}
removeClippedSubviews={false}
automaticallyAdjustContentInsets={false}
directionalLockEnabled
showsHorizontalScrollIndicator={false}
showsVerticalScrollIndicator={false}
>
{ renderPageHere() }
</ScrollView>
The code above is working.
Function this.handlePagerScroll which attached to onScrollEndDrag event is working too. The problem is that I can't determine which page that's currently active, since onScrollEndDrag has no event paremeter
I think to use simple math using value in x or y to no avail since I have no idea how to obtain them
Does anyone familiar with my problem and can offer me any solution?
Thank you
I have made a horizontal paging view using FlatList and identifying visible item in FlatList is fairly easy like this.
<FlatList
horizontal={true}
pagingEnabled
removeClippedSubviews={false}
data={listData}
onViewableItemsChanged={data => { this.viewableItem(data) }} renderItem={this.renderRow}
keyExtractor={(item, index) => item.id}
/>
UPDATE
As per issue posted on GitHub and also mentioned by #DennyHiu
you can use
viewabilityConfig={this.viewabilityConfig}
like this
this.viewabilityConfig = {
itemVisiblePercentThreshold: 50,
minimumViewTime: 1,
};
<FlatList
key={this.state.key}
onViewableItemsChanged={this.handleViewableItemsChanged}
viewabilityConfig={this.viewabilityConfig}
data={this.state.timeline}
renderItem={({item}) => {}}
/>
Related
I have created a FlatList in which all the item are horizontal scrollable. I want to add a functionality when screen width ends so that next item must come in next line.
Please help.
<FlatList
data={item.label}
scrollEnabled={true}
horizontal
renderItem={({item, index}) => (
<View></View>
)}
numColumns={1}
keyExtractor={(item, index) => index}
contentContainerStyle={{backgroundColor: '#fff',}}
showsVerticalScrollIndicator={false}
onEndReachedThreshold={0}
showsHorizontalScrollIndicator={false}
bounces={false}
/>
using this I am able to add only horizontal list but not able to divide it into next line when screen ends.
Please help!
Thanks
i have problem with my flat list horizontal when open screen start from first item then it scroll to another item when
i use scroll view with map it fix the problem but i want to use flat list
this is what should happend it should open to first item
this is what realy happend after open screen it is auto scroll to another item
<FlatList
contentContainerStyle={{ padding: 10 }}
showsHorizontalScrollIndicator={false}
data={this.state.BrandList}
renderItem={this._renderListItem}
keyExtractor={(item, index) => index.toString()}
horizontal
/>;
in RTL layout you can use this way for solving this problem:
<FlatList
nestedScrollEnabled
// for better show data in list you should reverse data
data={Calendar.reverse()}
keyExtractor={item => item.visit_day_identity}
renderItem={renderItem}
horizontal
pagingEnabled
showsHorizontalScrollIndicator={false}
snapToEnd
ref={element}
// this attr is scrolled to start
inverted={true}
/>
I already researched similar questions on the topic, so please don't be in a hurry to close this question.
I have a search screen, where I type a search term and I fetch listed results. Once fetched, I want to tap on any one of them and navigate to that page details object. My initial first tap is never been detected, but my second is. My component:
return (
<View>
<TextInput
value={query}
placeholder="Type Here..."
onChangeText={(search) => setQuery(search)}
/>
{fetching ? (
<Spinner
visible={fetching}
textContent={'Fetching data...'}
textStyle={{ fontSize: 14 }}
/>
) : null}
{items ? (
<ScrollView keyboardShouldPersistTaps={true}>
<FlatList
numColumns={1}
horizontal={false}
data={items}
keyExtractor={(item) => item.id}
renderItem={({ item }) => (
<TouchableOpacity
onPress={() =>
navigation.navigate('Item Details', { id: item.id })
}>
<ItemDisplay item={item} keyboardShouldPersistTaps="always" />
</TouchableOpacity>
)}
/>
</ScrollView>
) : null}
</View>
);
My ItemDisplay is just a row of item's photo and item's id. Nothing fancy.
As suggested on the similar questions, I do use <ScrollView keyboardShouldPersistTaps={true}> and <ItemDisplay item={item} keyboardShouldPersistTaps="always" /> However it doesn't help m, I still need to tap twice. Any ideas on how do I fix this? I am testing it on android, if that matters.
I also tried <ScrollView keyboardDismissMode="on-drag" keyboardShouldPersistTaps={"always"} > but this doesnt help as well.
If I understood your problem correctly, you are facing an issue clicking an item when the Keyboard is present.
If so you can simply pass keyboardShouldPersistTaps as always to your FlatList and then the children of the list will receive taps when an item is pressed.
Also, you shouldn't be using a ScrollView to wrap your Flatlist, if they are both having the same orientation, numColumns isn't required as you have passed it as 1
You can read more about keyboardShouldPersistTaps at https://reactnative.dev/docs/0.64/scrollview#keyboardshouldpersisttaps
Take a look at this Live Snack to see it in action.
I am using checkbox from react-native-element
When i check the box it dose not display checked
how can i display it ?
here is my code
<View>
<FlatList data={all_national_number}
keyExtractor={(item, index) => index.toString()}
renderItem={({ item }) =>
<CheckBox
title={item}
uncheckedIcon={<Image source={require('../../assets/unchecked.png')} />}
checkedIcon={<Image source={require('../../assets/checked.jpg')} />}
onPress={() => this._onSelect(item)}>
</CheckBox>
}>
</FlatList>
</View>
It is not showing because you are missing a property called checked which should be either true or false. So, ideally your method this._onSelect(item)} should contain logic to alter the checked status.
Something on the lines of
onSelect = (item) => {
this.setState({ isChecked: true})
}
and in your checkbox, you need to add one more prop that is checked={this.state.isChecked}
Hope it helps :)
You need to add the checked property on the checkbox
<CheckBox
title='Click Here'
checked={this.state.checked}
/>
I'm trying to render a FlatList from json fetched from an api, but I keep getting this error:
Warning: Each child in an array or iterator should have a unique "key" prop.
Check the render method of `VirtualizedList`.
Relevant code:
<FlatList
data={this.props.tunes}
keyExtractor={(item, index) => item.id}
renderItem={({item}) => {
<Item
key={item.id}
title={item.title}
composer={item.composer}
year={item.year}
/>
}}
/>
I'm sure there is a simple fix for this, but after a few days of trying different things I haven't found it. Thanks for your help!
Looks like you need to change key to id as you write item.id in keyExtractor and be sure you have id and it's different for each component:
<FlatList
data={this.props.tunes}
keyExtractor={(item, index) => item.id}
renderItem={({item}) => {
<Item
id={item.id} //instead of key
title={item.title}
composer={item.composer}
year={item.year}
/>
}}
/>
Or if you don't have unique key use keyExtractor={(item, index) => index}