In my screen, I need to split the text into column view and need to align the right side text with the left side text. also, need to show the whole text line by line. Tested with giving some height, width, position: absolute but didn't work. Any idea how to solve this?
I'll post my current code and screenshot for your ref.
Many thanks for your help
<View style={styles.twoCol}>
<View style={styles.leftField}>
<Text style={styles.leftFieldTitle}>Location:</Text>
</View>
<View style={styles.locationRightSide}>
<Text style={styles.rightFieldTitle}>{location}</Text>
</View>
</View>
const styles = StyleSheet.create({
twoCol: {
alignItems: 'center',
flexDirection: 'row',
marginTop: 25,
},
leftField: {
alignItems: 'flex-end',
width: '25%',
},
leftFieldTitle: {
fontWeight: '700',
color: 'black'
},
},
locationRightSide: {
width: '70%',
alignItems: 'flex-start',
paddingLeft: 10
},
rightFieldTitle: {
fontSize: RF(2.8),
color: 'black'
},
)}
Problem solved!!! Thanks everyone!
<View style={{
padding: 10,
flexDirection: "row",
marginLeft: 10,
marginRight: 5,
marginTop: 5,
marginBottom: 3,
justifyContent: "flex-start",
width: '95%',
}} >
<View style={{
position: 'absolute',
marginTop: 10
}}>
<Text style={styles.leftFieldTitle}>Location:</Text>
</View>
<View style={{ marginLeft: '26%' }}>
<Text style={styles.rightFieldTitle}>{location}</Text>
</View>
</View>
Related
I've seen the same question many times, but none of the solutions I found worked for me.
return part
<View style={styles.root}>
<ScrollView contentContainerStyle={{ flexGrow: 1 }} scrollEnabled={true}>
<View style={styles.dpArea}>
<Image
source={{
uri: "URI GOES HERE",
}}
style={{ width: "100%", height: "100%" }}
resizeMode="contain"
/>
</View>
<View style={styles.nameArea}>
<View style={{ flex: 8, alignItems: "center" }}>
<Text style={styles.nameText}> {nameUpper}</Text>
</View>
<View style={{ flex: 2, paddingLeft: 10 }}>
<MaterialIcons name="edit" size={24} color="gray" />
</View>
</View>
<View style={styles.emailArea}>
<Text
style={{
fontFamily: "Reg",
fontSize: 12,
color: "gray",
marginRight: 4,
}}
>
Logged in using
</Text>
<Text style={{ fontFamily: "Reg", fontSize: 12 }}>{email}</Text>
</View>
<View style={styles.statsArea}>
<StatsContainer text="STAT 1" number="41" />
<StatsContainer text="STAT 2" number="93" />
</View>
<View style={styles.feedbackArea}>
<Text style={{ fontFamily: "Bold", fontSize: 12, color: "gray" }}>
Send feedbacks, feature requests or report bugs:
</Text>
<FeedbackArea content={feedback} />
</View>
<View style={styles.logoutArea}>
<GenButton content="LOGOUT" />
<DeleteAcButton content="DELETE ACCOUNT" />
</View>
<View style={styles.madeByArea}>
<Text style={styles.madebyText}>Developed by:</Text>
</View>
</ScrollView>
</View>
StyleSheet :
root: {
flex: 1,
},
dpArea: {
height: "30%",
marginTop: 20,
overflow: "hidden",
alignItems: "center",
justifyContent: "center",
},
nameArea: {
height: "10%",
flexDirection: "row",
justifyContent: "space-around",
alignItems: "center",
},
emailArea: { height: "10%", flexDirection: "row", justifyContent: "center" },
statsArea: { flexDirection: "row", height: "20%", marginBottom: "10%" },
feedbackArea: { height: "20%", marginHorizontal: "5%" },
logoutArea: {
width: "100%",
justifyContent: "space-around",
alignItems: "center",
height: "30%",
marginVertical: "5%",
},
madeByArea: {
height: "10%",
justifyContent: "flex-end",
alignItems: "center",
marginBottom: 3,
},
madebyText: {
fontFamily: "Reg",
fontSize: 12,
color: "gray",
},
nameText: {
fontFamily: "Bold",
fontSize: 30,
},
What I've tried: making scrollview the parent component, wrapping scrollview in a root view, flex & flexGrow=1 in contentContainerStyle, flex & flexGrow=1 in ScrollView style parameter.
What I've observed is, if I change any text's font size to say 300, then scroll works but not all components are rendered, however, with normal font size, there's no scroll even though the page exceeds the screen size.
I presume it's due to the way stylesheet is configured, but am unable to locate the error.
I'm trying to align the contents of a View component into left and right side of the screen. Unfortunately, whatever I do, I can only align the parent View and not the child View components.
In the snippet below, item is the Parent View, leftIcon and title are supposed to be aligned together in the left and rightArrow is supposed to be aligned in the right.
<TouchableOpacity onPress={() => navigation.navigate(`${item.page}`)}>
<View style={styles.item}>
<Text style={styles.leftIcon}>a</Text>
<Text style={styles.title}>{item.title}</Text>
<Text style={styles.rightArrow}> > </Text>
</View>
</TouchableOpacity>
const styles = StyleSheet.create({
item: {
//backgroundColor: '#f9c2ff',
paddingTop: 7,
marginVertical: 4,
marginHorizontal: 16,
flex: 1,
flexDirection: 'row',
},
leftIcon: {
fontSize: 25,
paddingRight: '5%',
alignSelf: 'flex-start',
},
title: {
fontSize: 25,
alignSelf: 'flex-start',
},
rightArrow: {
fontSize: 25,
alignSelf: 'flex-end'
}
});
This might be an incorrect approach, but what can be done to achieve this?
You can wrap leftIcon and title in a view with a flexDirection: 'row' style.
Then add justifyContent: 'space-between' to your item styles.
Example (using inline styles):
<TouchableOpacity>
<View
style={{
marginVertical: 4,
marginHorizontal: 16,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
}}>
<View style={{ flexDirection: 'row' }}>
<Text
style={{
fontSize: 25,
paddingRight: '5%',
}}>
a
</Text>
<Text style={{ fontSize: 25 }}>Title</Text>
</View>
<Text style={{ fontSize: 25 }}> > </Text>
</View>
</TouchableOpacity>
hi in my project I use nativeBase. I use <Button><Text>blablabla</Text></Button>
when running in android ok but when run-ios text not showing.
this is my component :
<View style={{ marginLeft: 7, flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
<View style={styles.btncontent}>
<Right style={{ flex: 0.2 }}>
<Image source={mapBtnLogo} style={styles.btnImage} />
</Right>
<Left style={{ flex: 0.8 }}>
<Button full transparent style={styles.btn} onPress={() => props.myProps.gotoMap([section.YPOINT, section.XPOINT])}>
<Text style={styles.btnText}>
نمایش روی نقشه
</Text>
</Button>
</Left>
</View>
</View>
and this is styles :
const styles = StyleSheet.create({
...Platform.select({
ios: {
btnImage: {
margin: 5,
marginRight: 20,
width: moderateScale(20),
height: moderateScale(20),
},
btn: {
//alignItems: 'flex-start',
width: '100%',
height: '10%',
},
btnText: {
fontFamily: 'IRANSansMobile',
fontSize: 15,
color: '#000',
},
}, android: {
btn: {
width: '100%',
height: '10%',
},
btnText: {
fontFamily: 'IRANSansMobile',
fontSize: 15,
color: '#000000'
},
btncontent: {
backgroundColor: '#59c5b8',
flexDirection: 'row-reverse',
alignItems: 'center',
borderWidth: 0.3,
borderRadius: 5,
marginLeft: 10,
width: '95%',
},
}
remove node module and install again not working.
and clear Xcode and run again but not working.
I read this post NativeBase Button doesn't show text but I don't use padding and still not showing text
You can try TouchableOpacity.
<Left style={{ flex: 0.8 }}>
<TouchableOpacity style={styles.btn} onPress={() => props.myProps.gotoMap([section.YPOINT, section.XPOINT])}>
<Text style={styles.btnText}>
نمایش روی نقشه
</Text>
</TouchableOpacity>
</Left>
I found my mistake in styling :
change height style btn in the stylesheet from 10% to 100% !!
thank
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>
);
I want to do this, where both of the texts are on 1 horizontal line and one of them is in the center and the other is on the right:
This is what I have, ignore the colors (it doesn't work at all):
styles:
rowLabelText: {
color: "#0B1219",
fontFamily: Fonts.Knockout31JuniorMiddleWeight,
fontSize: 16.0,
},
Markup:
<View style={{flexDirection: 'row', height: 30, flexWrap: 'wrap', backgroundColor: 'green'}}>
<View style={{ flex: 1, backgroundColor: 'red', justifyContent: 'center', alignSelf: 'center'}}>
<Text style={styles.rowLabelText}>
adjkfdasjkfaskj
</Text>
</View>
<View style={{ flex: 1, backgroundColor: 'blue', justifyContent: 'center', alignSelf: 'flex-end' }}>
<Text style={styles.rowLabelText}>
adjkfdasjkfaskj
</Text>
</View>
</View>
I am having trouble. Could someone assist me?
It looks like your problem is with with alignSelf you want to use alignItems.
This is how your code will look like.
Your View:
<View style={styles.textContainer}>
<View style={styles.leftContainer}>
<Text style={styles.rowLabelText}>
adjkfdasjkfaskj
</Text>
</View>
<View style={styles.rightContainer}>
<Text style={styles.rowLabelText}>
adjkfdasjkfaskj
</Text>
</View>
</View>
Your styles:
textContainer:{
flexDirection: 'row',
height: 30,
backgroundColor: 'green'
},
leftContainer:{
flex: 1,
justifyContent: 'center',
alignItems:'center',
backgroundColor: 'red',
},
rightContainer:{
flex: 1,
justifyContent: 'center',
alignItems: 'flex-end',
backgroundColor: 'blue',
},
rowLabelText: {
color: "#0B1219",
fontSize: 16.0,
},
One way to center text with respect to the entire width of the screen while also having some text to the right side of the centered text is to use absolute positioning on the right text.
By using absolute positioning on the right text, it will not affect the position of the centered text.
<View style={{flexDirection: 'row'}}>
<View style={{flex:1, alignItems: 'center', backgroundColor: 'red'}}>
<Text>50%</Text>
</View>
<View style={{position:'absolute', right: 20, backgroundColor: 'blue'}}>
<Text>+$0.80</Text>
</View>
</View>