CODEWITHSUNDEEP
reactjsreact-native
gusti
gusti

Reputation: 543

How can the image of an ImageBackground be positioned customly

I have a ImageBackground over the whole screen, and I am trying to move the image, which is way bigger, to the left. When I try to position the image using left: -100 this happens (picture below). The ImageBackground is moved, but moves as a whole. What I need is to move only the underlying picture, not the View integrated in the ImageBackground. How can this be achieved?

Styling:

bgImageContainer: {
    flex: 1
},
bgImage: {
    left: -100
}

Code:

const screenSize = {
        width: Dimensions.get('window').width,
        height: Dimensions.get('window').height - StatusBar.currentHeight
    };
    return (
<ImageBackground
            source={bgImage}
            resizeMode="cover"
            style={{ ...screenSize, ...styles.bgImageContainer }}
            imageStyle={styles.bgImage}
        >
            {/* content */}
        </ImageBackground>
);

enter image description here

Upvotes: 0

Views: 1312

Answers (2)

Xhirazi
Xhirazi

Reputation: 857

Try this work-around

<View style={{ ...screenSize, ...styles.bgImageContainer }}>
    <Image source={bgImage} style={styles.bgImage} resizeMode="cover"/>
    {/* content */}
</View>

Styling:

bgImageContainer: {
    flex: 1
},
bgImage: {
    position:'absolute',
    width:SCREEN_WIDTH-100,
    height: SCREEN_HEIGHT,
    alignSelf:'flex-end' // if this not work make width full and add margin
}

Upvotes: 1

Yilmaz
Yilmaz

Reputation: 49182

wrap it with SafeAreaView component

import { SafeAreaView } from "react-native";
  
<SafeAreaView>
            <ImageBackground
            source={bgImage}
            resizeMode="cover"
            style={{ flex:1 }}
            imageStyle={styles.bgImage}
        >
            {/* content */}
        </ImageBackground>
</SafeAreaView>

Upvotes: 0

Related Questions