Question 35053 in React native Question posted in
The official React Native documentation can be found here.

Add BackgroundImage to ScrollView in React-Native for JavaScript – React native

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?

Tags:

3

Answers


  1. 0

    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,
    },
});
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
  3. 0 
    <ImageBackground
source={{uri:image url}}
style={{height:"100%", width:"100%"}}
>
<ScrollView
      contentContainerStyle={flexGrow:1}
    >
    <View style={{flex:1}} >

    </View>
    </ScrollView >
</ImageBackground>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search