/Javascript/React/How to align text inside react component

How to align text inside react component

'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;

Source: stackoverflow.com

Similar codes

0 vote163 views1 answer
Javascript react reverse map
Javascript React
7 votes152 views1 answer
Firebase react js
Javascript React
0 vote151 views3 answers
React router browser refresh
Javascript React
24 votes150 views5 answers
How to change port in react js
Javascript React
48 votes154 views1 answer
Emmet not working react js
Javascript React
1 vote214 views1 answer
How to delete element at a particular index of array in react js
Javascript React
0 vote215 views1 answer
Uuid react native expo
Javascript React
0 vote99 views1 answer
Fixed menu reactjs
Javascript React
-2 votes145 views1 answer
React native generate signed apk getting older version
Javascript React
31 votes156 views2 answers
React-router-dom npm
Javascript React