Navigation

namespace Appbar {
  function Header(props: AppbarHeaderProps): JSX.Element;
  function Content(props: AppbarContentProps): JSX.Element;
  function Action(props: AppbarActionProps): JSX.Element;
  function BackAction(props: AppbarBackActionProps): JSX.Element;
}

interface AppbarHeaderProps {
  children: React.ReactNode;
  dark?: boolean;
  statusBarHeight?: number;
  mode?: 'small' | 'medium' | 'large' | 'center-aligned';
  elevated?: boolean;
  style?: StyleProp<ViewStyle>;
  theme?: ThemeProp;
}

interface AppbarContentProps {
  title: React.ReactNode;
  subtitle?: React.ReactNode;
  onPress?: () => void;
  disabled?: boolean;
  color?: string;
  titleStyle?: StyleProp<TextStyle>;
  subtitleStyle?: StyleProp<TextStyle>;
  style?: StyleProp<ViewStyle>;
  theme?: ThemeProp;
}

interface AppbarActionProps {
  icon: IconSource;
  size?: number;
  disabled?: boolean;
  onPress?: () => void;
  iconColor?: string;
  rippleColor?: ColorValue;
  accessibilityLabel?: string;
  style?: StyleProp<ViewStyle>;
  theme?: ThemeProp;
}

interface AppbarBackActionProps {
  disabled?: boolean;
  onPress?: () => void;
  color?: string;
  size?: number;
  accessibilityLabel?: string;
  style?: StyleProp<ViewStyle>;
  theme?: ThemeProp;
}

import React from 'react';
import { Appbar } from 'react-native-paper';

function MyAppbar() {
  return (
    <Appbar.Header>
      <Appbar.BackAction onPress={() => {}} />
      <Appbar.Content title="Title" subtitle="Subtitle" />
      <Appbar.Action icon="calendar" onPress={() => {}} />
      <Appbar.Action icon="magnify" onPress={() => {}} />
    </Appbar.Header>
  );
}

function BottomNavigation(props: BottomNavigationProps): JSX.Element;

interface BottomNavigationProps {
  navigationState: {
    index: number;
    routes: Array<BottomNavigationRoute>;
  };
  onIndexChange: (index: number) => void;
  renderScene: (props: { route: BottomNavigationRoute; jumpTo: (key: string) => void }) => React.ReactNode;
  renderIcon?: (props: { route: BottomNavigationRoute; focused: boolean; color: string }) => React.ReactNode;
  renderLabel?: (props: { route: BottomNavigationRoute; focused: boolean; color: string }) => React.ReactNode;
  renderTouchable?: (props: TouchableProps) => React.ReactNode;
  getLabelText?: (props: { route: BottomNavigationRoute }) => string | undefined;
  getAccessibilityLabel?: (props: { route: BottomNavigationRoute }) => string | undefined;
  getTestID?: (props: { route: BottomNavigationRoute }) => string | undefined;
  activeColor?: string;
  inactiveColor?: string;
  keyboardHidesNavigationBar?: boolean;
  barStyle?: StyleProp<ViewStyle>;
  labelMaxFontSizeMultiplier?: number;
  style?: StyleProp<ViewStyle>;
  theme?: ThemeProp;
}

interface BottomNavigationRoute {
  key: string;
  title?: string;
  focusedIcon?: IconSource;
  unfocusedIcon?: IconSource;
  badge?: string | number | boolean;
  accessibilityLabel?: string;
  testID?: string;
}

import React, { useState } from 'react';
import { BottomNavigation, Text } from 'react-native-paper';

const MusicRoute = () => <Text>Music</Text>;
const AlbumsRoute = () => <Text>Albums</Text>;
const RecentsRoute = () => <Text>Recents</Text>;

function MyBottomNavigation() {
  const [index, setIndex] = useState(0);
  const [routes] = useState([
    { key: 'music', title: 'Music', focusedIcon: 'music' },
    { key: 'albums', title: 'Albums', focusedIcon: 'album' },
    { key: 'recents', title: 'Recents', focusedIcon: 'history' },
  ]);

  const renderScene = BottomNavigation.SceneMap({
    music: MusicRoute,
    albums: AlbumsRoute,
    recents: RecentsRoute,
  });

  return (
    <BottomNavigation
      navigationState={{ index, routes }}
      onIndexChange={setIndex}
      renderScene={renderScene}
    />
  );
}

namespace Drawer {
  function Item(props: DrawerItemProps): JSX.Element;
  function Section(props: DrawerSectionProps): JSX.Element;
  function CollapsedItem(props: DrawerCollapsedItemProps): JSX.Element;
}

interface DrawerItemProps {
  label: string;
  icon?: IconSource;
  active?: boolean;
  onPress?: () => void;
  accessibilityLabel?: string;
  style?: StyleProp<ViewStyle>;
  labelStyle?: StyleProp<TextStyle>;
  theme?: ThemeProp;
}

interface DrawerSectionProps {
  title?: string;
  children: React.ReactNode;
  showDivider?: boolean;
  titleStyle?: StyleProp<TextStyle>;
  style?: StyleProp<ViewStyle>;
  theme?: ThemeProp;
}

interface DrawerCollapsedItemProps {
  focusedIcon?: IconSource;
  unfocusedIcon?: IconSource;
  label: string;
  active?: boolean;
  onPress?: () => void;
  accessibilityLabel?: string;
  style?: StyleProp<ViewStyle>;
  theme?: ThemeProp;
}

import React, { useState } from 'react';
import { Drawer } from 'react-native-paper';

function MyDrawer() {
  const [active, setActive] = useState('');

  return (
    <Drawer.Section title="Some title">
      <Drawer.Item
        label="First Item"
        active={active === 'first'}
        onPress={() => setActive('first')}
      />
      <Drawer.Item
        label="Second Item"
        active={active === 'second'}
        onPress={() => setActive('second')}
      />
    </Drawer.Section>
  );
}