Have a fixed <ImageBackground> that doesn't displace itself when I scroll

Question

I want to have a background image that takes all the screen and stays static when I scroll.

I have this component in a React Native project:

<ImageBackground`     style={styles.backgroundImage}
 source={require('../assets/images/Fondo1b.jpg')}>
 ....
</ImageBackground>

It is wrapping another components and it has this style:

  backgroundImage: {
    flex: 1,
    resizeMode: 'cover',
    width: Dimensions.get('window').width,
    height: Dimensions.get('window').height
  },

When I scroll up and down, it moves with the screen: GIF link

In here you can see how it displaces with the scroll.

I need it to stay static occuping the size of the screen, not moving when I scroll and not displacing my FAB (it's Native Base's FAB, it that helps...) Any tips, please?

Answer 1

Check this out. Need exactly this for React Native

https://medium.com/azimuth/adding-a-static-background-for-react-native-scrollview-79aa6b43e314

<ImageBackground style={styles.backgroundImage}/>  


  backgroundImage: {
    width: Dimensions.get('window').width,
    height: Dimensions.get('window').height,
    position: "absolute",
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    zIndex: -1
  },