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}
/>
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 normal flat list in react native and I have react native web that renders the mobile component in web
I am hiding the scrollbar with the prop showsHorizontalScrollIndicator={false},
The scrolling works fine and as expected in mobile, but in the web the scrolling is completely halted as it does not allow dragging to scroll like mobile.
<FlatList
horizontal={true}
showsHorizontalScrollIndicator={false}
renderItem={({ item }) => (
<Button
.... />
)}
keyExtractor={(....}
data={data} />
Is there any way to enable scroll behavior on the web like on mobile?
If not just have a scrollbar that only pops up when the section
Instead of showsHorizontalScrollIndicator={false}
Use overflow: hidden to the root view.
In react-native-webview library there is a prop named as scrollEnabled set it to 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 want to create a box of Terms and conditions in which data can be scrolled. I tried it using TextInput like below but it doesn't scrolls.
<TextInput
multiline={true}
value={data}
editable={false}
scrollEnabled={true}
style={styles.termsAndConditionsStyle}
/>
second alternative
I also tried it this way, it works but it gives me a yellow screen warning which says - You are binding a method component to the component. React does this for you automatically in a high performance way, so you can safely remove this call. See ScrollView.
<ScrollView style={styles.termsAndConditionsStyle}>
<Text>
// some large text
</Text>
</ScrollView>
Solution - Actually I imported ScrollView from react-native-gesture-handler instead of react-native
Did you try <ScrollView>?.
You can use this to create scrolling functionality.
well its pretty simple, just warp your components in <ScrollView> ... </ScrollView>and
style it as per your need.
if height of components together exceeds for <ScrollView>, it becomes scrollable.
see docs at react native
EDIT:
Its importing mistake, import scrollview from react-native rather than react-native-gesture-handler
render() {
return(
<View style={styles.container}>
<ScrollView>
<Text>
Add your text
</Text>
</ScrollView>
</View>
);
}
EDIT:
Its importing mistake, import scrollview from react-native rather than react-native-gesture-handler
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}) => {}}
/>