/* @flow */
import * as React from 'react';
import { View, Platform, StyleSheet } from 'react-native';
import {
Colors,
Appbar,
Paragraph,
withTheme,
} from 'react-native-paper';
import type { Theme } from 'react-native-paper/types';
type Props = {
navigation: any,
theme: Theme,
};
const initialParams = {
showLeftIcon: true,
showSubtitle: true,
showSearchIcon: true,
showMoreIcon: true,
};
const MORE_ICON = Platform.OS === 'ios' ? 'more-horiz' : 'more-vert';
class AppbarExample extends React.Component<Props> {
static navigationOptions = ({ navigation }) => {
const params = { ...initialParams, ...navigation.state.params };
return {
header: (
<Appbar.Header>
{params.showLeftIcon && (
<Appbar.BackAction onPress={() => navigation.goBack()} />
)}
<Appbar.Content
title="Title"
subtitle={params.showSubtitle ? 'subtitle' : null}
/>
{params.showSearchIcon && (
<Appbar.Action icon="search" onPress={() => {}} />
)}
{params.showMoreIcon && (
<Appbar.Action icon={MORE_ICON} onPress={() => {}} />
)}
</Appbar.Header>
),
};
};
state = { str: 'hello' };
render() {
const {
navigation,
theme: {
colors: { background },
},
} = this.props;
const params = { ...initialParams, ...navigation.state.params };
return (
<View
style={[
styles.container,
{
backgroundColor: background,
},
]}>
<Paragraph>{this.state.str}</Paragraph>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: Colors.white,
paddingVertical: 8,
},
});
export default withTheme(AppbarExample);