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>
Related
I want my text and button at the top of the screen, but both the elements have a few gaps between, so I added marginBottom to my text and then that text went to the top. But I want that button to be at the top so I added marginBottom to the button too, but now it's not going to the top.
How can I position it to the top? Where is the style issue coming from? Please, explain my mistake as well.
import { StyleSheet, Text, View, Button } from 'react-native';
export default function App() {
return (
<View style={styles.container}>
<Text style={{ margin: 16, marginBottom: '80%', backgroundColor: 'black' }}>Hello World</Text>
<View style={{ marginBottom: '80%' }}>
<Button title='Click me' />
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
You're using alignItems: 'center' and justifyContent: 'center'.
These two properties combined make the contents of container be positioned in the center. alignItems:center vertically centers the contents, and justifyContent:center horizontally centers the contents.
Since Text is the upper child element, giving it a marginBottom will space it out from the View element containing the Button. If you compare your screen with and without that marginBottom on the Text you'll notice that the button also moves slightly to the bottom if you include the marginBottom on the Text.
So in short, your code is doing exactly what you tell it to do: container tries to position all children to its center.
To fix this, you might want to remove the container:{ alignItems:'center', } property. This will most likely push all your elements to the top of the container. After that you might simply use marginTop on your Text element to push the contents down.
Change both marginBottom %80 to "auto".
return (
<View style={styles.container}>
<Text
style={{ margin: 16, marginBottom: "auto", backgroundColor: "white" }}
>
Hello World
</Text>
<View style={{ marginBottom: "auto" }}>
<Button title="Click me" />
</View>
</View>
);
I think because I am using p tag.
<DialogContent>
<Grid
style={{ marginTop: "8px" }}
container
spacing={0}
></Grid>
<p>
{this.state.eulaEncText ? this.state.eulaEncText : null}
</p>
</DialogContent>
here I am not able to see the lines and tabs as in the original text.
You can achieve this using css using the white-space attribute with the value pre-wrap on the p tag as follow:
<DialogContent>
<Grid
style={{ marginTop: "8px" }}
container
spacing={0}
></Grid>
<p style={{ whiteSpace: "pre-wrap" }}>
{this.state.eulaEncText ? this.state.eulaEncText : null}
</p>
</DialogContent>
According to the documentation, the value pre-wrap does the following:
Sequences of white space are preserved. Lines are broken at newline characters, at , and as necessary to fill line boxes.
I'm using materialUI in my React 16.10 application. I have two buttons in a Box.
<Box
style={{
marginTop: "3rem",
marginLeft: "1rem",
display: "flex",
justifyContent: "center",
spacing: 1,
}}
>
<Button onClick={handleSave} variant="contained" color="primary">
SAVE
</Button>
<Button
onClick={toDetailsView}
startIcon={<CancelIcon />}
variant="contained"
color="primary"
>
CANCEL
</Button>
</Box>
Even though I'm using "spacing: 1", the buttons appear right next to each other so it is impossible to distinguish where one ends and the next begins ...
How do I add style so that there is a little bit of space in between the buttons?
Looking for easy fix ?
margin: 1rem;
I'm trying to align the label and the radio button inside a FormControlLabel component so that the label consumes the same width regardless of the text inside of it. Here's what it currently looks like:
Here's the code I have:
<RadioGroup row>
<FormControl>
<FormControlLabel
value={first_column_day}
control={
<Radio
value={first_column_day}
/>
}
label={<Typography variant={"subtitle2"}>{first_column_day}</Typography>}
labelPlacement="start"
/>
</FormControl>
<FormControl>
<FormControlLabel
value={second_column_day}
control={
<Radio
value={second_column_day}
/>
}
label={<Typography variant={"subtitle2"}>{second_column_day}</Typography>}
labelPlacement="start"
/>
</FormControl>
</RadioGroup>
I tried adding justifyContent for FormControl:
<FormControl style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between' }}>
I also tried wrapping Typography in a div:
<div><Typography variant={"subtitle2"}>{first_column_day}</Typography></div>
But those didn't work. So far the only thing that worked is adding a fixed width to the Typography like so:
<Typography style={{ width: 75 }} variant={"subtitle2"}>{first_column_day}</Typography>
But I don't really like doing that because it's not responsive. Setting the width to 100% doesn't work either.
You can add min-width to FormControlLabel component if you need alignment like below without losing responsiveness -
Working Sandbox here - https://codesandbox.io/s/material-demo-3u8i2?file=/demo.js
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>