I am unable to center a Text component in a View component in React Native both on android as well as ios.
As you can see the + sign in not centred in the white circle.
This is my component:
<TouchableOpacity
style={styles.blueButton}
>
<View style={styles.addButton}>
<Text style={styles.plus}>+</Text>
</View>
</TouchableOpacity>
This is my stylesheet:
blueButton: {
height: 40,
width: 40,
borderRadius: 3,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#3498DB',
},
addButton: {
width: 15,
height: 15,
borderRadius: 30,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'white',
},
plus: {
color: '#3498DB',
fontSize: 20,
},
Can you try my below code:
Compnent code:
<View style={styles.addButtonBlue}>
<View style={styles.addButton}>
<Text style={styles.plus}>+</Text>
</View>
</View>
Stylesheet Code
addButtonBlue: {
width: 70,
height: 70,
borderRadius: 10,
justifyContent: 'center',
alignContent: 'center',
alignItems: 'center',
backgroundColor: '#3498db',
},
addButton: {
width: 30,
height: 30,
borderRadius: 30,
justifyContent: 'center',
alignContent: 'center',
alignItems: 'center',
backgroundColor: '#fff',
},
plus: {
color: '#3498DB',
},
The extra font padding in android might be the culprit here. Try adding includeFontPadding: false to the text style.
more info here - https://facebook.github.io/react-native/docs/text#style
includeFontPadding: bool (Android)
Set to false to remove extra font padding intended to make space for
certain ascenders / descenders. With some fonts, this padding can make
text look slightly misaligned when centered vertically. For best
results also set textAlignVertical to center. Default is true.
Related
I am working on a react native coffee app and trying to create the lay out where I have
the header
the scrollable container holding my coffee
a footer with a text input
a '+' icon to add the coffees to the container
Currently the flex value of my main 'View' is causing my entire app to push to the top of the screen and i have no idea why. I can set the height and width to 100% without flex and i can fill the screen but then i cannot configure my footer properly (+ i know this is bad practice..)
What am i doing wrong with my styles?
const Main = () => {
return(
<View style={styles.container}>
<View style={styles.header}>
<Text style={styles.headerText}> List of Coffee </Text>
</View>
<ScrollView styles={styles.scrollContainer}>
</ScrollView>
<View styles={styles.footer}>
<TextInput
styles={styles.textInput}
placeholder="add your latest coffee here"
placeholderTextColor="#EEE">
</TextInput>
</View>
<TouchableOpacity style={styles.addButton}>
<Text style={styles.addButtonText}>+</Text>
</TouchableOpacity>
</View>
);};
const styles = StyleSheet.create({
container: {
flex:1,
flexDirection:"column",
backgroundColor: 'grey',
},
footer: {
position: 'absolute',
bottom: 10,
left: 10,
right: 10,
backgroundColor: 'white',
zIndex: 9,
},
header: {
backgroundColor: 'black',
alignItems: 'center',
justifyContent: 'center',
borderBottomWidth: 10,
borderBottomColor: 'yellow' ,
paddingTop: 20,
},
headerText: {
color: 'white',
fontSize: 36,
padding: 26,
fontWeight: "500",
fontFamily: 'Helvetica',
},
scrollContainer:{
marginBottom: 100,
},
textInput: {
alignSelf: 'stretch',
color: 'black',
padding:20,
backgroundColor: 'black',
borderTopWidth: 2,
borderTopColor: 'black',
fontSize: 32,
},
addButton: {
position: 'absolute',
zIndex: 11,
right: 20,
bottom: 100,
backgroundColor: 'black',
width: 80,
height: 80,
borderRadius: 50,
justifyContent: 'center',
alignItems: 'center',
} ,
addButtonText:{
color: '#FFD700',
fontSize: 36,
fontWeight: '700',
},
});
export default Main;
Hi I'm building an app for IOS and Android with react Native, and I'm a newbie this is my first app, and I think I'm not too bad, but I have a UI that is only a supermarket list, but I have the head ready but I need place the below the image , I made a new View but it comes out in the middle of the screen. Can you explain to me why it is not shown where to go, thanks.
Can you explain to me why? Thanks I share codes
enter image description here
import { Button, Image, StyleSheet, Text, View } from 'react-native';
import { StatusBar } from 'expo-status-bar';
export default function App() {
return (
<View style={styles.container}expoex>
<View style={styles.header}>
<View style={styles.imageContainer}>
<Image style= {styles.logo} source={require('./assets/logo.png')} />
</View>
<View style={styles.menu}>
<Image source={require('./assets/menu3.png')} />
<Image source={require('./assets/menu2.png')} />
<Image source={require('./assets/menu5.png')} />
<Image source={require('./assets/menu1.png')} />
<Image source={require('./assets/menu4.png')} />
</View>
</View>
<View style={styles.textNomList}>
<Text style={styles.textNom}>Lista de Supermercado</Text>
</View>
<StatusBar style="auto" />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#6E04BF',
color: '#fff',
alignItems: 'center',
},
header: {
marginTop:62,
flex:1,
flexDirection:'row',
justifyContent:'center',
alignItems:'flex-start',
height: 145,
marginVertical: 10,
},
imageContainer: {
alignItems: 'center',
justifyContent: 'center',
marginLeft:5,
height: 145,
},
logo: {
width: 100,
height: 140,
},
menu: {
flex:1,
flexDirection:'row',
justifyContent:'space-between',
marginHorizontal: 20,
marginTop:15,
height:145,
},
textNomList: {
flex:1,
alignItems:'flex-start',
justifyContent:'flex-start',
},
textNom: {
color: '#fff',
fontSize: 16,
fontWeight: 'bold',
marginLeft: 20,
},
});
the result of this code is
enter image description here
I only can see some styling issues, check out below, edit it as required
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#6E04BF',
color: '#fff',
alignItems: 'center',
},
header: {
marginTop: 62,
// flex: 1,
flexDirection: 'row',
// justifyContent: 'center',
// alignItems: 'flex-start',
// height: 145,
// marginVertical: 10,
},
imageContainer: {
// alignItems: 'center',
// justifyContent: 'center',
marginLeft: 5,
height: 145,
},
logo: {
width: 100,
height: 140,
backgroundColor:'fff'
},
menu: {
// flex: 1,
flexDirection: 'row',
justifyContent: 'space-between',
marginHorizontal: 20,
marginTop: 15,
height: 145,
},
textNomList: {
flex: 1,
alignItems: 'flex-start',
justifyContent: 'flex-start',
},
textNom: {
color: '#fff',
fontSize: 16,
fontWeight: 'bold',
marginLeft: 20,
},
});
You should put your text in the same View that is wrapping your image and then style it appropriately.
<View style={styles.imageContainer}>
<Image style= {styles.logo} source={require('./assets/logo.png')} />
<Text style={styles.textNom}>Lista de Supermercado</Text>
</View>
I am not good at styling but it looks like your app should look decent with how the styles are at the current moment.
Does anyone know how to fix the borderRadius issue in the following? The borderTopLeftRadius and borderTopRightRadius are set to 30 as is the borderRadius in the parent view, but there's whitespace, and they aren't matching up.
Here's the code:
<View style={styles.card}>
<View style={styles.cardHeader}>
<Text style={styles.cardHeaderText}>Title</Text>
</View>
</View>
Styling:
const styles = StyleSheet.create({
card: {
flexDirection: 'column',
margin: 10,
width: '95%',
height: 500,
backgroundColor: '#FFF',
borderRadius: 30,
borderWidth: 5,
},
cardHeader: {
width: '100%',
height: '12%',
backgroundColor: 'green',
borderBottomWidth: 5,
justifyContent: 'center',
alignContent: 'center',
borderTopLeftRadius: 30,
borderTopRightRadius: 30,
},
cardHeaderText: {
fontSize: 20,
fontWeight: 'bold',
paddingHorizontal: 16,
},
)}
The radius of the inner View should be equal to the outer radius minus the width of the border. So, 30-5=25.
You can use border radius = 25 as Abe mentioned or
you can remove border radius of cardHeader and add overflow:"hidden" to the card
const styles = StyleSheet.create({
card: {
...all your styles,
overflow: "hidden"
},
cardHeader: {
width: '100%',
height: '12%',
backgroundColor: 'green',
borderBottomWidth: 5,
justifyContent: 'center',
alignContent: 'center',
//borderTopLeftRadius: 30,
//borderTopRightRadius: 30,
},
)}
Working in React Native here and just trying to align some child text in the bottom left of a View. Ive tried various topMargin and padding options, but none work reliably/responsively.
What I have/want:
Code currently:
<TouchableWithoutFeedback onPress={() => onPress(props.id)}>
<View style={styles.card}>
<Text style={styles.card_Head}>What is <Text style={{fontFamily: 'SequelSans-BlackDisp'}}>Something?</Text></Text>
<Text style={styles.card_Body}>Count: {count} Id: {props.id}</Text>
</View>
</TouchableWithoutFeedback>);
card: {
backgroundColor: 'white',
height: wp('79%'),
width: wp('79%'),
justifyContent: 'flex-start',
alignItems: 'center',
color: 'black',
padding: 40,
textAlign: 'left',
borderRadius: 20,
marginBottom: hp('9%'),
},
card_Head: {
fontFamily: 'SequelSans-RomanDisp',
fontSize: hp('4.4%'),
lineHeight: hp('4.4%'),
alignSelf: 'flex-start',
},
card_Body: {
textAlign: 'left',
fontFamily: 'SequelSans-BlackDisp',
fontSize: hp('1.5%'),
alignSelf: 'flex-start',
},
How can I do this responsively?
You can use flex box space-between prop like this
card: {
flex: 1,
flexDirection: 'column',
justifyContent: 'space-between'
}
Ciao, try align-self: 'flex-end' like this:
card_Body: {
textAlign: 'left',
fontFamily: 'SequelSans-BlackDisp',
fontSize: hp('1.5%'),
alignSelf: 'flex-end',
},
Or marginTop in percentage.
I want my content in center ..equal margin from top and bottom so i am using justifyContent='center' but nothing happening
<View style={styles.allAttendeesContainer}>
<Image
style={styles.imageSpeaker}
source={{
uri: item.image
}}/>
<View>
<Text style={[styles.textSpeakerDetail,{fontWeight:'bold',color:'#000'}]}>Muthu Ramalingam</Text>
<Text style={styles.textSpeakerDetail}>HelloLead,DexPatent</Text>
<Text style={styles.textSpeakerDetail}>Information Technology and Services</Text>
</View>
</View>
This is my jsx
and below is my styling
allAttendeesContainer:{
height:125,
flexDirection:'row',
borderBottomWidth:0.5,
flex:1,
justifyContent:'center'
},
textSpeakerDetail:{
fontSize:18,
},
imageSpeaker:{
width: 75,
marginHorizontal:'3%',
height: 75,
borderRadius: 50,
},
inviteBox:{
marginLeft:'10%',
height:30,
width:80,
borderColor:'green',
borderRadius:50,
borderWidth:1,
justifyContent:'center'}
You haven't used
alignItems: 'center'
like this
allAttendeesContainer: {
height: 125,
flexDirection: 'row',
borderBottomWidth: 0.5,
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},