Hi I think this should be simple, but I cannot get it to work. Seems like no matter what I do, I cannot get the text component to center horizontally inside the view. I have tried using alignItems:center, justifyContent:center, alignSelf:center, textAlign:center... nothing works. I can get it to center vertically, but not horizontally. Whyyyyy dear lord?
<Animated.View style={[styles.titleContainer]}>
<Text style={styles.title}>App logo here</Text>
</Animated.View>
How can I get the text to center both vertically and horizontally?
Here is my CSS:
titleContainer: {
flex: 1,
marginTop:30,
marginBottom:30,
justifyContent:'center'
},
title:{
color:'white',
textAlign:'center',
alignSelf:'center'
},
This is my result:
Try this...
Here's a working demo
container: {
flex: 1,
marginTop: 30,
marginBottom: 30,
justifyContent: 'center',
backgroundColor: '#fff',
},
title: {
fontSize: 28,
textAlign: 'center',
},
For anyone looking for a minimal version for the simplest case:
<View style={styles.containerView}>
<Text style={styles.centeredText}>I'm centered</Text>
</View>
const styles = StyleSheet.create({
containerView: {
justifyContent: 'center'
}
centeredText: {
alignSelf: 'center'
}
})
Align Self
Add justifyContent: 'center' to the container view.
React native works different to react.
So alignItems not working, instead justifyContent works.
use textAlign: 'center' property to center text
use alignSelf:'center' property to center View
<View style={{alignSelf:'center'}}>
<Text style={{textAlign:'center'}}>I'm centered</Text>
</View>
set in main View style flex:1 and in Text set textAlign:'center'
Adding flexDirection:'column' helps the items to be aligned centrally column by column:
titleContainer: {
flex: 1,
marginTop:30,
marginBottom:30,
justifyContent:'center',
},
title:{
color:'white',
textAlign:'center',
alignSelf:'center',
flexDirection: 'column'
},
Related
I am using the default stack from react navigation, and in my navigator screen options I have my own custom header header: (props) => <Header props={props} />. In my screen, I have a background colour, and in my SafeAreaView I have a background colour. For illustration I have set them both to the same.
In my custom header I am applying margin of 15 horizontally as well as to the top. So it is the colour underneath the custom header.
My question is this: Where is this header background colour being set? (the light grey one)
Here you can see what I mean
I have tried headerStyle {backgroundColor}, but no difference (i believe because using header overrides a lot of these options? Unsure though as it is not stated in the documentation.)
For reference, I am basing it off of this documentation: https://reactnavigation.org/docs/native-stack-navigator/#options
However it appears that this background colour is being set somewhere else entirely? And so I'm not sure where.
I realize setting headerTransparent and applying margin for each screen is a viable solution but I figure there is a better way to simply set the background colour of this space correctly.
edit with header component:
export default function Header({ props }) {
const { navigation, route, options, back } = props;
const title = getHeaderTitle(options, route.name);
return (
<View style={styles.header}>
<View style={styles.container}>
{back && (
<IconButton
type="ion"
name="chevron-back"
size={26}
iconStyle={styles.backButton}
onPress={navigation.goBack}
/>
)}
<Text style={styles.title}>{title}</Text>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
width: screenWidth - 30,
height: 60,
borderRadius: 10,
padding: 15,
marginTop: 15,
backgroundColor: colors.white,
alignSelf: "center",
flexDirection: "row",
alignItems: "center",
},
backButton: {
zIndex: 1,
},
title: {
flex: 1,
textAlign: "center",
flexDirection: "column",
fontSize: 24,
fontWeight: "bold",
// marginLeft: -26,
},
header: {
backgroundColor: colors.neutral95,
},
});
Adding a View parent breaks my styles, why is this happening? Does React Native's View tag have some default styles that I'm unaware of?
Below is the Button component as well as a screenshot with and without the View Tag.
class Button extends Component {
render() {
return (
<View>
<TouchableOpacity style={styles.buttonStyle}>
<Text style={styles.textStyle}>Hello</Text>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
textStyle: {
alignSelf: "center",
color: "#007aff",
fontSize: 16,
fontWeight: "600",
paddingTop: 10,
paddingBottom: 10
},
buttonStyle: {
flex: 1,
alignSelf: "stretch",
backgroundColor: "#fff",
borderRadius: 5,
borderWidth: 1,
borderColor: "#007aff",
marginLeft: 5,
marginRight: 5
}
});
The button is being rendered inside another component(A typical card component), if need I can provide that code as well.
Basically, your TouchableOpacity has all of your container styles, and this is going to cause the weird issue you are seeing. By defining flex:1, it means it will stretch itself to fill the area of the parent view. However, your parent view has not been flexed, so it will only fill the space that it needs to. It will however put your text component in however it seems fit, hence the weird result you are getting.
To debug this, I often will set backgroundColor: 'red', to see what flexbox is doing. In your case, i don't see the need for a parent view ? TouchableOpacity is simply an extension of view, so you should be able to do all your styling in it. If you are wanting to add a view though, i'd suggest wrapping it with your Touchable - otherwise you have the risk of messing up your onPresss. Something like
render() {
return (
<View style = {{height: 100, shadowColor: 'black', shadowRadius: 3}}> //RANDOM CARD CODE
<TouchableOpacity style={styles.buttonStyle}>
<View> //ANY STYLES HERE
<Text style={styles.textStyle}>Hello</Text>
</View>
</TouchableOpacity>
</View>
)};
This is a little tricky to describe. I'm using a react native WebView component to make a mini-browser. It's working ok, but there's a strange black border at the bottom of it which I didn't put in. It appears when scrolling to or beyond the bottom of the webpage.
You can see the thin black line above the "blah" text below. The reason for the blah text and the pink section at the bottom was to rule out a stray borderBottom* style on the WebView or its container.
Another thing to note is that the border briefly disappears when reloading the page, so it seems it's in the WebView's html. But I don't understand how or why, because a) it appears on all websites and b) it doesn't appear in other iOS browsers.
Am I doing something strange here?
Screenshot:
Elements and Styles:
<View style={styles.container as any}>
<View style={styles.header as any}>
{this.addressbarButtonProps().map(props => React.createElement(Button, { ...props, key: props.title }))}
<TextInput
ref={ADDRESSBAR_REF}
placeholder="type url"
style={{ minWidth: this.screenWidth - 50 * this.addressbarButtonProps().filter(b => !b.hidden).length - 10 }}
/>
</View>
<WebView
ref={WEBVIEW_REF}
source={{uri: this.state.uri}}
style={{ ...styles.web, width: this.screenWidth, paddingBottom: 0, padding: 0 }}
scalesPageToFit={true}
allowsInlineMediaPlayback={true}
onMessage={m => this.onMessage(m.nativeEvent.data)}
injectedJavaScript={js}
startInLoadingState={true}
/>
<Text style={{ borderTopWidth:20, borderTopColor: "red" }}>blah</Text>
</View>
const styles = {
container: {
paddingTop: 20,
flex: 1,
alignItems: "center",
justifyContent: "space-between",
backgroundColor: "#fafafa",
borderBottomColor: "pink",
borderBottomWidth: 100
},
header: {
flexDirection: "row",
alignItems: "flex-start",
justifyContent: "flex-start",
alignSelf: "stretch"
},
web: {
flex: 1,
borderBottomColor: "#fafafa",
backgroundColor: "#fafafa"
}
}
Set the backgroundColor of the WebView to transparent and the "border" won't be rendered.
<Webview style={{backgroundColor: 'transparent'}} .../>
While rendering a set of row components in ListView, my uri images seem not to be showing up at all. I have included Image in the react module. My custom component is the following:
var url = rowData.mediaGroups[0].contents[0].url;
if (url.indexOf('w=150') > -1)
{
url.replace("w=150", "w=500");
}
return <ArticlePreview
category={rowData.categories[0]}
key={sectionID}
heartText={'2.9k'}
categoryPress={this.onCategoryDetailsPress}
selected={false}
source={{ uri: url }}
text={rowData.title.toLowerCase().replace(' ','')}
onPress={this.onArticleDetailsPress} />
The component has multiple properties and is used throughout my app (and works there with link images). But for some reason the component just stopped working in the app for uri images. Not sure what to do. Here is the code for the component itself:
//component for article preview touchable image
/* will require the following
- rss feed and api
- user's keyword interests from parse In home.js
- parse db needs to be augmented to include what they heart
- parse db needs to be augmented to include what they press on (like google news)
*/
var React = require('react-native');
var {
View,
StyleSheet,
Text,
Image,
TouchableHighlight,
} = React;
//dimensions
var Dimensions = require('Dimensions');
var window = Dimensions.get('window');
var ImageButton = require('../../common/imageButton');
var KeywordBox = require('../../authentication/onboarding/keyword-box');
//additional libraries
module.exports = React.createClass({
//onPress function that triggers when button pressed
//this.props.text is property that can be dynamically filled within button
/* following props:
- source={this.props.source}
- onPress={this.props.onPress}
- {this.props.text}
- {this.props.heartText}
- key={this.props.key}
- text={this.props.category}
- this.props.selected
*/
render: function() {
return (
<TouchableHighlight
underlayColor={'transparent'}
onPress={this.props.onPress} >
<Image source={this.props.source} style={[styles.articlePreview, this.border('red')]}>
<View style={[styles.container, this.border('organge')]}>
<View style={[styles.header, this.border('blue')]}>
<Text style={[styles.previewText]}>{this.props.text}</Text>
</View>
<View style={[styles.footer, this.border('white')]}>
<View style={[styles.heartRow, this.border('black')]}>
<ImageButton
style={[styles.heartBtn, , this.border('red')]}
resizeMode={'contain'}
onPress={this.onHeartPress}
source={require('../../img/heart_btn.png')} />
<Text style={[styles.heartText]}>{this.props.heartText} favorites</Text>
</View>
<KeywordBox
style={[styles.category, this.border('blue')]}
key={this.props.key}
text={this.props.category}
onPress={this.props.categoryPress}
selected={this.props.selected} />
</View>
</View>
</Image>
</TouchableHighlight>
);
},
onHeartPress: function() {
//will move this function to a general module
},
border: function(color) {
return {
//borderColor: color,
//borderWidth: 4,
}
},
});
var styles = StyleSheet.create({
heartText: {
color: 'white',
fontSize: 12,
fontWeight: 'bold',
alignSelf: 'center',
marginLeft: 5,
},
heartRow: {
flexDirection: 'row',
justifyContent: 'space-around',
alignSelf: 'center',
justifyContent: 'center',
},
heartBtn: {
height: (92/97)*(window.width/13),
width: window.width/13,
alignSelf:'center',
},
category: {
fontFamily: 'Bebas Neue',
fontSize: 10,
fontWeight: 'bold'
},
header: {
flex: 3,
alignItems: 'center',
justifyContent: 'space-around',
marginTop: window.height/30,
},
footer: {
flex: 1,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
margin: window.height/50,
},
container: {
flex: 1,
backgroundColor: 'black',
opacity: 0.6,
},
articlePreview: {
flex: 1,
height: window.height/3.2,
width: window.width,
flexDirection: 'column'
},
previewText: {
fontFamily: 'Bebas Neue',
fontSize: 23,
color: 'white',
alignSelf: 'center',
textAlign: 'center',
margin: 5,
position: 'absolute',
top: 0,
right: 0,
bottom: 0,
left: 0
},
});
The UI currently looks like this with not images (has black background):
Checked my rss feeds - some were unreliable resulting in messing with the way the images were being shown
I seem to have a problem with a simple text field. The text inside is not wrapping. I'm running on an iOS 5s simulator. Any ideas?
Following the tutorial here: http://www.raywenderlich.com/99473/introducing-react-native-building-apps-javascript
Styles:
var styles = StyleSheet.create({
description: {
marginBottom: 20,
fontSize: 18,
textAlign: 'center',
color: '#656565',
},
container: {
padding: 30,
marginTop: 65,
alignItems: 'center',
},
Code:
<View style={styles.container}>
<Text style={styles.description}>
Search for houses to buy!
</Text>
<Text style={styles.description}>
Search by place-name, postcode or search near your location!
</Text>
</View>
I ran the exact code on rnplayground simulator, but the text did wrap correctly. If you had an outside flex container, you may need to specify the flexWrap property to 'wrap'.
rnplay.org/apps/x0Xf6w