This is how I'm showing my image in React-Native:
<View>
<Text style={styles.myTitle}> This is the title 2 </Text>
<Image
style={{ width: null}}
source={require('./images/05.jpg')}
resizeMode="stretch"
/>
</View>
With the resizeMode="stretch" The Image is shown like this:
The same image when displayed with resizeMode="contain" :
<View>
<Text style={styles.myTitle}> This is the title 3</Text>
<Image
style={{ width: null}}
source={require('./images/05.jpg')}
resizeMode="contain"
/>
</View>
resizeMode="contain":
I want the image to be displayed like how it is in the second type, but there are unnecessary margins:
The margins in the first image are perfect but the full image is not shown. I always thought contain will take care of that but it's not helping here. All I want is the entire image to be shown without any extra margins.
Please help. Thanks.
You can use cover, but it will crop part of the image.
To make it work you will need to add a height property to your image:
<View>
<Text>This is the title 3</Text>
<Image
style={{ width: null, height: '100%' }}
source={require('./image.png')}
resizeMode="cover"
/>
</View>
Related
I need to make a view top of text element. And the element inside View should be ordered bottom to top
three
two
one
text element
The text element should not be pushed down if number of top elements increases. How to achieve this?
I have tried like this. Got text element x,y, width, height by onlayout event
<>
<View>
<Text>Text</Text>
</View>
<View
style={{
top: textEl?.top - 20,
left: textE?.left,
position: 'absolute',
flexDirection:'column',
justifyContent:'flex-end'
}}>
<View>
<View>
<Text>one</Text>
</View>
<View>
<Text>two</Text>
</View>
<View>
<Text>three</Text>
</View>
</View>
</View>
</>;
CSS : flex-wrap: wrap-revers
React: flexWrap: 'wrap-revers'
I have a login button and I would like to place a Login text at the center of the button and an image (scaling it properly) on the right edge of the button, far away from the text.
Currently I am using an Icon from the Vector Icons library in the following way:
<TouchableOpacity style={styles.buttonLoginTouchable} onPress={this.loginUser.bind(this)}>
<View style={{ flexDirection: 'row' }}>
<Text style={{ color: '#ffffff', fontWeight: '700', paddingLeft: '46%' }}>Login</Text>
<Icon name="arrow-right" color='#fff' size={15} style={{ paddingLeft: '33%' }} />
</View>
</TouchableOpacity>
Which is probably also not the best way to do it. Now I would like to replace the Icon with an Image, so I wrote instead the following code:
<TouchableOpacity style={styles.buttonLoginTouchable} onPress={this.loginUser.bind(this)}>
<View style={{ flexDirection: 'row' }}>
<Text style={{ color: '#ffffff', fontWeight: '700', flex: 0.9 }}>Login</Text>
<Image source={require('../../common/arrow.png')} resizeMode='contain' style={{ height: 10 }} />
</View>
</TouchableOpacity>
This way the image scale and it is placed somehow on the right but it is not anymore horizontally aligned (and I can't understand why).
Does anyone know the best way to achieve the style I am looking for?
use it like this:
<TouchableOpacity style={{flexDirection:"row",alignItems:'center',justifyContent:'center'}}>
<Text style={{flex:.8}}>Login</Text>
<Image source={require('../../common/arrow.png')} resizeMode='contain' style={{flex:.2 }} />
</TouchableOpacity>
See the below simple example to add image in touchableopacity component in react native. It is very simple you need to wrap image component inside the touchableopacity component.
<TouchableOpacity activeOpacity = { .5 } onPress={ this.callFun }>
<Image source={require('./images/sample_image_button.png')} style = {styles.ImagesStyle} />
</TouchableOpacity>
I want to scroll the view and have a sticky button at the bottom always.
So the requirement are:
ScrollView with items.
Fixed button overlaps scroll view at
the bottom position
Scroll the view and the button need to be
always at bottom of the screen.
The sticky button are always
visible
This is my code:
<ScrollView >
<TouchableOpacity s>
<Image source={..)} />
</TouchableOpacity>
<TouchableOpacity>
<Image source={..)} />
</TouchableOpacity>
<TouchableOpacity>
<Image source={..)} />
</TouchableOpacity>
</ScrollView>
<View style={styles.fabMenuStyle}>
<Image source={..)} />
<Image source={..)} />
<Image source={..)} />
</View>
fabMenuStyle: {
flexDirection: 'row',
position: 'absolute',
bottom: 5,
justifyContent: 'center'
}
The problem is that I can position my buttons view at the bottom of the ScrollView, but I need that to always be visible at the bottom, not only at the end of the ScrollView.
I have tried all things to align vertically an icon and a text, Code:
<Danger color="secondary" style={{ flex:1,justifyContent: "center",alignItems: "center" }}>
<ErrorOutline
className={classes.warning}
/>
<text numberOfLines={1} style={{ textAlignVertical: "center" }}>
The last job was canceled
</text>
</Danger>
Things that I've tried : display, justifyContent, alignItems, flex, flexDirection, etc.
Any advice? Thanks!
Try out this inside render of react code
<div style={{display: 'flex', lineHeight: '40px'}}>
<img src="https://png.icons8.com/ios/50/000000/user-male-circle-filled.png" height="40"/>
<div>Welcome User!!!</div>
</div>
And for clear understanding you can find the entire React code for this particular example in this link: https://jsfiddle.net/r6yLmu8t/
You need to give lineHeight for the div tag in which the image/icon and text are there. And make sure that the icon/image height is equal to the lineHeight given to the div.
Hope this will achieve your need of text and icon to be on the same line and text to be at centre of icon/image
<Button light>
<View style={{flexGrow: 1, justifyContent:'center', alignItems: 'center'}}>
<Icon name='arrow-back' />
<Text>Back</Text>
</View>
</Button>
I have a View inside a view. And I'm trying to vertically center the child view.
Below is the sample code:
<View style={globalStyle.text}>
<Text style={[globalStyle.name]}>
{name}
</Text>
<View style={globalStyle.timeContainer}>
<Image style={globalStyle.tinyIcon} source={require('./Thumbnails/time-tiny.png')}/>
<Text style={globalStyle.audio_count}>
{this.state.audioTime[rowID]}
</Text>
</View>
</View>
When there is text alone justifyContent: 'center' works fine to vertically center the child content. However when there is a child View involved it doesn't work. How can I achieve this?
Here is a picture of the same: I'm trying to make the text inside the white box vertically center aligned.