BREAKING: rename Toolbar to Appbar and add Appbar.Header

Author: satya164

docs/assets/screenshots/appbar-header.android.png

@@ -4,9 +4,10 @@ import * as React from 'react';
 import { View, Platform, StyleSheet } from 'react-native';
 import {
  Colors,
+ Appbar,
+ FAB,
  Switch,
  Paragraph,
- Toolbar,
  withTheme,
 } from 'react-native-paper';
 import type { Theme } from 'react-native-paper/types';
@@ -25,28 +26,28 @@ const initialParams = {
 
 const MORE_ICON = Platform.OS === 'ios' ? 'more-horiz' : 'more-vert';
 
-class ToolbarExample extends React.Component<Props> {
- static title = 'Toolbar';
+class AppbarExample extends React.Component<Props> {
+ static title = 'Appbar';
  static navigationOptions = ({ navigation }) => {
  const params = { ...initialParams, ...navigation.state.params };
 
  return {
  header: (
- <Toolbar>
+ <Appbar.Header>
  {params.showLeftIcon && (
- <Toolbar.BackAction onPress={() => navigation.goBack()} />
+ <Appbar.BackAction onPress={() => navigation.goBack()} />
  )}
- <Toolbar.Content
+ <Appbar.Content
  title="Title"
  subtitle={params.showSubtitle ? 'Subtitle' : null}
  />
  {params.showSearchIcon && (
- <Toolbar.Action icon="search" onPress={() => {}} />
+ <Appbar.Action icon="search" onPress={() => {}} />
  )}
  {params.showMoreIcon && (
- <Toolbar.Action icon={MORE_ICON} onPress={() => {}} />
+ <Appbar.Action icon={MORE_ICON} onPress={() => {}} />
  )}
- </Toolbar>
+ </Appbar.Header>
  ),
  };
  };
@@ -113,6 +114,13 @@ class ToolbarExample extends React.Component<Props> {
  }
  />
  </View>
+ <Appbar style={styles.bottom}>
+ <Appbar.Action icon="archive" onPress={() => {}} />
+ <Appbar.Action icon="mail" onPress={() => {}} />
+ <Appbar.Action icon="label" onPress={() => {}} />
+ <Appbar.Action icon="delete" onPress={() => {}} />
+ </Appbar>
+ <FAB icon="reply" onPress={() => {}} style={styles.fab} />
  </View>
  );
  }
@@ -131,6 +139,17 @@ const styles = StyleSheet.create({
  paddingVertical: 8,
  paddingHorizontal: 16,
  },
+ bottom: {
+ position: 'absolute',
+ left: 0,
+ right: 0,
+ bottom: 0,
+ },
+ fab: {
+ position: 'absolute',
+ right: 16,
+ bottom: 28,
+ },
 });
 
-export default withTheme(ToolbarExample);
+export default withTheme(AppbarExample);

docs/assets/screenshots/appbar-header.ios.png

@@ -23,7 +23,7 @@ import SurfaceExample from './SurfaceExample';
 import SwitchExample from './SwitchExample';
 import TextExample from './TextExample';
 import TextInputExample from './TextInputExample';
-import ToolbarExample from './ToolbarExample';
+import AppbarExample from './AppbarExample';
 import type { Theme } from 'react-native-paper/types';
 
 type Props = {
@@ -32,6 +32,7 @@ type Props = {
 };
 
 export const examples = {
+ appbar: AppbarExample,
  bottomNavigation: BottomNavigationExample,
  button: ButtonExample,
  card: CardExample,
@@ -52,7 +53,6 @@ export const examples = {
  switch: SwitchExample,
  text: TextExample,
  textInput: TextInputExample,
- toolbar: ToolbarExample,
 };
 
 const data = Object.keys(examples).map(id => ({ id, data: examples[id] }));

docs/assets/screenshots/appbar.png

@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 import { createStackNavigator } from 'react-navigation';
-import { Toolbar } from 'react-native-paper';
+import { Appbar } from 'react-native-paper';
 import ExampleList, { examples } from './ExampleList';
 
 const routes = Object.keys(examples)
@@ -13,10 +13,10 @@ const routes = Object.keys(examples)
 
  Screen.navigationOptions = props => ({
  header: (
- <Toolbar>
- <Toolbar.BackAction onPress={() => props.navigation.goBack()} />
- <Toolbar.Content title={(Comp: any).title} />
- </Toolbar>
+ <Appbar.Header>
+ <Appbar.BackAction onPress={() => props.navigation.goBack()} />
+ <Appbar.Content title={(Comp: any).title} />
+ </Appbar.Header>
  ),
  /* $FlowFixMe */
  ...(typeof Comp.navigationOptions === 'function'
@@ -38,10 +38,13 @@ export default createStackNavigator(
  {
  navigationOptions: ({ navigation }) => ({
  header: (
- <Toolbar>
- <Toolbar.Action icon="menu" onPress={() => navigation.openDrawer()} />
- <Toolbar.Content title="Examples" />
- </Toolbar>
+ <Appbar.Header>
+ <Appbar.Action
+ icon="menu"
+ onPress={() => navigation.navigate('DrawerOpen')}
+ />
+ <Appbar.Content title="Examples" />
+ </Appbar.Header>
  ),
  }),
  }

docs/assets/screenshots/toolbar.android.png

@@ -4,7 +4,7 @@ import {
  BottomNavigation,
  Button,
  FAB,
- Toolbar,
+ Appbar,
  Colors,
  NonExistent,
  NonExistentSecond as Stuff,

docs/assets/screenshots/toolbar.ios.png

@@ -3,6 +3,6 @@ import PaperProvider from 'react-native-paper/src/core/Provider';
 import BottomNavigation from 'react-native-paper/src/components/BottomNavigation';
 import Button from 'react-native-paper/src/components/Button';
 import FAB from 'react-native-paper/src/components/FAB/FAB';
-import Toolbar from 'react-native-paper/src/components/Toolbar/Toolbar';
+import Appbar from 'react-native-paper/src/components/Appbar/Appbar';
 import * as Colors from 'react-native-paper/src/styles/colors';
 import { NonExistent, NonExistentSecond as Stuff } from 'react-native-paper';