CODEWITHSUNDEEP
reactjsreact-native
sbqq
sbqq

Reputation: 1091

React Native Image resizeMode: cover with bottom positioning

hello guys I have a problem with Image positioning. I would like to achieve to position my Image like resizeMode="cover" + background-position: "bottom". So if Image overflows, i need to let the image be drew from bottom of the screen and "cropped" from sides and top. Is something like this even possible? My current code is:

<View style={{
  height: ILLUSTRATION_HEIGHT,
  width: ILLUSTRATION_WIDTH,
  position: "relative",
  overflow: "hidden"
}}>
    <Image
      width={ILLUSTRATION_WIDTH}
      height={ILLUSTRATION_HEIGHT}
      resizeMode="cover"
      source={{ uri: "illustration" }}
      style={{
        position: "absolute",
        bottom: 0,
        width: "100%",
        height: "100%"
        }}
      />
</View>

Maybe I did not describe it well enough so here is a picture of what I'm trying to achieve:

What I want to achieve

Note: Dashed part is the part of Image, that is actually showed from full picture.

Thank you so much!

Upvotes: 9

Views: 9968

Answers (2)

ikerfah
ikerfah

Reputation: 2862

By using width and height '100%' you can't get exactly what you wanted to, because the image will fill all the available space, I suggest debugging your UI using backgroundColor or ctrl+D and 'toggle inspector' then check what exactly happens in your view. This is a snippet of code that responds to your need (right image 'WHAT I NEED):

<View
        style={{
          height: 150,
          width: 150,
          position: 'relative',
          overflow: 'hidden',
          backgroundColor:'red',
          alignItems:'center'
        }}>
        <Image
        
          resizeMode="cover"
          source={{ uri: 'https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500' }}
          style={{
            position: 'absolute',
            bottom: 0,
            width: '90%',
            height: '90%',
          }}
        />
      </View>

you will get something like that : Result image

Upvotes: 4

Soul Dev
Soul Dev

Reputation: 11

If you wanna translate your image when you put option : resizeMode="cover" , you can translate by way : translateX = size ( in reactJS ) <=>

<View style={{flex: 1,
        position: 'relative',
        width: width - 20,
        height: height / 3,
        borderRadius: 10,
        shadowColor: "#000",
        shadowOffset: { width: .5, height: .5 },
        shadowOpacity: .5,
        shadowRadius: 3,
        elevation: 5,
        margin: 10}}>
            <View style={{width: 400,
                height: "100%",
                borderRadius: 10,
                overflow: 'hidden',
                flex: 1 }}
            >
                <Image 
                resizeMethod="cover" 
                style={{ paddingTop: 500, width: 400, height: '100%' }} 
source={{uri: "https://f39zpg.zdn.vn/7941473480683381577/74807d444750b50eec41.jpg" }} 
                />
            </View> 

        </View >
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

= size (in css reactNative ). it worked me.

Hope it will help to you !

"Anh Da Đen"

Upvotes: -1

Related Questions