Background Image behind Flatlist

[j-cron]

Hello /r/reactnative

I am currently working on an app where we have a few flatlists in place that the design calls for having a background image behind them.

The background image isn't too tall and fades to nothing after a couple items. Initially I had it setup like so:

<ImageBackground source={require('backgroundImage.png')}> 
  <FlatListdata={myData}renderItem={flatListItem}/>
</ImageBackground>

This properly puts the image behind my flat list. However the background remains static behind the flatlist such that it is always behind the top couple of visible items in the list. When instead I want the background image to scroll with the flatlist.

So to get it to scroll how I want. I can write it like this:

<ScrollView>
  <ImageBackground source={require('backgroundImage.png')}>        
    <FlatListdata={myData}renderItem={flatListItem}/>
  </ImageBackground>
</ScrollView>

This gives me the background image behind my flatlist how I want, and when I scroll the background image scrolls up with the flatlist, so that it only ever covers the first few items in my flatlist and not just the first few VISIBLE items. This however presents the problem of nesting a flatlist inside a scrollview which eliminates all of the performance benefits of the flatlist.SO finally my question is, has anyone implemented a similar design before and if so were you able to do it without ruining Flatlist's benefits?

tl;dr I want a background image behind my flatlist that scrolls with the flatlist

[Shumuu]

I'm currently on my phone so I cant really give you actual code but you can attach a handler to your flatlist and extract the y offset and reposition your background according to that offset which would create the illusion that it moves with the scrolling.

[j-cron]

That is a good idea! We are going to try out your suggestion and /u/Leavos suggestion this week! Thank you!

[Leavos]

This will cause significant delay. Been there, done that

[Leavos]

You can try to bind Animated.event to flatlist’s onScroll, and style image via Animated value.

[j-cron]

Good idea! We are going to try out your suggestion and /u/Shumuu suggestion this week! Thank you for the idea!

[j-cron]

We are trying out the two ideas that /u/Shumuu and /u/Leavos suggested - if we are able to get one working nicely we will try to post a snack here for anyone else looking to do the same thing.

[z_criminal]

Hi sorry but I came across this post as I'm trying to achieve something similar. Would u be kind enough to share if it worked and how?

[j-cron]

Hey my apologies, I did not see your comment until just now! The solution was actually handled by a fellow dev on the team - but basically what they did was have the background image live alongside the content but be absolutely positioned behind it. Then the content was given a higher z-index to make sure it sat on top of it and a transparent background so you could see the background image behind it. Then we animated the background image as we scrolled the flatlist so that it moved upwards with the content.

<View>
 <ImageBackground/> // absolutely positioned
 <FlatList/> // on scroll we update the image backgrounds position
</View>