My code is:
<View style={{...styles.tableRow, backgroundColor: index % 2 == 1 ? "#F0FBFC" : "white"}}>
<View style={styles.checkboxContainer}>
<Checkbox label="" color="success" checkboxStyle={styles.checkbox}/>
</View>
<Text style={styles.columnRowTxt}>{members[item].first}</Text>
<Text style={styles.columnRowTxt}>{members[item].last}</Text>
<Text style={styles.columnRowTxt}>{item.Weight}</Text>
</View>
I'm attempting to align the Checkbox in the center of that View. I originally tried it with out a view. Here is my style:
checkbox: {
backgroundColor: "yellow",
},
checkboxContainer: {
flexDirection: "row",
width: "25%",
backgroundColor: "gray",
alignItems:"center"
}
The result is:
I have also tried:
checkbox: {
backgroundColor: "yellow",
alignSelf: "center",
},
How can I get that centered?
alignItems: "center"
should be:
justifyContent: "center"
justifyContent goes with the flexDirection, alignItems goes opposed to the flexDirection.
Related
I want to place the back button to the left of the header.
<View style={styles.header}>
<AntDesign style={styles.backBtn} name="arrowleft" size={24} color="black" />
<Text style={styles.headerText}>My Page</Text>
</View>
//style
header: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
flexDirection: 'row',
},
backBtn: {
marginTop: 35,
alignItems: 'flex-start',
backgroundColor: 'blue'
},
headerText: {
fontWeight: 'bold',
fontSize: 18,
marginTop: 35,
backgroundColor: 'red'
},
[enter image description here][1]
I want to set back button on like flex-start
[1]: https://i.stack.imgur.com/2sSH1.png
Just wrap your AntDesign icon inside a view and give it a flex of 1. So that it takes up all the space left in the parent view. Then add alignSelf: 'center' to the Text component so that it aligns itself to the center of the View
You can do something like this
<View style={styles.header}>
<AntDesign name="arrowleft" size={24} color="black" style={styles.backBtn} />
<View style={{ flex: 1 }}>
<Text style={styles.headerText}>My Page</Text>
</View>
</View>
And Styles
header: {
flexDirection: 'row',
width: width,
backgroundColor: 'red',
},
backBtn: {
backgroundColor: 'blue',
},
headerText: {
fontWeight: 'bold',
fontSize: 18,
backgroundColor: 'red',
alignSelf: 'center',
},
Working Example
React Native learner here.
I am trying to show the suggestions as below:
<TouchableOpacity
style={{
backgroundColor: 'transparent',
flexDirection: 'row',
flexWrap: 'wrap',
}}
onPress={() => {
setSelectedValue(item);
setFilteredFilms([]);
}}>
<View>
<Text style={styles.itemText}>{item.title}</Text>
<Button
title={'Click'}
style={{
backgroundColor: 'green',
right: 0,
paddingRight: 0,
marginRight: 0,
}}></Button>
</View>
</TouchableOpacity>
...
itemText: {
fontSize: 15,
paddingTop: 5,
paddingBottom: 5,
margin: 2,
alignItems: 'flex-start',
},
infoText: {
textAlign: 'center',
fontSize: 16,
},
Output looks like below:
I want my suggestion's Text in the left side, while Click button always at the right side fixed with fixed length.
Text and Button region shouldn't overlap each other.
Any help or guidance about how to do it. Highly appreciated !!
P.S.: With style={{flexDirection: 'row'}} in <View> my Buttons in Suggestion box get pushed to right side and not visible as below:
I expect something like this:
You have to use flexDirection:'row' for inner View which contain the Text and the Button
<TouchableOpacity
style={{
backgroundColor: 'transparent',
flexDirection: 'row',
flexWrap: 'wrap',
justifyContent: 'space-between',
}}
onPress={() => {}}>
<Text style={{ maxWidth: '90%' }}>
{item.title}
</Text>
<View>
<Text style={{ backgroundColor: 'blue', alignItems: 'center' }}>
Click
</Text>
</View>
</TouchableOpacity>
Don't forget to look at : https://www.npmjs.com/package/react-native-read-more-text
this will help you get through it.
In my React Native app, I try to create a simple divider line. As stated here for example, I created an empty View and added the corresponding styling to it.
Now here's the thing: the divider line is not showing up with this code:
<View style={styles.divider}>
<Text></Text>
</View>
... Stylesheet:
divider: {
borderBottomWidth: 1,
borderLeftColor: 'white',
},
But If I add some text lines, it shows up:
<View style={styles.divider}>
<Text>testtest</Text>
</View>
... Stylesheet:
divider: {
borderBottomWidth: 1,
borderLeftColor: 'white',
},
Now here is the code context.
<View style={styles.containerWholePage}>
<View style={styles.containerUpper}>
<Text style={styles.mainText}>Here is a sample text</Text>
</View>
<View style={styles.containerLower}>
<View style={styles.containerText}>
<Text>TEST</Text>
<Text>Example 3</Text>
<Text>18:00 - 20:00</Text>
</View>
<View style={styles.divider}>
<Text>testtest</Text>
</View>
<View style={styles.containerText}>
<Text>TEST2</Text>
<Text>Example 3b</Text>
<Text>18:00 - 19:00</Text>
</View>
</View>
</View>
...
const styles = StyleSheet.create({
containerWholePage: {
alignItems: 'center',
flex: 1,
},
divider: {
borderBottomWidth: 1,
borderBottomColor: 'white',
},
containerLower: {
alignItems: 'center',
alignSelf: 'stretch',
backgroundColor: '#1E2928',
flex: 6,
justifyContent: 'space-around',
},
containerText: {
alignItems: 'center',
backgroundColor: '#1E2928',
},
containerUpper: {
alignItems: 'center',
alignSelf: 'stretch',
backgroundColor: 'white',
flex: 3,
},
});
Maybe you have an idea how to make the bottom line appear without having to write text?
Just do like this:
<View style={styles.divider}/>
...
divider: {
borderBottomWidth: 1,
borderBottomColor: 'white',
width:"100%"
},
Because the width is flexible to it's content, so if nothing in it, it doesn't have width. So that if you set the width, the View will have width setting as you want.
Code sandbox
Basically that should work I just tested it in sandbox and adding a
<View style={{borderBottomWidth: 1}} >
<Text></Text>
</View>
worked perfect for me.. maybe add a {" "} between the Text tags.
you can also try:
<View style={styles.divider}/>
divider: {
borderBottomWidth: 1,
borderBottomColor: 'white',
alignSelf:"stretch"
},
but I prefer just using width: "100%"
I just want the Icon to be on the left and the text to be on center.
I have this structure:
<View style={styles.mainContainer}>
<Error screen={screen}/>
<View style={styles.headerContainer}>
{back &&
<Icon
raised
name='arrow-back'
onPress={ onBackPress }
containerStyle={styles.back}/>
}
<Text style={styles.header}>{ title }</Text>
</View>
<View style={styles.contentContainer}>
{ children }
</View>
</View>
Kinda like this:
-> MainContainer
--> HeaderContainer
----> Back button
----> Title
mainContainer: {
flex: 1,
flexDirection: 'column',
alignItems: 'stretch',
justifyContent: 'flex-start'
},
headerContainer: {
flex: 1,
padding: 10,
flexDirection: 'row',
// ommited for clarity
},
back: {
alignSelf: 'flex-start'
},
header: {
fontSize: 24,
alignSelf: 'center'
},
But it doesnt work as it produces:
I also tried adding in HeaderContainer:
justifyContent: 'space-between',
and a blank <View />, but the result is not good:
As you can see, it's not centered really.
Edit Produces:
It's not really centered, because we put an imaginary thrid element. Can we do it with only two elemets? One in start and other on center?
Why is it not posible?
Try the following:
<View style={{ flex: 1, flexDirection: 'row', alignItems: 'center' }}>
<View style={{ flex: 1 }}>
{leftContent}
</View>
<View style={{ flex: 1, alignItems: 'center' }}>
{centerContent}
</View>
<View style={{ flex: 1, alignItems: 'flex-end' }}>
{rightContent}
</View>
</View>
Don't forget to set textAlign: 'center' if center component is <Text> or textAlign: 'right' if the right component is Text.
Put your Icon and text in separate Views and asign a flex to it something like this
<View style={styles.mainContainer}>
<Error screen={screen}/>
<View style={styles.headerContainer}>
<View style={{flex:.3,alignSelf:'flex-start}}>
{back &&
<Icon
raised
name='arrow-back'
onPress={ onBackPress }
containerStyle={styles.back}/>
}
</View>
<View style={{flex:.7,alignSelf:'flex-end',alignItems:'center'}}>
<Text style={styles.header}>{ title }</Text>
</View>
</View>
<View style={styles.contentContainer}>
{ children }
</View>
</View>
I think it shoud fix the problem
Lets assume that we have those react native styles:
var styles = StyleSheet.create({
parentView:{
width: 400,
height:150
},
containerView:{
flex:1,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
backgroundColor:'black'
},
child1:{
backgroundColor: 'red',
alignSelf: 'flex-start'
},
child2: {
backgroundColor: 'yellow'
}
}
and that we have this render function:
render: function(){
return(
<View style={styles.parentView}>
<View style={styles.containerView}>
<Text style={styles.child1}>Child1</Text>
<Text style={styles.child2}>Child2</Text>
</View>
</View>
);
}
This code produces this image:
but what I want to achieve is this image:
VERY VERY IMPORTANT: I want child2 to be TOTALLY centered within the containerView, and not a bit far to the right because of the space that child1 occupies.
How can I achieve that in react-native?*
p.s.: Keep in mind that this will run on many resolutions (many screens with different aspect ratios) thus, it cannot be set in an absolute way that would result on it only working on "some" screens but not on others.
not sure if this is the best way to do it, but it works for me
render() {
return(
<View style={styles.parentView}>
<View style={styles.containerView}>
<View style={styles.rowContainer}>
<View style={styles.rowItem}>
<Text style={styles.child1}>Child1</Text>
</View>
<View style={styles.rowItem}>
<Text style={styles.child2}>Child2</Text>
</View>
</View>
</View>
</View>
);
const styles = StyleSheet.create({
parentView:{
width: 400,
height:150
},
containerView:{
flex:1,
flexDirection: 'row',
alignItems: 'center',
backgroundColor:'black'
},
rowContainer: {
flex: 1,
flexDirection: 'column',
},
rowItem:{
flex: 1
},
child1:{
backgroundColor: 'red',
position: 'absolute',
},
child2: {
alignSelf: 'center',
backgroundColor: 'yellow'
}
});