I worked with flat lists in React Native but I didn't find out, if it would be possible do make a kind of grid like you can see in the image. How could I do that? (The list is going on and on)
Well, I think the solution is to create ItemView for each section and each ItemView will be another FlatList with horizontal scrolling, so basically you will have one external list with vertical scrolling where each item is FlatList with horizontal scrolling customised by index of the external list.
with numColumns prop, multiple columns can be rendered.
<FlatList
data={listItems}
numColumns={2}
ItemSeparatorComponent={ItemSeparatorView}
renderItem={ItemView}
keyExtractor={(item) => item.id.toString()}
/>
checkout this example
Related
Sorry if this has been asked previously, but I hadn't found a working answer.
I'm currently working on a simple app. The main screen features a vertical flatlist with user generated content. The header, though, is transparent and has a predefined height, so the user can see a background image; when the flatlist is scrolled, it covers this background image, which remains static. The goal is to give the user the feeling that they're covering this image, similar to the pull-up element on google maps, which covers the map to show more data.
This would be a simplified example of the current, working code, so you get the gist of it:
const HomeComponent = () => (
<View>
<ImageBackground source={require('../assets/background.png')}>
<Flatlist
headerComponent={<TransparentHeaderOfPredefinedHeight/>}
data={DATA}
renderItem={renderItem}
keyExtractor={item => item}/>
</ImageBackground>
</View> )
Up until here, everything is fine. The thing is, I would like to add a touchable button on this background, that is subsequently covered when the Flatlist is scrolled.
Here's the issue. I have no way to make the touch event propagate through the flatlist's header and reach this button. I tried using pointerEvents='none' and 'box-only' in different combinations, but whenever I was able to touch that button, I was in turn unable to scroll or to interact with the flatlist elements.
I also tried pushing the background image and button on the flatlist header, and using the vertical offsite of the flatlist scrolling to move these elements and simulate the flatlist scrolling over it. Unfortunately, the result was absolutely atrocious, lacking any kind of smoothness.
Does anyone know how I could implement this functionality? I can provide more info if needed. Thank you in advance!
I need some help. I've made a custom list view with some animation (drag and drop). everything is working fine except when there is large number of data, its taking too much time to load the page/when navigating back from another page. Is there any technique where I can reduce the page loading time? Please do not suggest any external packages, and also I cannot use flatlist either, due to my Animated.Scrollview conflicting with Flatlist own Scrollview. I've searched online, and everyone is using flatlist, which i cannot use. Or is it possible to ignore FlatList Own ScrollView?
Found an alternate solution here. You can use FlatList for larger data. Then pass your Animated.ScrollView component as a props through FlatList.
renderScrollComponent={(props) => (
<Animated.ScrollView
{...props}
onScroll={(event) => {
onScroll({ y: feedScroll })(event)
props.onScroll(event)
}}
/>
)}
I want to have a vertical list of cards in my React Native app using react-native-paper. I'll be using the <Card> component that is part of react-native-paper.
Should I wrap the cards in a <FlatList> or the <List> component that is part of react-native-paper? I'm not sure exactly what the <List> component in react-native-paper corresponds to and whether it would be beneficial to use it to get better results both in Android and iOS.
I recommend you to use your Card inside a Flatlist, and if you want to use your flatlist as vertical it is default to vertical . If you want to use it horizontal you need to declare it inside as a boolean. Here is an example
<FlatList
data={yourData}
keyExtractor={(item) => item.id.toString()}
renderItem={({ item }) => <Card> ... </Card>}
/>
The benefit of using a <Flatlist> over other similar components is only elements you can see on screen render, so as you scroll more render. However other components like react-native <ScrollView> render all elements at once, thus reducing the performance of the app.
I have not heard of the <List> component and cannot say whether this applies :(
I have this particular component above a Flatlist which renders my cards, and I want to make them both scrollable. I tried to nest them with a ScrollView:
<ScrollView>
<MainImage/>
<FlatList />
</ScrollView>
It works but my flatlist lost its ability to constrain memory, since I have a lot of data to render the app lags till crash.
If remove the ScrollView from my MainImage component it gets stuck on the screen and the cards scrolls behind it which is not cool.
<View>
<MainImage/>
<FlatList/>
</View>
How do I do to both components be able to scroll without losing performance?
obs: I'm using version 0.55 of react native
You can also use collapsible navbar above the flatlist rather than using separate MainImage Component. People are doing that and example is given in this link (https://medium.com/appandflow/react-native-collapsible-navbar-e51a049b560a)
I'm trying to get an element in a scrollview to always stay to the left of the screen. Kinda like the number rows in Excel. They stay to the left when scrolling horizontally but scroll also down when scrolled vertically. So far I tried animating the element by hooking up the onscroll element to it. It does work but it feels very choppy. It is fast but not fluid. Almost looks like the element is vibrating.
Are there any other techniques in react native to get the desired result? Here the important lines I'm using.
scrollPositionX: new Animated.Value(0),
scrollEventThrottle={16}
onScroll={Animated.event([{nativeEvent: {contentOffset: {x: this.state.scrollPositionX}}}] )}
<Animated.View style={[styles.times, {
transform: [{translateX: this.state.scrollPositionX}]
}]}>
...
</Animated.View>
A crude way to do it is to render the sticky columns outside of the horizontal ScrollView. Just make sure your stick and non sticky cells end up being the same height so everything lines up.
If you want to scroll vertically as well, wrap them both inside of another ScrollView.
<ScrollView>
<View>
// render the sticky cells
</View>
<ScrollView horizontal={true}>
// render the non sticky cells
</ScrollView>
</ScrollView>
The problem is that if you have a lot of rows, especially with more complex components within them, you'll have performance issues.
ListViews are better at handling lots of data, but I haven't found a way to make use of them for this scenario. You'd need one for both the sticky column and normal cells, and there's no way to keep them in sync without watching onScroll as you're doing.
I'm hoping someone has better way to do this though. I really need this functionality as well.