+- 0Day Forums (https://0day.red)
+-- Forum: Coding (https://0day.red/Forum-Coding)
+--- Forum: React Native (https://0day.red/Forum-React-Native)
+--- Thread: ReactNative: how to center text? (/Thread-ReactNative-how-to-center-text)
ReactNative: how to center text? - hued799 - 07-19-2023
How to center Text in ReactNative both in horizontal and vertical?
I have an example application in rnplay.org where **justifyContent="center"** and **alignItems="center"** is not working:
[To see links please register here]
The text should being centered.
And why is there a margin at the top between the text (yellow) and parent container?
Code:
```js
'use strict';
var React = require('react-native');
var {
AppRegistry,
StyleSheet,
Text,
Image,
View,
} = React;
var SampleApp = React.createClass({
render: function() {
return (
<View style={styles.container}>
<View style={styles.topBox}>
<Text style={styles.headline}>
lorem ipsum{'\n'}
ipsum lorem lorem
</Text>
</View>
<View style={styles.otherContainer}>
</View>
</View>
);
}
});
var styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column',
backgroundColor: 'red',
justifyContent: 'center',
alignItems: 'center',
},
topBox: {
flex: 1,
flexDirection: 'row',
backgroundColor: 'lightgray',
justifyContent: 'center',
alignItems: 'center',
},
headline: {
fontWeight: 'bold',
fontSize: 18,
marginTop: 0,
width: 200,
height: 80,
backgroundColor: 'yellow',
justifyContent: 'center',
alignItems: 'center',
},
otherContainer: {
flex: 4,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'green',
},
});
AppRegistry.registerComponent('SampleApp', () => SampleApp);
module.exports = SampleApp;
```