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.
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.
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.
I'm trying to center two separate texts in their components, I'm using react-native and native-base. I cannot center the text vertically and horizontally within the Text component itself. I have divided into colors to see the problem graphically.
The elements:
<View
style={{
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'red'
}}>
<Text uppercase={false} style={styles.buttonTextLeft}>
{title}
</Text>
<Text uppercase={false} style={styles.buttonTextLeftGreen}>
{subTitle}
</Text>
</View>
The styles:
buttonTextLeft: {
fontFamily: 'Cuprum-Bold',
fontSize: normalize(20),
color: '#005f99',
flex: 1,
flexDirection: 'row',
backgroundColor: 'yellow'
},
buttonTextLeftGreen: {
fontFamily: 'Cuprum-Bold',
fontSize: normalize(20),
color: '#94cf1c',
flex: 1,
flexDirection: 'row',
backgroundColor: 'green'
},
what you see commented are all the tests I did. certainly, it is stupid but I have not yet solved, do you have any idea? Thanks.
SOLUTION
For those who had the same problem, I enter the code of my correct and clean current situation (without the backgroundColor):
JS
<View
style={{
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
}}
>
<Text uppercase={false} style={styles.buttonTextLeft}>
{title}
</Text>
<Text uppercase={false} style={styles.buttonTextLeftGreen}>
{subTitle}
</Text>
</View>
Styles
buttonTextLeft: {
fontFamily: 'Cuprum-Bold',
fontSize: normalize(20),
flex: 1,
flexDirection: 'row',
lineHeight: normalize(20),
paddingVertical: normalize(4),
color: '#005f99',
},
buttonTextLeftGreen: {
fontFamily: 'Cuprum-Bold',
fontSize: normalize(20),
flex: 1,
flexDirection: 'row',
lineHeight: normalize(20),
paddingVertical: normalize(4),
color: '#94cf1c',
},
Maybe I didn't understand your problem truly, I guess your problem is inside green and yellow area.
I had same issue and for handling this issue I used line-height: 20 and paddingVertical: 5. the 20 and 5 numbers are sample and for my project design. you put your numbers instead of them.
Setting the line height of the text to be the desired height of the box should work. For example if you want the yellow box to be 50 tall you would set lineHeight: 50 on the text.
Hope that helps.
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',
},