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
},
Related
The text is sticking to the top. How do we center it vertically
<View style={styles.formContainer}>
<View style={styles.textInputBackground}>
<Text style={styles.textInputLabelText}>Name</Text>
<TextInput style={styles.textInput} />
</View>
<View style={styles.textInputBackground}>
<Text style={styles.textInputLabelText}>Email</Text>
<TextInput style={styles.textInput} />
</View>
</View>
const styles = StyleSheet.create({
formContainer: {
marginTop: 130,
},
textInputBackground: {
marginTop: 12,
backgroundColor: 'rgba(0, 0, 0, 0.08)',
flexDirection: 'row',
height: 46,
marginLeft: 16,
marginRight: 16,
borderRadius: 8,
},
textInputLabelText: {
backgroundColor: 'blue',
color: 'red',
justifyContent: 'center',
alignItems: 'center',
textAlign: 'center',
textAlignVertical: 'center',
flex: 2,
},
textInput: {
flex: 12,
},
})
Hi there I've updated your style. this will center your input
textInputBackground: {
marginTop: 12,
backgroundColor: 'rgba(0, 0, 0, 0.08)',
flexDirection: 'row',
height: 46,
marginLeft: 16,
marginRight: 16,
borderRadius: 8,
alignItems:"center", // **<--- add this line**
},
To make text center change style to this
textInputLabelText: {
backgroundColor: 'blue',
color: 'red',
justifyContent: 'center',
alignSelf: 'center', //just change alignItem to alignSelf
textAlign: 'center',
textAlignVertical: 'center',
flex: 2,
},
The text should look like this
IOS
But on Android it looks like this:
Android
The code for the styling of the text and container is:
text: {
fontFamily: 'Roboto',
fontSize: 40,
width: 250,
height: 40,
textAlignVertical: 'center',
textAlign: 'center',
},
container: {
backgroundColor: '#DDDDDD',
width: 250,
height: 55,
margin: 12.5,
borderRadius: 10,
justifyContent: 'center'
}
and the components:
<TouchableOpacity
style={styles.container}
onPress={_ => this.navigation.push('Join')} >
<Text style={styles.text}>Join</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.container}
onPress={_ => this.navigation.push('Create')} >
<Text style={styles.text}>Create</Text>
</TouchableOpacity>
Replace your styles with this :
text: {
fontFamily: 'Roboto',
fontSize: 40,
textAlignVertical: 'center',
textAlign: 'center',
},
container: {
backgroundColor: '#DDDDDD',
margin: 12.5,
borderRadius: 10,
justifyContent: 'center',
alignSelf: 'center',
width: 250,
},
Change your styles to below -
text: {
fontFamily: 'Roboto',
fontSize: 40,
textAlignVertical: 'center',
textAlign: 'center',
},
container: {
backgroundColor: '#DDDDDD',
width: 250,
minHeight: 55,
margin: 12.5,
borderRadius: 10,
justifyContent: 'center'
alignItems: 'center',
alignSelf: 'center',
}
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 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'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?