In react-native, using SectionList, I want to have a sticky section header with a background color, but only when the element is sticky. What I've done so far, is to set a views position to absolute. The problem is that I can't find a way to get the items behind the view, unlike the picture nested below:
Without zIndex'es applied:
Until now, I've tried to set different zIndex'es, but it doesn't seem to work, as everything just goes behind the view including the SectionHeaders, despite having a higher zIndex, than the view. I guess, it's because, the zIndex is relative to the parent. A picture is nested below:
With zIndex'es applied:
To sum up: How do I make sure that the items goes behind the view, to simulate a background, on the sticky section header? Other solutions to get a background on the sticky section header, is also much appreciated.
I have inserted the code (with zIndex'es) below.
render () { return (
<View>
{/* Header */}
<View style={[styling.headerContainer, {zIndex: 8}]}/>
{/* List */}
<SectionList
sections={DATA}
keyExtractor={(item, index) => `${item} - ${index}`}
stickySectionHeadersEnabled
style={{marginTop: 44}}
// Section Header
renderSectionHeader={({section}) =>
<View style={[styling.sectionHeaderContainer, {zIndex: 9}]}>
<Text style={styling.title}>{section.title}</Text>
</View>
}
// Items
renderItem={({item}) =>
<Text style={[styling.text, {zIndex: 7}]}>{item}</Text>
}
/>
</View>
)}
Related
I created a dashboard for work that involves A SectionList and a filtering search input box (TextInput). Only targeting Android platform.
<SectionList
ref={listRef}
style={{ paddingHorizontal: basePadding }}
sections={filterResults ?? data}
keyExtractor={(item) => item?.Id}
renderItem={(item) => (
<Items onPressHandler={onDeviceListItemPress} item={item} />
)}
renderSectionHeader={({ section }) => <Header section={section} />}
ListFooterComponent={() => <View style={{ paddingVertical: 50 }} />}
stickySectionHeadersEnabled
/>
The search string is used to filter all the items in the list (obviously).
The issue is that when:
the user has scrolled the list with the sticky header partially covering it's items,
Then filters out all the items
Then clears the search string (rendering the list in it's initial state)
The section header breaks, and returns to the position it was in before the filter occurs.
Once the user interacts with the SectionList the problem is solved, but I want to avoid this issue all togethor.
I'm thinking it's because the sticky header location is being cached somewhere and then when the list is being re-rendered it is going off that value. Any ideas on how to restore that state?
I've tried:
Forcing a scroll to top
Searched for possible props to solve the issue
Basically, I have a list of items (with images) inside a single Card (custom component). Because the rendering of those items is slow, I wanted to use a FlatList to render them incrementally.
Unfortunately, I get the expected error
VirtualizedLists should never be nested inside plain ScrollViews ...
But I don't actually want to use a ScrollView inside the Card. I just want to render a few Items in a single Card, which should change its size to fit all the items.
Setting scrollEnabled={false} on the FlatList still shows the error above.
Using the ListHeaderComponent and ListFooterComponent props is not an option, because the content above and below should NOT be rendered inside the Card.
Here is a minimal example of what I mean:
const Comp = () => {
return (
<ScrollView contentInsetAdjustmentBehavior="automatic">
<Text>Header</Text>
<Card>
<FlatList
data={data}
renderItem={({ item }) => (
<Image source={{uri: item.localImageUrl}}/>
)}
keyExtractor={(item) => item.id}
scrollEnabled={false}
initialNumToRender={0}
maxToRenderPerBatch={3}
contentInsetAdjustmentBehavior='automatic'
/>
</Card>
<Text>Footer</Text>
</ScrollView>
);
};
What's interesting though, that aside from the error - I get the result I expected, and I could technically hide that error and ignore it, but that does not seem like the recommended approach.
Important: I am not specifically looking for a FlatList solution. It could technically be any Component that renders items incrementally in a non-blocking way.
The important point with a Flatlist is the reusing of cells so that not all components need to be rendered at the same time. So scrolling is an important part of this. On the other hand two scrollable components inside eachother will make it impossible for the system to know which component should be scrolled.
If there are only 3 items and it should not be scrollable you can just include a list of items inside the Scrollview like this:
const Comp = () => {
return (
<ScrollView contentInsetAdjustmentBehavior="automatic">
<Text>Header</Text>
<Card>
{ data.map((item, index) => {
return (
<Text key={index}>{item.title}</Text>
);
}) }
</Card>
<Text>Footer</Text>
</ScrollView>
);
};
In my React Native Project, I am trying to make some kind of lists using Flatlist or sometimes using map method, for executing JSX Element. I am getting the result correctly, But there is a bit of a problem in separate.
Let's take chatting app example, When we open WhatsApp there are a lot of people showing up, but there is also a tiny separator after each item, That looks great, Now exactly when I try to put that separator in my React Native application using ItemSeparatorComponent attribute in Flatlist, It's working but still in some places, meaning in some items that separator not showing up, its looks missing, it feels that there is no border/separator. And actually what's going on is that, the below item from that separator which is hidden or which height looks smaller than others, that below View go a little bit towards the upside, so the separator gets to hide, That's the main problem, Why is that happening, I tried everything but still, I am getting that UI problem.
Here is code example:
<FlatList
data={actionSheet._data}
showsVerticalScrollIndicator={false}
showsHorizontalScrollIndicator={false}
keyExtractor={(_, index) => index}
renderItem={({item, index}) => <ActionSheetClickableItem data={item} index={index}/> }
ItemSeparatorComponent={() => (
<View
style={{
height: 1,
width: '100%',
backgroundColor: 'red'
}}
/>
)}
/>
OR
<ScrollView>
{
actionSheet._data.map((item, index) => (
<>
<ActionSheetClickableItem data={item} index={index} key={index}/>
<View
style={{
height: 1,
width: '100%',
backgroundColor: 'red'
}}
/>
</>
))
}
</ScrollView>
So according to the above code, I know for sure, that everything is correct, But why is that separator get hidden, If we look at this picture in the area of the green rectangles, there is no border showing up, Why... I want to show it here, I tried to put zIndex property, that trick working correctly but that isn't the solution, It have to correct view as we expecting, why its behave like this, any solution??????
I was facing the same issue.
That might be with Emulator or Your screen.
You can use also increase the height of itemSeparater or make the background color more darker.
If you check it in real device then it displays all the separaters.
I was trying to make a view that I wanted to come over a flatlist so that on clicking it user can reach the top.But the flatlist was covering that element.
<View style={{backgroundColor:'#e6e6e6',flex:1,}>
<View style={{position:'absolute'}}>
<Text>Scroll To Reload</Text>
</View>
<FlatList refreshing={this.state.refresh} onRefresh={()=>this.refreshAllTweets()}
data={tweets}
keyExtractor={(item, index) => index.toString()}
renderItem={({item}) =>
<TweetItem onPress={()=>this.goToDetail(item.id)} onImagePress={()=>this.toggleModal(item.id)}
onCommentPress={()=>this.showComments(item.id)} tweet={item}/>}
/>
</View>
Each child in a view is rendered in order, and ultimately stacked on top of each other until all the children are rendered. As the view you want on the top is being rendered first it is going to be at the bottom. Change your code so that the view that you want on the top is rendered last. i.e. move it to the bottom of the view.
<View style={{backgroundColor:'#e6e6e6',flex:1}}>
<FlatList
refreshing={this.state.refresh}
onRefresh={()=>this.refreshAllTweets()}
data={tweets}
keyExtractor={(item, index) => index.toString()}
renderItem={({item}) => <TweetItem onPress={()=>this.goToDetail(item.id)} onImagePress={()=>this.toggleModal(item.id)} onCommentPress={()=>this.showComments(item.id)} tweet={item}/>}
/>
<View style={{position:'absolute', top: 0}}>
<Text>Scroll To Reload</Text>
</View>
</View>
As the view is now absolutely positioned you may wish to give it an actual position.
Update for comment
Flatlist covering the a element with absolute position
FlatLast has a prop called ListFooterComponent it takes a React Component Class, a render function, or a rendered element. So you could update your FlatList by adding the following prop.
<FlatList
...
ListFooterComponent={
<View>
<Text>Scroll To Reload</Text>
</View>
}
/>
This will attach the view as a footer to the FlatList, so it will be visible when the bottom of your FlatList is reached.
Check out the docs for more information about FlatLists.
I built a view that is populated dynamically using array mapping. After doing this, I realized that the View would be too large to contain all the array items on one screen.
Here is my code.
<View style={[styles.flexColumn]}>
{Characters.map((character, i) =>
<View key={i} style={[styles.flexRow]}>
<View>
<Text>
{character.Name}
</Text>
</View>
</View>
)}
</View>
So I tried adding a scroll view as the parent like this:
<ScrollView>
<View style={[styles.flexColumn]}>
{Characters.map((character, i) =>
<View key={i} style={[styles.flexRow]}>
<View>
<Text>
{character.Name}
</Text>
</View>
</View>
)}
</View>
</ScrollView>
This does add some scrollability to the view, but it's still cutting off a portion of the last object in the array.
Is there a way to fix this?
Thanks!
ScrollView is intended for showing scrollable content at once. Since you are populating content dynamically, you should be using FlatList. Something similar to the following would work:
...
_keyExtractor = character => character.Name
_renderItem = ({character}) => (
<Text>
{character.Name}
</Text>
)
render() {
return (
<FlatList
data={Characters}
keyExtractor={this._keyExtractor}
renderItem={this._renderItem}
/>
)
}
...
Detailed explanation is available in the docs.
If you are by any reason still forced to stick to Scrollview, the problem is probably related to the styling. I suppose styles.flexColumn should be applied to the ScrollView itself via contentContainerStyle, rather than to its' child View.