Menu
I'm using native-base to create a React Native app:
I'm using the Header Component to display Body, Left and Right elements. According to the docs, the title should automatically center but it does not (as seen below).
Am I missing something simple here? Any help would be appreciated!
import {
Container,
Header,
Content,
Left,
Right,
Body,
Title,
Icon
} from "native-base"
export default class Seminars extends React.Component{
render(){
return(
<Container style={styles.container}>
<Header style={styles.header}>
<Left>
<Icon name='arrow-back' />
</Left>
<Body>
<Title>Seminars</Title>
</Body>
<Right>
<Icon name='menu' />
</Right>
</Header>
<Content contentContainerStyle={styles.content} >
<Text>Content Here</Text>
</Content>
</Container>
)
}
}
const styles = StyleSheet.create({
container: {
},
header: {
paddingRight: 15,
paddingLeft: 15
},
content: {
display: "flex",
flex: 1,
justifyContent: "center",
padding: 15
}
});
305
<Header>
<Left style={{flex: 1}} />
<Body style={{flex: 1}}>
<Title style={{alignSelf: 'center'}}>Header</Title>
</Body>
<Right style={{flex: 1}} />
</Header>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
