[ScrollView] Image fixed inside the scrollview

[jeremybarbet]

Hi !

I would like to fixed an image, and a linear gradient as well, on a dedicate view inside the scrollview component. I tried with some styles, but each times, the image scroll with content.

What can I do ?

<ScrollView>
  {/* TODO: Prevent scroll for this View — Add blur image on background */}
  <View>
    <Image source={{ uri: cover_photo }} />
    <LinearGradient  />
  </View>

  {/* This view is scrollable ABOVE the background image */}
  <View>
     {…content}
  </View>
</ScrollView>

[facebook-github-bot]

Hey JeremDsgn, thanks for reporting this issue!

React Native, as you've probably heard, is getting really popular and truth is we're getting a bit overwhelmed by the activity surrounding it. There are just too many issues for us to manage properly.

• If you don't know how to do something or something is not working as you expect but not sure it's a bug, please ask on StackOverflow with the tag react-native or for more real time interactions, ask on Discord in the #react-native channel.
• If this is a feature request or a bug that you would like to be fixed, please report it on Product Pains. It has a ranking feature that lets us focus on the most important issues the community is experiencing.
• We welcome clear issues and PRs that are ready for in-depth discussion. Please provide screenshots where appropriate and always mention the version of React Native you're using. Thank you for your contributions!

[jevakallio]

Try declaring your background element "behind" the ScrollView using position:absolute within a position:relative container, and make the ScrollView transparent to let the background show through:

<View style={[styles.container]}>
  <View style={[styles.fixed]}>
    {backgroundImageContent}
  </View>
  <ScrollView style={[styles.fixed, {backgroundColor: 'transparent'}]}>
    {scrollableContent}
  </ScrollView>
</View>

var styles = StyleSheet.create({
  container: {
    position: 'relative'
  },
  fixed: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
  }
})

These types of questions are better asked on StackOverflow. The GitHub issues are best used for reporting problems with the framework itself.

[jeremybarbet]

Thanks. This is what the bot said, I posted on stackoverflow and found the solution.