I'm trying to create a simple content-sized dialog box in React Native. Highest in this hierarchy I have my overlay <View> styled so:
{
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
zIndex: 100,
backgroundColor: COLOR
}
Within this, I have a wrapper <View> with this style:
{
flex: 1,
alignItems: 'center',
justifyContent: 'center'
}
Then I have the dialog <View>:
{
flex: 1,
width: '86%',
maxWidth: 450,
flexDirection: 'column',
justifyContent: 'flex-start',
alignItems: 'flex-start',
backgroundColor: 'white',
borderWidth: 5,
borderColor: 'gold'
}
It looks like the problem, though, lies in the way I'm building the dialog:
<View style={{flex: 1, flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'flex-start'}}>
<Image source={require('../../assets/icons/warning.png')}
style={{resizeMode: 'contain', height: 50, width: 48, marginRight: 30}} />
<View style={[flex: 1, flexDirection: 'column', justifyContent: 'flex-start', alignItems: 'flex-start']}>
<Text>{this.props.dialogMessage}</Text>
<View style={{flex: 1, width: '100%', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'flex-start'}}>
<Button dismissOverlay={this.props.dismissOverlay} />
</View>
</View>
</View>
With this styling I get this result:
If I change flex to 0, I get this instead:
How can I get the dialog to size to the content?
In your Dialog <View> don't set flex at all. Have it like this
{
width: '86%',
maxWidth: 450,
flexDirection: 'column',
justifyContent: 'flex-start',
alignItems: 'flex-start',
backgroundColor: 'white',
borderWidth: 5,
borderColor: 'gold'
}
If it does not work, could you provide more code on the content inside of your Dialog view?
Related
I am trying to put my icon on the right side of the header. How do I do it? I am pretty new to react-native layout
I have tried alignSelf: 'flex-end' and right: 0, none of them will work.
<View style={Style.addModalContainer}>
<View style={Style.addModalHeader}>
<TouchableOpacity style={Style.addModalBackButton} hitSlop={{top: 10, bottom: 10, left: 10, right: 10}} onPress={() => this.openAddAvailabilityModal(false)}>
<Ionicons name="ios-arrow-back" size={24} />
</TouchableOpacity>
</View>
</View>
addModalContainer: {
height: '90%',
width: '95%',
backgroundColor: 'white',
alignSelf: 'center',
borderColor: '#FFFFFF',
borderWidth: StyleSheet.hairlineWidth,
borderRadius: 5,
},
addModalHeader: {
flexDirection: 'row',
width: '100%',
height: 50,
alignItems: 'center',
borderBottomColor: '#DDDDDD',
borderBottomWidth: StyleSheet.hairlineWidth,
},
addModalBackButton: {
alignSelf: 'flex-end',
right: 0,
},
I want the icon to be aligned on the right
instead of using:
addModalBackButton: {
alignSelf: 'flex-end',
right: 0,
},
Change flexDirection of 'addModalHeader' to 'row-reverse'
addModalHeader: {
flexDirection: 'row-reverse',
I know that you asked the question long ago, but maybe there are those who have similar problems :) You thought well and bottom properties must work. But I made a small change.
alignSelf: 'flex-end',
right: 0,
you will set this properties inside addModalContainer.
addModalContainer: {
height: '90%',
width: '95%',
backgroundColor: 'white',
alignSelf: 'center',
borderColor: '#FFFFFF',
borderWidth: StyleSheet.hairlineWidth,
borderRadius: 5,
alignSelf: 'flex-end',
right: 0,
},
I set two half oval buttons and try to set the position on center.
But I found they don't stick together, I try to change justifyContent: 'space-between' or 'space-around' is not working.
How to let Left button and Right button stick together ?
Here is my code:
return (
<View style={{ justifyContent: 'center', marginTop: 50, flexDirection: 'row', backgroundColor: 'blue' }}>
<TouchableOpacity style={[styles.buttonStyle, { width: 150, height: 50, borderBottomLeftRadius: 50, borderBottomRightRadius: 0, borderTopLeftRadius: 50, borderTopRightRadius: 0 }]}>
<Text>Left</Text>
</TouchableOpacity>
<TouchableOpacity style={[styles.buttonStyle, { backgroundColor: 'orange', width: 150, height: 50, borderBottomLeftRadius: 0, borderBottomRightRadius: 50, borderTopLeftRadius: 0, borderTopRightRadius: 50 }]}>
<Text>Right</Text>
</TouchableOpacity>
</View>
);
const styles = StyleSheet.create({
buttonStyle: {
alignSelf: 'stretch',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'pink',
borderWidth: 1,
borderColor: 'transparent',
marginLeft: 5,
marginRight: 5
},
});
remove margins,
buttonStyle: {
alignSelf: 'stretch',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'pink',
borderWidth: 1,
borderColor: 'transparent',
marginLeft: 5,//this
marginRight: 5// this
},
I am using react-native-elements. I am having difficulty in layout system of react-native.
<View style={styles.container}>
{canAccessCamera ? (
<Card style={styles.userInfo}>
<Avatar medium source={Logo} rounded />
<Text>Username</Text>
</Card>
) : (
<Text>Give me access to camera</Text>
)}
</View>
Style:
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'stretch',
justifyContent: 'flex-start',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
},
userInfo: {
display: 'flex',
flex: 1,
flexDirection: 'column',
alignItems: 'stretch',
justifyContent: 'flex-start',
},
});
I want items inside Card located by column not by row.
This is my result:
I want that Username stay in the right of the Avatar.
Change just this style
userInfo: {
display: "flex",
alignItems: "center",
flexDirection: "row",
justifyContent: "flex-start"
},
container:{
flex: 1,
alignItems: "stretch",
justifyContent: "flex-start",
paddingTop: 5,
backgroundColor: "#ecf0f1",
alignItems: "center"
I use a ScrollView and I am not able to center an icon in one of inner Views.
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
<ScrollView>
...
<View style={styles.detailRowContainer}>
<View style={{flex: 1}}>
<Text style={styles.label} numberOfLines={1}>
{'Phone Number'}
</Text>
<Text style={styles.value} numberOfLines={1}>
{phone}
</Text>
</View>
<View style={styles.round}>
<TouchableWithoutFeedback onPress={this._onPressPhone}>
<Icon size={22} name="phone" />
</TouchableWithoutFeedback>
</View>
</View>;
...
</ScrollView>
detailRowContainer: {
flexDirection: 'row',
justifyContent: 'center',
flex: 1,
marginTop: 10,
paddingBottom: 10,
borderBottomWidth: 1,
borderBottomColor: Colors.lightGray,
},
label: {
color: Colors.glofoxDark,
marginBottom: 3,
},
value: {
color: Colors.glofoxDark,
fontWeight: '800',
borderBottomWidth: 1,
borderBottomColor: Colors.lightGray,
},
round: {
backgroundColor: Colors.lightBlue,
width: 30,
height: 30,
borderRadius: 30,
overflow: 'hidden',
justifyContent: 'center',
alignItems: 'flex-end',
flexDirection: 'row',
padding: 4,
},
The styles need to be modified in this way.
Right now you're doing
flexDirection: row along justifyContent: center. Since your first child element is taking complete parent flex, therefore it does not show its effect
paddingBottom is given but , for centering an equivalent paddingTop must be given
padding for the round style should be replaced with margin, otherwise it affects the position of the inner elements
alignItems in round , must not be flex-end, it should be replaced with center
Here are the styles that will fix the vertical centering
detailRowContainer: {
flexDirection: 'row',
alignItems: 'center',
flex: 1,
marginTop: 10,
paddingTop: 10,
paddingBottom: 10,
borderBottomWidth: 1,
borderBottomColor: Colors.lightGray,
},
round: {
backgroundColor: Colors.lightBlue,
width: 30,
height: 30,
borderRadius: 30,
overflow: 'hidden',
justifyContent: 'center',
alignItems: 'center',
margin: 4
},
I've been trying to get an image to fill up the space it should fill with flex. However, it only fills up to a certain portion of the space. The structure is as follows:
mainWrapper
navBarWrapper
image
buttonWrapper
mainWrapper is a View with flex: 1 so it covers the entire page.
navBarWrapper has a flex: 1
image has a flex: 7 and backgroundColor: 'pink' to see where it ends
buttonWrapper has a flex: 2.5 and backgroundColor: 'lightgrey' to see where it ends
In the screenshot, the image itself doesn't fill up the pink space entirely.
Screenshot
My simplified code is here:
<View style={styles.mainWrapper}>
<View style={styles.navBarWrapper}>
<NavigationBar
statusBar={this.statusBarConfig()}
leftButton={this.leftButtonConfig()}
title={this.titleConfig()}
style={styles.navBar}>
</NavigationBar>
</View>
<View style={styles.imageWrapper}>
<Image source={require('../assets/images/user_screen/user_screen_background.png')} style={styles.image}>
</Image>
</View>
<View style={styles.buttonWrapper}>
</View>
</View>
And the stylesheet
mainWrapper:{
flex: 1,
flexDirection: 'column',
justifyContent: 'flex-start',
backgroundColor: 'white'
},
navBarWrapper:{
flex: 1,
},
navBar:{
flexDirection: 'row',
alignItems: 'center',
backgroundColor: "#1ca99e",
},
imageWrapper:{
flex: 7,
flexDirection: 'column',
backgroundColor: 'pink',
},
image:{
flex:1 ,
height: null,
width: null,
resizeMode: 'cover'
},
buttonWrapper:{
flex: 2.5,
flexDirection: 'row',
backgroundColor: 'lightgrey'
}
Give subcontainers flex values with respect to wrapping container. Since by default flexDirection is column when you give flex 1 outer container it will take up full height of the screen.
Assuming you need top 10% for navbar, bottom button container 25% of screen height, that gives us 65% of height for the imageWrapper.
mainWrapper:{
flex: 1,
flexDirection: 'column',
justifyContent: 'flex-start',
backgroundColor: 'white'
},
navBarWrapper:{
flex: 0.1,
},
navBar:{
flexDirection: 'row',
alignItems: 'center',
backgroundColor: "#1ca99e",
},
imageWrapper:{
flex: 0.65,
flexDirection: 'column',
backgroundColor: 'pink',
},
image:{
flex:1 ,
height: null,
width: null,
resizeMode: 'cover'
},
buttonWrapper:{
flex: 0.25,
flexDirection: 'row',
backgroundColor: 'lightgrey'
}