React Native, Using PanResponder View as a parent and having flatlist as a child of the view, without PanResponder, flatlist scrolling is working fine but with PanResponder, flatlist scrolling is not working.
I dont find proper solution, but workaround is wrap the flatlist items in TouchableOpacity , it will make flatlist scrollable.
If you don't like TouchableOpacity's opacity then you can set activeOpacity to 1.
Example:
<View {...this.gestureHandlers.panHandlers} style={styles.container}>
<FlatList
horizontal={true}
data={this.state.FlatlistData}
renderItem={({ item }) => {
return (
<TouchableOpacity activeOpacity={1} style={styles.itemsStyle}>
{/* Your core view here */}
</TouchableOpacity>
)
}}
/>
</View>
Related
Basically, I want the FlatList to have a onPress functionality (to explain simply) as well as the default scrolling functionality. Right now, if I have a FlatList inside a Pressable, then I am not able to scroll through the FlatList.
I have also tried to put Pressable inside the FlatList's RenderItem component, but I have a lot of items I'll be displaying, so it's going to inefficient.
Instead of Pressable wrapping the FlatList, I learnt that we can use React Native's Gesture Responder System on a simple View to get the behavior that I require.
<View
onStartShouldSetResponder={() => true}
onResponderRelease={doSomethingFunction}
>
<FlatList
data={someData}
renderItem={renderItemComponent}
/>
</View>
Try touch handling on FlatList item parent container like below so the scrolling issue would never come again and you can easily handle the touch on each item separately
<FlatList
style={{...}}
data={[...]}
keyExtractor={(item, index) => index.toString()}
renderItem={({ item }) => (
<TouchableWithoutFeedback onPress={() => {...}}>
<View>
....
</View>
</TouchableWithoutFeedback>
)}
/>
I have a FlatList in my Chat Screen but I notice that in Android, the statusbar and bottombar is gone.
Here is the original code and screenshot.
<SafeAreaView style={{flex: 1}}>
<...otherComponent/>
<FlatList
keyExtractor={item => item.id}
data={messages}
renderItem={_renderList}
</SafeAreaView>
If I remove FlatList, the statusbar and bottombar will appear again.
<SafeAreaView style={{flex: 1}}>
<...otherComponent/>
</SafeAreaView>
I want the statusbar and bottombar to be shown. Any idea what props should be pass into FlatList? or wrap with any other component?
I'm building a mobile application with React Native, and I have a ScrollView inside one of the pages.
The problem is that I have in this page a FlatList so when I go to that page, I get this error:
VirtualizedLists should never be nested inside plain ScrollViews with the same orientation... The thing is, I set the ScrollView nestedScrollEnabled to true and I also set the FlatList's scrollEnabled to false because I don't really need the scroll there (I'm using it to render items from an enum) so I thought that should fix the error, but the error still persist.
It looks like this:
<ScrollView showsVerticalScrollIndicator={false} nestedScrollEnabled={true}>
<MyComponent />
</ScrollView>
And MyComponent has this FlatList:
<FlatList
scrollEnabled={false}
style={{padding: 8,marginBottom: 8,}}
data={categories}
numColumns={numOfColumns}
keyExtractor={category => category}
renderItem={item => renderItem(item.item)}
/>
It essentially looks like this:
<SafeAreaView>
<ScrollView>
<FlatList />
<OTHER COMPONENTS />
</ScrollView>
</SafeAreaView>
Your component FlatList and ScrollView have the same orientation(vertical), so you need put your component inside a ScrollView with horizontal orientation like this:
<View>
<ScrollView nestedScrollEnabled={true} style={{ width: "100%" }} >
<View>
<ScrollView horizontal={true} style={{ width: "100%" }}>
<MyComponent />
</ScrollView>
</View>
</ScrollView>
</View>
The error is because you are using a FlatList inside a ScrollView.
The FlatList is already a scrollable component,
FlatList are accepting props like ListHeaderComponent for rendering header content and ListFooterComponent for rendering footer content. Here you can remove the ScrollView and instead of that you can only render FlatList for making whole page scrollable
You need to change your code as shown below:
const _renderHeader = () => <Text>Your Header</Text>
const _renderFooter = () => <Text>Your Footer</Text>
const _renderFooter = () => <Text>FlatList items</Text>
<SafeAreaView>
<FlatList
data={data}
keyExtractor={(item, index) => String(index)}
renderItem={_renderItem}
ListHeaderComponent={_renderHeader}
ListFooterComponent={_renderFooter}
ListFooterComponentStyle={styles.footerStyle} //If you need to give specific styles for footer component
ListHeaderComponentStyle={styles.headerStyle} //for header comp style
/>
</SafeAreaView>
You don't want to use a ScrollView when you are using a FlatList
You can check the official docs for more clarification
I have a flatList and some views in the scrollView, how to make when the flatList scroll to top, we start to scroll flatList not scrollView.
<ScrollView>
<View>
// some child views
</View>
<FlatList
data={this.props.sourceData}
renderItem={this._renderItem}
/>
<View>
.... // some child views
</View>
the scroll conflict is complex, you can try to move the header views into FlatLIst
ListHeaderComponent, and the footer views into the ListFooterComponent
<FlatList
data={DATA}
ListHeaderComponent={"your header component"}
renderItem={({ item }) => <Item title={item.title} />}
keyExtractor={item => item.id}
ListFooterComponent={"your bottom views"}
/>
you can also read my question, in the description I give some solution. I hope it can help you
Is there any possibility to prevent the keyboard from dismissing when scrolling a FlatList?
When using a ScrollView setting the prop "keyboardDismissMode" to "none" is the solution to this problem, but this doesn't work for me at a FlatList...
I use the FlatList inside a self-made component, that is in a Stack-Navigator, while there is a focussed TextInput in its header. I render the FlatList like this:
<View style={{flex: 1}}>
<FlatList
style={{flex: 1}}
data={this.props.data}
keyExtractor={(item, index) => item.id}
renderItem={this.renderItem}
/>
</View>
The renderItem() function:
renderItem = ({item, index}) => (
<TouchableHighlight
style={{paddingVertical: 10}}
onPress={() => {
this.props.onChooseItem(item);
}}
>
<Text numberOfLines={1} >
{item.text}
</Text>
</TouchableHighlight>
)
The docs at the beginning of the reference section says that FlatList "Inherits ScrollView Props, unless it is nested in another FlatList of same orientation."
So I think you can just do use that keyboardDismissMode without encapsulation in a scrollview.
No need of scrollview inside flatlist it will create performance issue.
just add onScrollBeginDrag={Keyboard.dismiss} in flatlist. it will work in android as well iOS while keyboardDismissMode='on-drag' will work only in iOS
You might think about to encapsulate your FlatList in a ScrollView?
Even if this seems to solve the issue, it's NOT a recommended way!
That's because if it force rerendering the whole flatlist, each time you scroll the screen.
You might better try a component like react-native-keyboard-aware-scroll-view
I've found this article with some alternate Ideas to fix it:
How to use KeyboardAvoidingView with FlatList?
Check: https://facebook.github.io/react-native/docs/scrollview#keyboarddismissmode