html - Full width image in react-native flexbox not stretching -
i have 2-column grid of products , i'm trying images fill width of it's container. current code, image fills available height of imagewrapper. if set large height imagewrapper, the images stretch fill width, not viable images different products have variable height.
<touchableopacity style={styles.item} onpress={() => this.openproduct(item)}> <text style={styles.boldlabel}>{item.name}</text> <view style={styles.imagewrapper}> <image style={styles.gridimage} resizemode={'contain'} source={{uri: image }} /> </view> </touchableopacity>
the css:
item: { flexdirection: 'column', width: metrics.screenwidth / 2 - metrics.doublebasemargin, justifycontent: 'center', margin: metrics.basemargin, backgroundcolor: "#fff", }, imagewrapper: { flex:1, flexdirection:'row' }, gridimage: { flex:1, height: null, width: null }
any appreciated. thanks!
try react-native-fit-image. (not module). it's best show images maintaining aspect ratio. make sure have flex
properties setup container , grids.
Comments
Post a Comment