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
Related
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.
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%"
Is it possible to make the <View /> having the same height? I am fetching a data from server side and some content are short and some are long. So when I display them in a box form, the height of the box aren't same. If I fix the height or minimum height the long text will exceed the height of the box.
EDIT : Sample code
DisplayEguides(){
var winsWidth = Dimensions.get('window').width;
if(this.state.eguides != null){
var eguides = this.state.eguides.map((data, i)=>(
<View key={i} style={[ { width: (60/100)*winsWidth, paddingHorizontal: 5 } ]}>
<TouchableOpacity
onPress={()=>this.OpenUrl(data.url)}
style={{ backgroundColor: '#ffffff', borderBottomWidth: 1, borderColor: '#efefef', elevation: 1, shadowOpacity: 0.8, marginBottom: 15, padding: 15, borderRadius: 15 }}>
<View style={{ alignItems: 'center', overflow: 'hidden', position: 'relative' }}>
<Text style={{ fontWeight: 'bold', textAlign: 'center', marginBottom: 15 }}>{ data.title }</Text>
<View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }}>
<Text style={{ color: Color.default, fontWeight: 'bold' }}>Download</Text>
<AntDesign name="download" size={16} color={Color.default} style={{ paddingLeft: 10, fontWeight: 'bold' }} />
</View>
</View>
</TouchableOpacity>
</View>
))
return (
<View style={{ paddingHorizontal: 15 }}>
<AppText type="bold" style={{ fontSize: 18, marginBottom: 15 }}>E-Guides</AppText>
<ScrollView horizontal={true} showsHorizontalScrollIndicator={false}>{ eguides }</ScrollView>
</View>
);
}
}
Seems like Flexbox in react native is doing the job but need to place at the right element. Setting the view to flex: 1 will auto adjust all content inside it to have the same height. In my case, I have to set flex: 1 at TouchableOpacity since my box style is in this element.
<TouchableOpacity
onPress={()=>this.OpenUrl(data.url)}
style={{ backgroundColor: '#ffffff', borderBottomWidth: 1, borderColor: '#efefef', elevation: 1, shadowOpacity: 0.8, marginBottom: 15, padding: 15, borderRadius: 15, flex: 1 }}>
{ /* The rest of code goes here */ }
</TouchableOpacity>
I'm trying to have a TouchableHighlight + View above this list of generated comments. I can't seem to bring the start of the comments closer up to where the TouchableHighlight ends (it ends right after the text, no padding/margin below).
Here's the relevant JSX:
renderListView: function() {
return (
<View style={styles.container}>
<TouchableHighlight onPress={this.onSelect}>
<View style={styles.header}>
<Text style={styles.text}>
Visit Site
</Text>
</View>
</TouchableHighlight>
<ListView
dataSource={this.state.dataSource}
renderRow={this.renderCommentCell}
style={styles.commentListView} />
</View>
)
},
And here's my styles.js:
container: {
flex: 1,
marginTop: 65,
backgroundColor: '#FFFFFD',
flexDirection: 'column',
},
commentListView:{
margin: 0,
marginTop: 10,
marginRight: 15,
padding: 0,
backgroundColor: '#FFFFFD',
},
centering: {
alignItems: 'center',
justifyContent: 'center',
height: 80
},
header: {
alignItems: 'center',
flexDirection: 'row',
flex: 1
},
loadingText: {
fontSize: 75,
textAlign: 'center',
marginTop: 75,
marginBottom: 10,
marginRight: 10,
color: '#D6573D'
},
text: {
textAlign: 'center',
flexDirection: 'row',
justifyContent: 'center',
alignSelf: 'stretch',
fontSize: 40,
flex: 1
}
Additionally, here's a screenshot of what I'm seeing:
Add automaticallyAdjustContentInsets={false} to your ListView