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,
},
Related
I'm having an issue where my container is collapsing on my child components which consists of a list of 4 images and one icon at the end of the container in a row. If I set the height explicitly then I can make it large enough to fit the content for one device. However, I have the images resizing themselves right now based off of width of the phone and a percent and then scaling to conserve aspect ratio. Is there a way to make my container grow just large enough to ensure it fits its child components when its child components scale based off of device width?
I thought that React Native flex default was to do this but for whatever reason my container is not fitting the images inside it but instead shrinking and all inside content is shrinking down except the images which lay over the top of my now shrunk containers.
export default function BadgeQuickView() {
return (
<View style={styles.badgeViewContainer}>
<View style={styles.badgeContainerTop}>
<View style={styles.badgeContainerLeftBorder}></View>
<Text style={styles.badgeContainerTitle}>FEATURED BADGES</Text>
<View style={styles.badgeContainerRightBorder}></View>
</View>
<View style={styles.quickBadgeList}>
{TEST_BADGE_ARRAY.map(option => (
<View style={styles.badgeInfoContainer} key={option.id}>
<Image style={styles.badgeImage} source={{uri: option.url}} fadeDuration={0} />
<Text style={styles.badgeDescText}>{option.name}</Text>
</View>
))}
<View style={styles.moreBadgesButtonContainer}>
<TouchableOpacity style={styles.moreBadgesButton}>
<Text style={styles.moreBadgesText}>All {`\n`} Badges</Text>
<Entypo name={'dots-three-horizontal'} size={moderateScale(20)} color={profileColors.editProfileText}/>
</TouchableOpacity>
</View>
</View>
</View>
);
}
const styles = StyleSheet.create({
badgeViewContainer: {
width: '100%',
height: moderateScale(130),
borderStyle: 'solid',
borderColor: userInterface.borderColor,
borderBottomWidth: 2,
backgroundColor: 'white',
paddingBottom: 5
},
moreBadgesText: {
color: 'black',
fontFamily: 'montserrat',
fontSize: moderateScale(8),
textAlign: 'center',
color: profileColors.editProfileText,
textAlign: 'center',
},
badgeDescText: {
color: 'black',
fontFamily: 'montserrat',
fontSize: moderateScale(8),
textAlign: 'center',
color: profileColors.editProfileText,
textAlign: 'center',
},
quickBadgeList: {
flex: 1,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-around',
paddingLeft: 15,
},
badgeImage: {
aspectRatio: 1,
width: '100%',
height: undefined,
resizeMode: 'contain',
marginBottom: 10,
},
moreBadgesButton: {
height: '100%',
width: '100%',
alignItems: 'center',
justifyContent: 'center',
textAlign: 'center'
},
moreBadgesButtonContainer: {
height: '100%',
width: '15%',
},
badgeInfoContainer: {
height: '100%',
width: '20%',
flexDirection: 'column',
padding: 5,
},
badgeContainerTop: {
flexDirection: 'row',
alignItems: 'center',
},
badgeContainerLeftBorder: {
borderStyle: 'solid',
borderColor: userInterface.borderColor,
borderTopWidth: 2,
width: '5%',
bottom: moderateScale(13) / 2,
},
badgeContainerTitle: {
fontFamily: 'montserrat-bold',
color: profileColors.editProfileText,
marginHorizontal: 10,
fontSize: moderateScale(13),
bottom: moderateScale(13) /2,
},
badgeContainerRightBorder: {
borderStyle: 'solid',
borderColor: userInterface.borderColor,
borderTopWidth: 2,
width: '100%',
bottom: moderateScale(13) / 2,
},
});
** Edit: Added current working code for reference. moderateScale(...) is just taking the screenHeight and scaling the height and working for most devices that I have tested thus far. I would like to not have to set this explicitly though if possible and instead have it expand based on its content.
Below is the desired and undesired looks. When I comment out the height: from the view container and set it to flex it won't expand to fit its content. When real images are added in the images show over the top of the bottom border and the text is not visible at all that will show under the red box typically. Added the red just as an indicator of where the image and text renders.
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 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?
I want to make a button as the below.
Please help me.
Here are two ways to do it:
This one uses skewX:
<View style={{
width: 200,
height: 50,
borderWidth: 4,
borderColor: 'black',
// Uncomment this to see how it looks unclipped
overflow: 'hidden',
borderRadius: 10,
backgroundColor: 'white',
position: 'relative',
// These are to center the text
alignItems: 'center',
justifyContent: 'center',
}}>
<View style={{
width: 120,
height: 70,
position: 'absolute',
// These offsets were required because the transform
// would move them off the edges
right: -10,
top: -10,
backgroundColor: 'yellow',
borderLeftWidth: 5,
borderLeftColor: 'black',
transform: [{
skewX: '-45deg',
}]
}} />
<Text style={{
backgroundColor: 'transparent',
fontSize: 20,
}}>Hello World</Text>
</View>
And here's the other way using rotateX:
<View style={{
width: 200,
height: 50,
borderWidth: 4,
borderColor: 'black',
// Uncomment this to see how it looks unclipped
overflow: 'hidden',
borderRadius: 10,
backgroundColor: 'white',
position: 'relative',
// These are to center the text
alignItems: 'center',
justifyContent: 'center',
}}>
<View style={{
width: 100,
height: 150,
position: 'absolute',
// These offsets were required because the transform
// would move them off the edges
right: 10,
top: -30,
backgroundColor: 'yellow',
borderLeftWidth: 4,
borderLeftColor: 'black',
transform: [{
rotate: '45deg',
}]
}} />
<Text style={{
backgroundColor: 'transparent',
fontSize: 20,
}}>Hello World</Text>
</View>
I prefer the rotation method because the skew will mess with the border width of the diagonal line.