I have a simple problem putting just the card to the center of the page. I've already put alignItems: center and justifyContent: center but it still not displaying on the center page.
Check this codesandbox link CLICK HERE
CODE
const useStyles = makeStyles(() => ({
root: {
minWidth: 275,
justifyContent: "center",
alignItems: "center"
},
cardHeader: {
backgroundColor: "blue",
color: "white",
display: "flex",
justifyContent: "center",
alignItems: "center"
}
}));
You can use flex on parent, note that you need to set height so it will center accordingly.
const useStyles = makeStyles(() => ({
root: {
display: "flex",
justifyContent: "center",
alignItems: "center",
height: "100vh"
},
cardHeader: {/*...*/}
}));
Related
I want to put a space between two dash borders, but I don't know how to put it in a styled component.
Is there anyone who can solve my problem?
const LogoBox = styled(Box)(({ theme }) => ({
width: '145px',
height: '145px',
display: 'flex',
borderRadius: '10px',
marginBottom: '24px',
border: '1px dashed',
alignItems: 'center',
flexDirection: 'column',
justifyContent: 'center',
backgroundColor: theme.palette.info.main,
borderColor: theme.palette.primary.main,
}));
<LogoBox>
<Button>
<Plus size={24} />
</Button>
<BoxTitleText>Max 100x100 px</BoxTitleText>
</LogoBox>
I have these balls that I want to join together. They should like stick together.
Code for the orange squares.
style={{
backgroundColor: 'orange',
display: 'flex',
borderRadius: width
}}
Code for the pink area.
bubbleViewWrapper: {
flexWrap: 'wrap',
backgroundColor: 'pink',
},
refer to image below as stack overflow doesn't allow me upload image
what does it look right now
https://ibb.co/T8L56ZF
What I want
https://ibb.co/5R4hLCV
Html structure
<ScrollView
horizontal={true}
contentContainerStyle={Style.contentContainerStyle}
showsHorizontalScrollIndicator={false}
>
<View style={Style.bubbleViewWrapper}>
{/ {BubbleStore.map((item, index) => { /}
{store.map((item, index) => {
More detailed version of Css
contentContainerStyle: {
height: CONTAINER_SIZE,
padding: wp(2),
paddingHorizontal: wp(4),
// backgroundColor: 'yellow'
},
bubbleViewWrapper: {
width: 'auto',
flexWrap: 'wrap',
alignSelf: 'flex-start',
backgroundColor: 'yellow',
},
circle: {
justifyContent: 'center',
alignItems: 'center',
borde
I have tried flex: wrap and some other properties but nothing seems to work.
I would like to create a header for my React Native app. It would have one primary image centered, and then a back button to the left of it (near the edge of the screen). At the moment, I am able to get them in the same row and have the primary image centered, but cannot figure out how to bring the back arrow image to the far left.
This is my code.
<View style={styles.container}>
<View style={styles.row}>
<Image style={styles.backarrow} source={require('./images/backarrow.png')} />
<Image style={styles.minilogo} source={require('./images/minibear.png')} />
</View>
</View>
And this is the style code.
container: {
flex: 1,
backgroundColor: '#5683C7',
alignItems: 'center',
justifyContent: 'center',
},
minilogo: {
height: 100,
width: 100,
},
backarrow: {
height: 50,
width: 40,
},
row: {
flexDirection: 'row',
margin: 15,
alignItems: 'center',
}
Ideally it would look like this
Any help would be greatly appreciated! Thanks.
using border width you can understand adjust your layout
apply this stylesheet
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#5683C7',
alignItems: 'center',
justifyContent: 'center',
flexDirection:"column"
},
minilogo: {
height: 100,
width: 100,
justifyContent:"flex-end",
flex:7,
},
backarrow: {
height: 50,
width: 40,
justifyContent:"flex-start",
alignSelf:"center",
flex:3,
},
row: {
flexDirection: 'row',
width:"100%",
margin: 1,
resizeMode:"stretch",
// backgroundColor:"green",
// borderWidth:1,
alignItems:"stretch",
}
});
In my React Native app, I'm having trouble with making the children the same width as the parent. Please see image below:
I want the black and the green View to take the whole screen width, therefore get rid of the white background caused by the parent.
How can I achieve this? For example, I tried to apply width: 100% to the children, doesn't work. Several solutions like this, this and this don't work here.
Here is the code:
<View style={styles.containerWholePage}>
<View>
<View style={styles.upper}></View>
<View style={styles.lower}></View>
</View>
</View>
const styles = StyleSheet.create({
containerWholePage: {
alignItems: 'center',
},
lower: {
alignItems: 'center',
alignSelf: 'stretch',
backgroundColor: 'green',
flex: 6,
width: '100%', // doesn't work
},
upper: {
alignItems: 'center',
alignSelf: 'stretch',
backgroundColor: 'black',
flex: 3,
width: '100%', // doesn't work
},
});
Do you have an idea what I'm doing wrong?
This work for me as you want.
<View style={styles.containerWholePage}>
{/* <View> */}
<View style={styles.upper}></View>
<View style={styles.lower}></View>
{/* </View> */}
</View>
const styles = StyleSheet.create({
containerWholePage: {
alignItems: 'center',
flex:1,
},
lower: {
alignItems: 'center',
alignSelf: 'stretch',
backgroundColor: 'green',
// height:100,
flex: 6,
width: '100%', // doesn't work
},
upper: {
alignItems: 'center',
alignSelf: 'stretch',
backgroundColor: 'black',
flex: 3,
//height:200,
width: '100%', // doesn't work
},
});
I want to vertically center my text inside a view with an explicit height.
Center text vertically in react-native did not fully answer my question because they don't use explicit height.
When I use
<View style={styles.rightContainer}>
<Text style={styles.label2}>
Centered
</Text>
</View>
rightContainer: {
marginRight: 10,
flex: 1,
flexDirection: 'row',
justifyContent: 'flex-end',
alignItems: 'center',
},
label2: {
height: 40,
backgroundColor: 'green',
textAlignVertical: 'center',
},
If I take away the explicit height,
label2: {
backgroundColor: 'green',
textAlignVertical: 'center',
},
it works.
I need to set the explicit height because I will convert this View to a tappable button.
How do I make this work?
What am I misunderstanding about react-native layout?
It's because the 'textAlignVertical' property is Android-only. Check the documentation on Text.
You could add an extra container wrapping the text:
export default class FlexDirectionBasics extends Component {
render() {
return (
<View style={styles.rightContainer}>
<View style={styles.labelContainer}>
<Text style={styles.label}>Centered</Text>
</View>
</View>
);
}
}
const styles = {
rightContainer: {
marginRight: 10,
flex: 1,
flexDirection: 'row',
justifyContent: 'flex-end',
alignItems: 'center',
},
labelContainer: {
height: 40,
backgroundColor: 'green',
alignItems: 'center',
justifyContent: 'center',
},
label2: {},
};