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;
