score:2

Accepted answer

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

score:0

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"


Related Query

More Query from same tag