on react native i already wrap the image with tag View. the code is below
<View style={{ flexDirection: 'row', marginTop: 3, alignItems:'center' }}>
<Image source={Images.rank} style={{ width: 20, height: 20 }}></Image>
<Text style={[mainstyle.textGrey, mainstyle.fs14, mainstyle.ml5,]}>
{I18n.t('Rank')}:
<Text onPress={() => this._goto('Rank')}
style={[mainstyle.textRed, mainstyle.fs14, mainstyle.bold,
mainstyle.textUnderline]}>
{this.state.monthRank == '' ?
'-' : this.state.monthRank}
</Text>
</Text>
</View>
how i put the text on the center the container and align center with the image to. as we can see the text slightly up
Related
So I have these Views in react native I am using as cards, and I want to partially change the background of the view based on a %
So for example I would find what % 230 is of 1000 and I would fill the background of the card that % to a different color. Anyone have any suggestions on doing the background color with a % like that? I know I can fill it with border and border width but the issue is that pushes the content out of the way to fill it. I need the content to stay in place but the background color change partially based on the %. I also tried making another View overtop of this one and adding the border and border width and filling the top one, but that covers the content of the bottom one, which doesnt really help either.
Not sure a code snippet is needed for this question but screw it:
<View key={value.title + index} style={{ backgroundColor: 'white', margin: 10, borderRadius: 5, width: '90%', height: 70, alignSelf: 'center', justifyContent: 'center' }}>
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
<View style={{ margin: 15 }}>
<IconX
size={30}
origin={ICON_TYPE.FONT_AWESOME5}
name={'piggy-bank'}
color={'black'}
/>
</View>
<View style={{ flexDirection: 'column', width: 125 }}>
<Text style={{ fontWeight: 'bold' }}>{value.title}</Text>
{value.date && (
<Text>{value.date.toDateString()}</Text>
)}
</View>
<View style={{ flexDirection: 'column', marginLeft: '-5%' }}>
<View style={{ width: 150 }}>
<Text style={{ fontWeight: 'bold', textAlign: 'right', color: '#F36A53' }}> ${value.currentAmount} / ${value.goalAmount}</Text>
</View>
</View>
</View>
</View>
I ended up just adding another card overtop of it and just using a transparent border color so it didnt cover the content, but I am not totally happy with this solution, so am open to any other answers. Thanks.
I'm trying to define a list of elements with the same height, but the result is that the component takes all the available space.
This is the code:
return (
<View style={{flex: 1, flexDirection: 'row', justifyContent: "center"}} key={location.id}>
<Text style={{width: "80%", height: 20}}>{location.name}</Text>
<Button
style={{width: "20%", height: 20}}
title="x"
onPress={() => this.removeLocationFromDevice(location)}
/>
</View>
)
This is the result:
How can I make sure that the button and the text elements have just enough height to display the element and nothing more?
You can set the initial View to flex 1 and wrap the button + text in an other view
return (
<View style={{flex: 1}} key='key'>
<View style={{ flexDirection: 'row', justifyContent: "center"}}>
<Text style={{width: "80%", height: 20}}>text</Text>
<Button
style={{width: "20%", height: 20}}
title="x"
/>
</View>
</View>
);
I need to align the text at center of the profile pic in the same line. But it move below the profile pic.
How can I achieve this?
<TouchableOpacity >
<View style={{flexDirection:'row',marginLeft: "8%", marginBottom:"5%",marginRight:"15%",}}>
<FastImage source={user.profilePicture} style={{width: 45, height: 45, borderRadius: 22.5}}/>
<Text style = {{fontFamily: 'Heebo-Light', fontSize:12, marginLeft:"1.5%",textAlign:'center' }}> { user.firstName } </Text>
</View>
</TouchableOpacity>
I would propose to wrap your text in another View with justifyContent: 'center' and the same height as your userIcon. Additionally, I changed the textAlign to 'left'
Complete Code:
<TouchableOpacity >
<View style={{flexDirection:'row',marginLeft: "8%", marginBottom:"5%",marginRight:"15%",}}>
<Image source={{ uri: 'https://ra.ac.ae/wp-content/uploads/2017/02/user-icon-placeholder.png' }} style={{width: 45, height: 45, borderRadius: 22.5}}/>
// Adding this View
<View style={{justifyContent: 'center', height: 45}}>
// changed textAlign to left
<Text style = {{fontFamily: 'Heebo-Light', fontSize:12, marginLeft:"1.5%",textAlign:'left' }}> Usernamed asdfklshfgkjdhgkjdfhgjk dfhljkghdfjkghfdjkgfhfjk ghsdflkaslödsfsdfdsgdkasälöjda skldjsa </Text>
</View>
</View>
</TouchableOpacity>
Output:
Working Demo:
https://snack.expo.io/#tim1717/vengeful-sandwich
Updated Version
We add another View around the Image component and we are removing the height limitation, so that all of our text is visible and the container increases depending on the text content.
Code:
<TouchableOpacity >
<View style={{flexDirection:'row',marginLeft: "8%", marginBottom:"5%",marginRight:"15%",}}>
<View style={{justifyContent: 'center'}}>
<Image source={{ uri: 'https://ra.ac.ae/wp-content/uploads/2017/02/user-icon-placeholder.png' }} style={{width: 45, height: 45, borderRadius: 22.5}}/>
</View>
<View style={{justifyContent: 'center'}}>
<Text style = {{fontFamily: 'Heebo-Light', fontSize:12, marginLeft:"1.5%",textAlign:'left' }}> Usernamed asdfklshfgkjdhgkjdfhgjk dfhljkghdfjkghfdjkgfhfjk ghsdflkaslödsfsdfdsgdkasälöjda skldjsa dasfsdkhf,jdshfkjdshfkjhdsjkfh TEST ETST fdsfgmd,gndfjghjdfkhg dfkghkjdfhgjkdf gkjdfhgjdf gkjdfhg fdg </Text>
</View>
</View>
</TouchableOpacity>
Output:
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>
Using React-Native I need to centre my Image and component LYDSceneQuestion:
const SplashScreen = () => {
return (
<View style={styles.container}>
<LYDSceneQuestion text="Welcome to" />
<Image source={theme.images.logo} style={styles.logo} />
<NextButton onPress={onNext} />
</View>
);
};
export default SplashScreen;
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center'
},
logo: {
flex: 1,
width: 300,
height: 100,
resizeMode: 'contain'
}
});
Currently my image aligns to the bottom, how I can I centre it vertically?
I will suggest a small technique using flex,give your parent view flex one and then arrange the components in separate child views inside it and give them equal flex just like i have done below.
<View style={styles.container,{flex: 1}}>
<View style={{flex: 2}}>
<LYDSceneQuestion text="Welcome to" />
</View>
<View style={{flex: 2}}>
<Image source={theme.images.logo} style={styles.logo}/>
</View>
<View style={{flex: 2}}>
<NextButton onPress={onNext} />
</View>
</View>
I think if you follow this you can centre it vertically.