Add BackgroundImage to ScrollView-CodePudding

I have this <ScrollView />

<ScrollView
        style={styles.scrollview}>
        {route.params && route.params....map((cat, index) => {
            return <Kitten
                cat={cat}
                key={index} />
        })}
    </ScrollView >

const styles = StyleSheet.create({
    scrollview: {
        paddingLeft: 15,
        paddingRight: 15,
        backgroundColor: 'white',
        flex: 1,
    },
});

into which I want to put this <BackgroundImage />.

import { ImageBackground } from 'react-native';

const image = require('...')

const Kittens = ({ children }) => {
    return <ImageBackground
        source={image}
        resizeMode='repeat'
        style={{ width: '100%', height: '100%' }}>
        {children}
    </ImageBackground>
}

I want the background image to be fixed, so that the content scrolls over the image. I further shall fill the whole screen. How would I do that?

CodePudding user response：

If the parent of the Kittens fills the screen, removing white backgroundColor should work. You can play with resizeMode to get the best result from your image.

<Kittens>
  <ScrollView
      style={styles.scrollview}>
      {route.params && route.params....map((cat, index) => {
          return <Kitten cat={cat} key={index} />
      })}
    </ScrollView >
</Kittens>

const styles = StyleSheet.create({
    scrollview: {
        paddingLeft: 15,
        paddingRight: 15,
        //backgroundColor: 'white',
        flex: 1,
    },
});

CodePudding user response：

use the scrollview as the child of ImageBackground

<ImageBackground
source={{uri://image url here}}
style={{
}}
>
<ScrollView
      style={styles.scrollview}
      contentContainerStyle={}
    >
      {route.params && route.params....map((cat, index) => {
          return <Kitten cat={cat} key={index} />
      })}
    </ScrollView >
</ImageBackground>