Object-position on an ImageBackground in react-native

Question

I'm trying to change how my ImageBackground is show inside my container. The height of the image is bigger than the one of my container, so I would like to show the top of the image, not the center. Like in CSS with OBject-position

<View
    style={
      characterSelected.type === 'villain'
         ? styles.villainContainer
         : styles.heroContainer
     }>

 <ImageBackground
                source={characterSelected.bgImage}
                style={[
                    styles.bgImage,
                    {
                        borderWidth: sizes.borderWidthCounter,
                        borderColor: characterSelected.borderColor,
                    },
                ]}>
some other stuff in here
</ImageBackground>
</View>

villainContainer: {
        width: '100%',
        height: '50%',
    },
  bgImage: {
        flex: 1,
        marginLeft: sizes.marginHorizontalCounter,
        marginRight: sizes.marginHorizontalCounter,
        marginTop: sizes.marginVerticalCounter,
        marginBottom: sizes.marginVerticalCounter,
        borderRadius: sizes.radiusCounter,
        flexWrap: 'wrap',
        justifyContent: 'center',
        alignItems: 'center',
        alignContent: 'center',
        position: 'relative',
        overflow: 'hidden',
        resizeMode: 'cover',
        borderWidth: 1,
    },

I've try some solution with

imageStyle={top:100}

but it change the position of the image inside the container, but the portion of the image shown.

As you can see in this screenshot you cannot see the head of my character: https://i.postimg.cc/PfVH3MBM/counter-view.png

the character: https://i.postimg.cc/J4yL9k8C/klaw.jpg

Thank you

Object-position on an ImageBackground in react-native

0 Answers0