I've got a question. I've been trying to use SectionList for render a list section but the problem is I want to use list in horizontal mode and I don't know how to do that.
Please help I've stuck on this for 2 hours.
This is my code:
<SectionList
renderItem={({item}) => <Image source={require('../assets/images/img1.jpg')} />}
renderSectionHeader={({section}) => <Text>{section.title}</Text>}
sections={dataSource}
/>
In ReactNative docs, there is no prop for making horizontal SectionList(as of 0.48), but its parent VirtualizedList has.
Hence just try if it works ...
<SectionList
horizontal={true}
/>
If it does not work then probably u should try using Flatlist which has a horizontal prop and wait until it's implemented for SectionList
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 am using flatlist to render some items collected from firestore and I have a problem with ListHeaderComponent prop.
The header is placed to the left and I need to place it on the top of the 1st item (see 2nd image below) and when moved it has to be fixed with the first item of the list as the image.
Currently
Horizontal flatlist with ListHeaderComponent on the left
I need to achieve this when scrolling left:
Horizontal flatlist with ListHeaderComponent on the top of 1st item
You can separate header text from FlatList. Use Text apparently to show the header.
EDIT
If you want to scroll text with a list you can use FlatList inside ScrollView. In this case, you may disable scrolling for FlatList. Please check below for detail.
<ScrollView horizontal>
<Text>Header Text</Text>
<FlatList scrollEnabled={false} />
</ScrollView>
Okay, solved! Here's the code:
<ScrollView horizontal={true}
<View>
<Text>Header Text</Text>
<FlatList horizontal={true}
scrollEnabled={false} />
</FlatList>
</View>
</ScrollView>
Thank you #baymax :)
I'm new on ReactNative development and I'm developing my first application.
I'm trying to use OnEndReached in a flat list which is in a scrollview tab. I use this scrollview because I have 3 flat lists in my application.
The first two are horizontal. For the last one, I need to handle the pagination with the onEndReached. But, When I put this last flat list in the scroll view, it doesn't work at all without any issues.
When I put it out of the scrollview, it works correctly. So I assume the issue is related to that.
Do you know how I can manage this issue? I'm sorry if this question is a basic one :(
OnEndReached doesn't call if the parent has ScrollView. Why not put those top views in the Header?
<FlatList
data={data}
renderItem={}
keyExtractor={(item, index) => item.personId}
onEndReached={() => {
console.log(" On End Reached");
}}
onEndReachedThreshold={0.01}
ListHeaderComponent={() => (
<View>
<FlatList/>
<FlatList/>
</View>
))
/>
I'm trying to make use of CellRendererComponent in Flatlist (rn 0.62) to let the zIndex prop to work, and it does, but all the data is rendered at once.
If I try to set initialNumToRender={number} and windowSize={number} then it limits the render, but doesn't render after the number set in those props.
<FlatList
style={{ flex: 1 }}
horizontal
showsHorizontalScrollIndicator={false}
data={data}
CellRendererComponent={renderGanttCell}
keyExtractor={ganttKeyExtractor}
bounces={false}
scrollEventThrottle={16}
initialNumToRender={3}
windowSize={9}
/>
Changing CellRendererComponent to renderItem works without the zIndex, but all the data is lazy rendered.
Any work around to keep CellRendererComponent and lazy render the rest of the data?
I know this is late, but for anyone else (like me) arriving here. React Native VirtualizedList calls CellRendererComponent like so:
<CellRendererComponent
{...this.props}
style={cellStyle}
onLayout={onLayout}>
{element}
{itemSeparator}
</CellRendererComponent>
Your custom CellRendererComponent has to implement at least the onLayout prop:
function MyCustomCellRenderer(props) {
return(
<View onLayout={props.onLayout}>
...etc
</View>
)
}
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