I'm currently using react native and tailwind to build out this view:
However, the issue is that if the text is too long it starts to look a bit weird. I'm using tailwind and cannot figure out how to make this look better where the images are aligned next to each other.
Here's the current code:
<View style={tw.style('mt-4 flex flex-row mx-4 justify-center items-center')}>
<ScrollView horizontal>
{
data.map((groups) => {
return (
<View
style={tw.style('flex flex-col justify-center items-center mx-2')}
key={groups.id}>
<View style={tw.style('w-20 h-20')}>
<FastImage
style={tw.style('w-full h-20 rounded-full')}
source={{
uri:
groups.cover_image
}}
/>
</View>
<Text style={tw.style('mt-2 text-gray-900 text-sm text-center max-w-20')}>
{groups.title}
</Text>
</View>
);
})}
</ScrollView>
</View>
Any ideas would be appreciated!
Related
I am trying to create a dynamic image list where I can change the number of images that are being displayed, where the images have to occupy the max space in the component without change the image ratio and also without make the component scrollable. The following images show the result that is expected:
Although what really happens now is, in the first case, with only 2 images, it overflows the parent component due to the spacing added between the flexbox elements.
For the 6 images example, it goes worst:
It overflows the parent even more because it ignores the component's max height and always tries to occupy the max width possible.
To reach the correct behaviour, I'm hard coding the flex-basis of the image list for each case because it is a flex item, and only that way does it not grow more than it should. Although, that is not desirable because I want to make the images grow as much as possible without depending on the screen size.
I do not understand why they ignore the parent's max height.
I do not understand why they do ignore the max height of the parent.
Main component:
<>
<Grid
container
direction="column"
wrap="nowrap"
rowSpacing={1}
sx={{ alignSelf: 'flex-end', margin: 0, height: '100%', justifyContent: 'flex-end' }}
>
<Grid
container
wrap="nowrap"
item
sx={{
alignSelf: 'flex-start',
flex: '1 0 auto',
justifyContent: 'space-between',
alignItems: 'center',
}}
>
<CustomImageList ref={ref} />
</Grid>
<Grid item>
<CustomPagination onClick={keyMap.move} />
</Grid>
<Grid width="100%" item>
<Stack
spacing={1}
direction="row"
sx={{
overflowX: 'auto',
justifyContent: 'space-between',
'& .MuiFormControl-root': { marginTop: '1px' },
}}
divider={<Divider orientation="vertical" flexItem />}
>
{Buttons.map((button) => (
<Stack spacing={1} flex={1} key={button.buttonId}>
<Stack direction="row" spacing={1}>
{button.text ? (
<ButtonText button={button} />
) : (
<Button />
)}
</Stack>
<Stack spacing={1} direction="row">
<ButtonBox button={button} />
</Stack>
</Stack>
))}
</Stack>
</Grid>
</Grid>
</>
The component CustomImageList is sketch like the next code:
<>
<Stack justifyContent="center">
<IconButton
ref={leftArrowRef}
size="large"
onClick={(e) => {
e.preventDefault();
handleClick({
key: 'ArrowLeft',
keyCode: 37,
});
}}
>
<ArrowBackIosNewIcon />
</IconButton>
</Stack>
<ImageList
sx={{
height: '100%',
alignContent: 'center'
}}
cols={imageColumnCount}
>
{images.map((image, index) =>
createOrdinaryListItem(image, index)
)}
</ImageList>
<Stack justifyContent="center">
<IconButton
onClick={(e) => {
e.preventDefault();
handleClick({
key: 'ArrowRight',
keyCode: 39,
});
}}
ref={rightArrowRef}
size="large"
>
<ArrowForwardIosIcon />
</IconButton>
</Stack>
</>
The ImageList component is a MUI ImageList
What would be the best approach to create the scenario shown in the first and second figures? I have already tried to create my component. It was a flexbox where I used the breakpoint from the grid to distribute the columns across the images. I had the same behaviour that I presented here.
Sorry about the verbose post and kinda "hard to understand" question, but I was not capable of creating a runnable script to show what is aforementioned
I want to bring these grid items to the same height, but not to stretch them.
This is what it looks like:
This is how I want it:
But I can only do that by manually setting the image width therefore it's not responsive. The users are able to replace this image so setting fixed dimensions is not an option. Any help is appreciated. Here is the minimum code needed to reproduce (I have removed the content within the card to keep the code minimal):
Note: I have used material-ui v4
<Grid container spacing={3}>
<Grid item lg={12} md={12} sm={12} xs={12}>
<Grid container spacing={3} className="mb-3">
<Grid item xs={12} md={3}>
<Card
className="justify-between items-center p-sm-24 bg-paper dashboard-card"
elevation={6}
>
</Card>
</Grid>
<Grid item xs={12} md={3}>
<Card
className="justify-between items-center p-sm-24 bg-paper dashboard-card"
elevation={6}
>
</Card>
</Grid>
<Grid item xs={12} md={6}>
<Card className="bg-paper" elevation={6}>
<CardContent className="flex justify-center">
<img
src={this.state.logo}
alt="logo"
style={{ width: "100%" }}
/>
</CardContent>
</Card>
</Grid>
</Grid>
</Grid>
</Grid>
I'm not sure if this is the best way but it worked for me. So I'm answering my own question.
Instead of using an image tag, I used the CardMedia component which allows to set the height to match the other cards and it is also responsive.
you might want to display a video or a responsive image. Use the component prop for these use cases
<CardMedia
component="img"
alt="green iguana"
height="140"
image="/static/images/cards/contemplative-reptile.jpg"
/>
More info: https://mui.com/components/cards/#media
I make a react material ui AppBar.
There is a logo and tabs.
The tabs should be in the center of the AppBar and the logo on the left.
But I can't make the logo go to the left.
How can I make it to go the left?
I am using mui's Grid system but if there is better solution doesn't matter.
Here is a live example https://codesandbox.io/embed/delicate-feather-mmf3k
const Header = () => {
const classes = useStyles();
const [value, setValue] = React.useState(0);
return (
<nav className={classes.root}>
<AppBar position="static" color="default">
<Toolbar style={{ alignItems: "center", justifyContent: "center" }}>
<Grid justify={"center"} alignItems={"center"} container>
<Grid style={{ justifySelf: "flex-start" }} item>
<img
className={classes.logo}
src={
"https://upload.wikimedia.org/wikipedia/commons/a/a7/React-icon.svg"
}
alt="Logo"
/>
</Grid>
<Grid item>
<Grid container justify={"center"}>
<Tabs
onChange={(e, v) => setValue(v)}
value={value}
aria-label="Navigation Tabs"
>
<Tab label={"page 1"} />
<Tab label={"page 2"} />
</Tabs>
</Grid>
</Grid>
</Grid>
</Toolbar>
</AppBar>
</nav>
);
};
In this case both the Logo and Tabs are in the center.
I tired to style justifySelf, alignSelf to flex-start on the logo to no avail.
Adding xs to the second Grid item, makes the logo to go to left but the Tabs are not exactly in the center in this case.
The solution I came up with is to add empty 3rd Grid item.
Justify 'space-between' on the Grid container.
Give xs={1} to the first Grid item, in which is the logo.
Give xs={4} to the tabs Grid item.
Give xs={1} to the third Grid item.
const Header = () => {
const classes = useStyles();
const [value, setValue] = React.useState(0);
return (
<nav className={classes.root}>
<AppBar position="static" color="default">
<Toolbar>
<Grid justify={"space-between"} container>
<Grid xs={1} item>
<img
className={classes.logo}
src={
"https://upload.wikimedia.org/wikipedia/commons/a/a7/React-icon.svg"
}
alt="Logo"
/>
</Grid>
<Grid xs={4} item>
<Grid container justify={"center"}>
<Tabs
onChange={(e, v) => setValue(v)}
value={value}
aria-label="Navigation Tabs"
>
<Tab label={"page 1"} />
<Tab label={"page 2"} />
</Tabs>
</Grid>
</Grid>
<Grid item xs={1} />
</Grid>
</Toolbar>
</AppBar>
</nav>
);
};
Working demo: https://codesandbox.io/s/great-cloud-zwghk
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 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>