I'm trying to achieve this design
and so far my output looks like this
I can't figure out how to force the list item to take up the full row width
this is my code:
<View style={styles.list}>
{listData.map(item => {
return (
<Pressable style={styles.option}>
<Text style={styles.optionTxt}>{item.name}</Text>
</Pressable>
);
})}
</View>
const styles = StyleSheet.create({
list: {
width: '85%',
alignSelf: 'center',
flexWrap: 'wrap',
flexDirection: 'row',
justifyContent: 'flex-start',
},
option: {
backgroundColor: COLORS.backgroundText,
borderRadius: 5,
paddingVertical: 10,
marginBottom: 10,
justifyContent: 'center',
alignItems: 'center',
marginEnd: 10,
},
optionTxt: {
textAlign: 'center',
minWidth: '30%',
paddingHorizontal: 13.5,
},
})
finally fixed it , just added flexGrow: 1 to styles.option
Related
I'm trying to create the following layout in my React Native app but haven't been able to get it right. The phone number, address and schedules are currently sitting in the middle of the screen and the "Interactive section" is at the bottom of the screen.
What am I doing wrong here? I'd appreciate some help with this layout. Thank you!
BTW, in the following image, I put the borders to show you what I want to achieve. I actually don't want to see any borders around contact info, schedule or interactive sections. The whole thing should just float on white background.
Here's the code in my component:
<View style={styles.container}>
<View style={styles.title}>
<Text style={styles.titleText}>Global Enterprises</Text>
</View>
<View style={styles.contactInfoSection}>
<View style={styles.phoneNumberSection}>
<View>
<Text>212.555.1234</Text>
</View>
<View>
<Text>1 Global Way</Text>
<Text>New York, NY 12345</Text>
</View>
</View>
<View style={styles.scheduleSection}>
<Text>Mon - Fri 8:30 - 5:30</Text>
<Text>Sat - Sun Closed</Text>
</View>
</View>
<View>
<Text style={styles.interactSection}>Other stuff</Text>
</View>
</View>
Here's my stylesheet for this particular screen:
const styles = StyleSheet.create(
{
contactInfoSection: {
alignContent: 'flex-start',
alignItems: 'flex-start',
alignSelf: 'flex-start',
flex: 2,
flexDirection: 'row',
marginTop: 20
},
container: {
alignContent: 'flex-start',
flex: 1,
flexGrow: 1,
padding: 20
},
interactSection: {
flex: 3
},
locationSection: {
alignItems: 'center',
flex: 1
},
phoneNumberSection: {
alignContent: 'center',
alignItems: 'center',
alignSelf: 'center',
flex: 1
},
scheduleSection: {
alignContent: 'center',
alignItems: 'center',
alignSelf: 'center',
flex: 1
},
title: {
alignItems: 'center',
flex: 1,
marginTop: 5
},
titleText: {
fontSize: 17,
fontWeight: 'bold'
}
}
);
export { styles };
You need to update contactInfoSection and title style. Please amend
This
contactInfoSection: {
alignContent: 'flex-start',
alignItems: 'flex-start',
alignSelf: 'flex-start',
flex: 2,
flexDirection: 'row',
marginTop: 20,
},
title: {
alignItems: 'center',
flex: 1,
marginTop: 5,
},
to this
contactInfoSection: {
flexDirection: 'row',
marginTop: 20,
},
title: {
alignItems: 'center',
marginTop: 5,
},
Good Luck
Have all my styling done for two buttons I am using inside header title to switch back between screens. The iOS implementation works perfect but the elevation style prop for Android is causing some issues. It seems to also pass down the elevation style to the child component which in my case is a TouchableOpacity which makes the button click look a little off. Is there any way to fix this issue? See images for a better idea on click impact...
I have attempted to style the TouchableOpacity to elevation:0 to override the issue with no luck. Just to get the elevation style prop to work I had to set a borderColor: 'transparent'.
static navigationOptions = (navData) => {
return {
headerTitle: (
<View style={styles.titleContainer}>
<TouchableOpacity style={styles.mapTitleButton} onPress={() => { navData.navigation.navigate('Map')}}>
<Text style={[styles.titleFont, style={color: Colors.buttonSelected}]}>MAP</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.listTitleButton}>
<Text style={styles.titleFont}>LIST</Text>
</TouchableOpacity>
</View>
),
headerLeft: (
<View style={styles.headerButtonLeft}>
<HeaderButtons HeaderButtonComponent={CustomHeaderButton}>
<Item title="menu" iconName="ios-menu" onPress={() => {
navData.navigation.toggleDrawer()
}} />
</HeaderButtons>
</View>
),
headerRight: (
<View style={styles.placeholder}></View>
),
}
}
}
const styles = StyleSheet.create({
titleContainer: {
alignItems: 'center',
flexDirection: 'row',
height: '60%',
width: '50%',
justifyContent: 'center',
shadowOffset: { width: 0, height: 0 },
shadowOpacity: 0.7,
shadowRadius: 1,
shadowColor: '#000000',
elevation: 5,
borderColor: 'transparent'
},
mapTitleButton: {
backgroundColor: Colors.buttonUnSelected,
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
listTitleButton: {
backgroundColor: Colors.buttonSelected,
flex:1,
alignItems: 'center',
justifyContent: 'center'
},
titleFont: {
fontFamily: 'sailec',
alignItems: 'center',
justifyContent: 'center',
textAlign: 'center',
padding: 10,
fontSize: 13
},
container: {
alignItems: 'center',
justifyContent: 'center',
flex: 1
}
});
Android Screen Capture
Did you try with: TouchableWithoutFeedback
Rather than putting elevation in the parent container I fixed it by putting it in the styling for the actual TouchableOpacity. Good to also note that for Android I needed to set borderColor: 'transparent' to also get the elevation to render.
So styling as shown below:
titleContainer: {
alignItems: 'center',
flexDirection: 'row',
height: '60%',
width: '50%',
justifyContent: 'center',
shadowOffset: { width: 0, height: 0 },
shadowOpacity: 0.7,
shadowRadius: 1,
shadowColor: '#000000',
},
mapTitleButton: {
backgroundColor: Colors.buttonUnSelected,
flex: 1,
alignItems: 'center',
justifyContent: 'center',
elevation: 5,
borderColor: 'transparent'
},
listTitleButton: {
backgroundColor: Colors.buttonSelected,
flex:1,
alignItems: 'center',
justifyContent: 'center',
elevation: 5,
borderColor: 'transparent'
},
I have a Imagebackground for my parentconatiner, I want to set backgroundColor of one of my childView to red and it should be transparent so that the parent container image is visible
it should be like this
sample image
here is my code
import React, { Component } from 'react';
import { View, Text, Image, StyleSheet } from 'react-native';
import colors from '../styles/colors';
import strings from '../localization/strings';
class Appointments extends Component {
render() {
return (
<View style={styles.Container}>
<View style={{ backgroundColor: 'rgba(52, 0, 0, 0.8)', shadowOpacity: 0.2, padding: 5 }}>
<View style={styles.childContainer}>
<Image style={{ justifyContent: 'flex-start', alignItems: 'flex-start' }} source={require('../assets/calender-Icon.png')}
/>
<View style={styles.dateTextContainer}>
<Text style={styles.childText}>Appointment</Text>
<Text style={[styles.childText, { fontSize: 26 }]}>Oct24, 2018</Text>
<Text style={[styles.childText, { fontSize: 16, fontWeight: 'bold' }]}>10:30 am</Text>
</View>
</View>
</View>
<View style={styles.borderText}>
<View style={{ flexDirection: 'row' }}>
<Image source={require('../assets/add-Icon.png')} />
<Text style={[styles.itemName, { fontSize: 16 }]}>New</Text>
</View>
<View style={{ flexDirection: 'row' }}>
<Image source={require('../assets/seeAll-Icon.png')} />
<Text style={[styles.itemName, { fontSize: 16 }]}>See All</Text>
</View>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
Container: {
backgroundColor: colors.white,
borderRadius: 4,
borderWidth: 1,
borderColor: colors.red
},
childContainer: {
justifyContent: 'space-between',
alignItems: 'flex-start',
margin: 15,
flexDirection: 'row',
},
textStyle: {
fontSize: 16,
color: colors.black,
justifyContent: 'flex-end',
alignItems: 'flex-end',
fontWeight: 'bold'
},
childText: {
color: colors.white,
fontSize: 18,
},
dateTimeContainer: {
flexDirection: 'row',
justifyContent: 'space-between',
marginHorizontal: 10,
alignItems: 'flex-end',
},
dateTextContainer: {
flexDirection: 'column',
marginHorizontal: 10,
justifyContent: 'flex-end',
alignItems: 'flex-end',
},
listItem: {
borderWidth: 1,
borderColor: colors.pureBlue,
alignItems: 'center',
justifyContent: 'center',
marginHorizontal: 5,
paddingVertical: 5,
margin: 30
},
itemName: {
fontSize: 14,
color: colors.black,
margin: 2,
paddingLeft: 4
},
border: {
borderRadius: 4,
borderWidth: 1,
borderColor: colors.light_gray,
marginHorizontal: 20
},
imageText: {
flexDirection: 'column',
margin: 10,
flexWrap: 'wrap',
flex: 1
},
borderText: {
flexDirection: 'row',
justifyContent: 'space-between',
margin: 10
}
});
export default Appointments;
I have tried rgba and opacity but still not working
please help me how to do this
You need to remove the backgroundColor of the Container to allow for transparency to go all the way through to the parent container, otherwise the transparency will only allow to see the white background behind
Container: {
// backgroundColor: colors.white,
...
},
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 have this button
const TestButton = ({ text }) => (
<View
style={{
width: '100%',
marginTop: 10,
padding: 10,
backgroundColor: 'red',
flexDirection: 'row',
justifyContent: 'center',
}}>
<View
style={{
backgroundColor: 'green',
padding: 10,
flexDirection: 'row',
alignItems: 'center',
}}>
<Text numberOfLines={2}>{text}</Text>
</View>
</View>
);
I want the button to be the smallest possible, and centered.
Android
On Android, as you can see it's not really the case. For the 3 case we can clearly see that the button (green) is much larger than it should be and takes all available space.
iOS
On iOS as you can see it seems to work as I expect.
Is this a bug? Are there any workaround to solve this problem on Android?
Here is an Expo snack to reproduce.
Try this
const TestButton = ({ text }) => (
<View
style={{
width: '100%',
marginTop: 10,
padding: 10,
backgroundColor: 'red',
flexDirection: 'row',
justifyContent: 'center',
}}>
<View
style={{
padding: 10,
flexDirection: 'row',
alignItems: 'center',
}}>
<Text numberOfLines={2}
style = {{
backgroundColor: 'green',
padding:10
}}>
{text}
</Text>
</View>
</View>
);
I could solve my issue with wrapping my labels into container:
itemContainer: {
flex: 1,
marginHorizontal: 25,
paddingVertical: 15,
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center"
},
itemView: {
width: "100%"
},
newsTitle: {
fontSize: 20,
color: darkBlue,
paddingRight: 20,
fontFamily: "Helvetica-middle",
borderColor: darkBlue,
borderWidth: 1
},
newsChannel: {
paddingTop: 10,
fontSize: 16,
fontFamily: "Helvetica",
color: darkGrey
},
return (
<TouchableOpacity style={styles.itemContainer}>
<View style={styles.itemView}>
<Text style={styles.newsTitle}>{news.title}</Text>
<Text style={styles.newsChannel}>{newsChannelTitle}</Text>
</View>
<ArrowIcon />
</TouchableOpacity>
);