top bar in react native

1import React from 'react';
2import { StyleSheet, Text, View } from 'react-native';
3
4class TopBar extends React.Component {
5  render() {
6    return (
7      <View style={styles.container}>
8        <Text>Left</Text>
9        <Text>TopBar</Text>
10        <Text>Right</Text>
11      </View>
12    );
13  }
14}
15
16const styles = StyleSheet.create({
17  container: {
18    alignSelf: 'stretch',
19    height: 52,
20    flexDirection: 'row', // row
21    backgroundColor: 'yellow',
22    alignItems: 'center',
23    justifyContent: 'space-between', // center, space-around
24    paddingLeft: 10,
25    paddingRight: 10
26  }
27});
28
29export default TopBar;
30