how to align text inside react component

1'use strict';
2
3var React = require('react-native');
4var {
5  AppRegistry,
6  StyleSheet,
7  Text,
8  Image,
9  View,
10} = React;
11
12var SampleApp = React.createClass({
13  render: function() {
14    return (
15            <View style={styles.container}>
16                <View style={styles.topBox}>
17                    <Text style={styles.headline}>lorem ipsum{'\n'}ipsum lorem lorem</Text>
18
19                </View>
20                <View style={styles.otherContainer}>
21                </View>
22            </View>
23    );
24  }
25});
26
27var styles = StyleSheet.create({
28
29    container: {
30        flex: 1,
31        flexDirection: 'column',
32        backgroundColor: 'red',
33        justifyContent: 'center',
34        alignItems: 'center',
35    },
36
37    topBox: {
38        flex: 1,
39        flexDirection: 'row',
40        backgroundColor: 'lightgray',
41        justifyContent: 'center',
42        alignItems: 'center',
43    },
44    headline: {
45        fontWeight: 'bold',
46        fontSize: 18,
47    marginTop: 0,
48        width: 200,
49        height: 80,
50    backgroundColor: 'yellow',
51        justifyContent: 'center',
52        alignItems: 'center',
53    },
54
55  otherContainer: {
56        flex: 4,
57        justifyContent: 'center',
58        alignItems: 'center',
59    backgroundColor: 'green',
60    },
61
62
63});
64
65AppRegistry.registerComponent('SampleApp', () => SampleApp);
66
67module.exports = SampleApp;