For some weird reason I cant get the text in one button to vertically centre in React Native:
<View style={styles.container}>
<TouchableOpacity
style={[styles.button, styles.shareButton]}
>
<View style={styles.shareButtonInner}>
<Text style={[styles.buttonText]}>
Button which wraps
</Text>
</View>
</TouchableOpacity>
<TouchableOpacity
style={[styles.button, styles.goButton]}
>
<Text style={[styles.buttonText, styles.goButtonText]}>
Normal
</Text>
</TouchableOpacity>
</View>
const paddingVertical = 10;
const borderRadius = 8;
const fontSize = 40;
const styles = StyleSheet.create({
container: {
flexDirection: "row",
padding: 20,
},
button: {
borderRadius,
overflow: "hidden",
},
buttonText: {
textTransform: "uppercase",
paddingVertical,
color: "white",
paddingHorizontal: 20,
borderRadius,
fontSize,
textAlign: "center",
},
goButton: {
flex: 1,
backgroundColor: "gold",
justifyContent: "center",
alignItems: "center",
textAlignVertical: "center",
textAlign: "center",
alignContent: "center",
},
goButtonText: {
flex: 1,
flexDirection: "row",
backgroundColor: "blue",
justifyContent: "center",
alignItems: "center",
textAlignVertical: "center",
textAlign: "center",
alignSelf: "center",
alignContent: "center",
},
shareButton: {
flex: 1,
marginRight: 10,
},
shareButtonInner: {
display: "flex",
flex: 1,
flexDirection: "row",
backgroundColor: "#281A47",
justifyContent: "center",
alignItems: "center",
},
});
What's even stranger, when using the web view from Expo (React Native Web under the hood). I can see the Text element is display: block. If I change it to display: flex in the Chrome dev tools then it is centered. I thought all items has display: flex by default?
you can just remove "flex:1"
goButtonText: {
// flex: 1,
flexDirection: "row",
backgroundColor: "blue",
justifyContent: "center",
alignItems: "center",
textAlignVertical: "center",
textAlign: "center",
alignSelf: "center",
alignContent: "center",
},
Related
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
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 am learning react-native, and want a Parent to take up the entire screen dynamically with flex instead of a static height/width value. It works fine with {height:714, width:393}, but when I replace them with flex:1, all the elements shrink to the top of the screen.
Code
Styles:
const styles = StyleSheet.create({
container: {
backgroundColor: 'purple',
padding: 5,
// flex: 1,
height: 714,
width: 393,
},
bigBlackText: {
color: 'black',
fontSize: 18,
},
bigWhiteText: {
color: 'white',
fontSize: 19,
},
col1: {
backgroundColor: 'yellow',
flexDirection: 'row',
flex: 1,
},
col11: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
margin: 5,
backgroundColor: 'orange',
},
col12: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
margin: 5,
backgroundColor: 'orange',
},
col13: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
margin: 5,
backgroundColor: 'orange',
},
col2: {
flex: 1,
backgroundColor: 'red',
},
col21: {
flex: 1,
justifyContent: 'space-around',
alignItems: 'center',
backgroundColor: 'brown',
margin: 5
},
col22: {
flex: 1,
justifyContent: 'space-around',
alignItems: 'center',
backgroundColor: 'brown',
margin: 5
},
col23: {
flex: 1,
justifyContent: 'space-around',
alignItems: 'center',
backgroundColor: 'brown',
margin: 5
},
col3: {
flex: 1,
backgroundColor: 'cyan',
flexDirection: 'column',
},
col31: {
flexDirection: 'row',
flex: 1,
},
col31r1: {
flex: 1,
justifyContent: 'space-around',
alignItems: 'center',
backgroundColor: 'green',
margin: 5,
},
col31r2: {
flex: 1,
justifyContent: 'space-around',
alignItems: 'center',
backgroundColor: 'green',
margin: 5,
},
col32: {
flexDirection: 'row',
flex: 1,
},
col32r1: {
flex: 1,
justifyContent: 'space-around',
alignItems: 'center',
backgroundColor: 'green',
margin: 5,
},
col32r2: {
flex: 1,
justifyContent: 'space-around',
alignItems: 'center',
backgroundColor: 'green',
margin: 5,
},
});
Expected Output
Actual Output
I find no problem exists.Do not use justifycontent or alignitems props in container stylesheet.
try to set width and height
mainView: {
width: "100%",
height: "100%"
}
or,
mainView: {
width: deviceWidht,
height: deviceHeight
}
I hope this works.
import React from 'react';
import { View, StyleSheet, Text } from 'react-native';
export default class ViewDemo extends React.Component {
render() {
return (
<View style={styles.container}>
<View style={{ flex: 1, backgroundColor: 'yellow', flexDirection: 'row', justifyContent: 'space-around' ,flexWrap: 'wrap'}}>
<View style={styles.h1}></View>
<View style={styles.h1}></View>
<View style={styles.h1}></View>
</View>
<View style={{ flex: 1, backgroundColor: 'red', flexDirection: 'column', justifyContent: 'space-around' }}>
<View style={styles.h2}></View>
<View style={styles.h2}></View>
<View style={styles.h2}></View>
</View>
<View style={{ flex: 1, alignItem:'center' , backgroundColor: '#3CAEA3', flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'space-around' }}>
<View style={styles.h3}></View>
<View style={styles.h3}></View>
<View style={styles.h3}></View>
<View style={styles.h3}></View>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
h1: {
backgroundColor: '#f79c1d',
width: 100,
justifyContent : 'space-around',
margin: 10
},
h2: {
backgroundColor: '#9c2c2c',
height: 50,
justifyContent: 'space-around',
margin: 10
},
h3: {
backgroundColor: '#616f39',
height: 90,
width: 180,
margin: 10
},
});
you can directly use this code
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 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"