### Basic React Navigation Stack Setup

Source: https://oss.callstack.com/react-native-paper/docs/guides/react-navigation

Sets up a basic stack navigator with two screens: Home and Details. Ensure you have `react-native-gesture-handler` and `@react-navigation/native-stack` installed.

```javascript
import 'react-native-gesture-handler';  
import React from 'react';  
import { NavigationContainer } from '@react-navigation/native';  
import { createNativeStackNavigator } from '@react-navigation/native-stack';  
  
const Stack = createNativeStackNavigator();  
  
export default function App() {  
  return (  
    <NavigationContainer>  
      <Stack.Navigator initialRouteName="Home">  
        <Stack.Screen name="Home" component={HomeScreen} />  
        <Stack.Screen name="Details" component={DetailsScreen} />  
      </Stack.Navigator>  
    </NavigationContainer>  
  );
}
```

--------------------------------

### Install React Native Paper with Yarn

Source: https://oss.callstack.com/react-native-paper/docs/guides/getting-started

Use this command to install the library using Yarn.

```bash
yarn add react-native-paper  

```

--------------------------------

### Install React Native Paper with pnpm

Source: https://oss.callstack.com/react-native-paper/docs/guides/getting-started

Use this command to install the library using pnpm.

```bash
pnpm add react-native-paper  

```

--------------------------------

### Basic Setup with PaperProvider

Source: https://oss.callstack.com/react-native-paper/docs/guides/getting-started

Wrap your root component with PaperProvider for basic setup. This is typically done in your project's entry file (index.js or App.js).

```javascript
import * as React from 'react';
import { AppRegistry } from 'react-native';
import { PaperProvider } from 'react-native-paper';
import { name as appName } from './app.json';
import App from './src/App';

export default function Main() {
  return (
    <PaperProvider>
      <App />
    </PaperProvider>
  );
}

AppRegistry.registerComponent(appName, () => Main);

```

--------------------------------

### Start Web Server with Expo

Source: https://oss.callstack.com/react-native-paper/docs/guides/react-native-web

Start the Expo development server with web support enabled. This command will build and launch your application in a web browser.

```bash
npx expo start --web  

```

--------------------------------

### Install React Native Paper with npm

Source: https://oss.callstack.com/react-native-paper/docs/guides/getting-started

Use this command to install the library using npm.

```bash
npm install react-native-paper  

```

--------------------------------

### Install Dependencies with npm (Vanilla)

Source: https://oss.callstack.com/react-native-paper/docs/guides/getting-started

Install core dependencies for vanilla React Native projects using npm.

```bash
npm install react-native-safe-area-context react-native-reanimated react-native-worklets  

```

--------------------------------

### Install Dependencies for Expo

Source: https://oss.callstack.com/react-native-paper/docs/guides/getting-started

Install necessary dependencies like safe area context and reanimated when using Expo.

```bash
npx expo install react-native-safe-area-context react-native-reanimated react-native-worklets  

```

--------------------------------

### Bottom Appbar with FAB Example

Source: https://oss.callstack.com/react-native-paper/docs/components/Appbar

Shows how to implement a bottom Appbar with action items and a Floating Action Button (FAB). This example utilizes `useSafeAreaInsets` for proper spacing and `useTheme` for surface color.

```javascript
import * as React from 'react';
import { StyleSheet } from 'react-native';
import { Appbar, FAB, useTheme } from 'react-native-paper';
import { useSafeAreaInsets } from 'react-native-safe-area-context';

const BOTTOM_APPBAR_HEIGHT = 80;
const MEDIUM_FAB_HEIGHT = 56;

const MyComponent = () => {
  const { bottom } = useSafeAreaInsets();
  const theme = useTheme();

  return (
    <Appbar
      style={[ 
        styles.bottom,
        {
          height: BOTTOM_APPBAR_HEIGHT + bottom,
          backgroundColor: theme.colors.surfaceContainer,
        },
      ]}
      safeAreaInsets={{ bottom }}
    >
      <Appbar.Action icon="archive" onPress={() => {}} />
      <Appbar.Action icon="email" onPress={() => {}} />
      <Appbar.Action icon="label" onPress={() => {}} />
      <Appbar.Action icon="delete" onPress={() => {}} />
      <FAB
        mode="flat"
        size="medium"
        icon="plus"
        onPress={() => {}}
        style={[ 
          styles.fab,
          { top: (BOTTOM_APPBAR_HEIGHT - MEDIUM_FAB_HEIGHT) / 2 },
        ]}
      />
    </Appbar>
  );
};

const styles = StyleSheet.create({
  bottom: {
    backgroundColor: 'aquamarine',
    position: 'absolute',
    left: 0,
    right: 0,
    bottom: 0,
  },
  fab: {
    position: 'absolute',
    right: 16,
  },
});

export default MyComponent;
```

--------------------------------

### Install Dependencies with Yarn (Vanilla)

Source: https://oss.callstack.com/react-native-paper/docs/guides/getting-started

Install core dependencies for vanilla React Native projects using Yarn.

```bash
yarn add react-native-safe-area-context react-native-reanimated react-native-worklets  

```

--------------------------------

### Install Dependencies with pnpm (Vanilla)

Source: https://oss.callstack.com/react-native-paper/docs/guides/getting-started

Install core dependencies for vanilla React Native projects using pnpm.

```bash
pnpm add react-native-safe-area-context react-native-reanimated react-native-worklets  

```

--------------------------------

### Top Appbar Example

Source: https://oss.callstack.com/react-native-paper/docs/components/Appbar

Demonstrates how to create a top Appbar with a back action, title, and action icons. Ensure Appbar and its sub-components are imported.

```javascript
import * as React from 'react';
import { Appbar } from 'react-native-paper';

const MyComponent = () => (
  <Appbar.Header>
    <Appbar.BackAction onPress={() => {}} />
    <Appbar.Content title="Title" />
    <Appbar.Action icon="calendar" onPress={() => {}} />
    <Appbar.Action icon="magnify" onPress={() => {}} />
  </Appbar.Header>
);

export default MyComponent;
```

--------------------------------

### Install Material Design Icons with Yarn

Source: https://oss.callstack.com/react-native-paper/docs/guides/getting-started

Install the Material Design Icons package using Yarn, required for certain components.

```bash
yarn add @react-native-vector-icons/material-design-icons  

```

--------------------------------

### Install Material Design Icons with pnpm

Source: https://oss.callstack.com/react-native-paper/docs/guides/getting-started

Install the Material Design Icons package using pnpm, required for certain components.

```bash
pnpm add @react-native-vector-icons/material-design-icons  

```

--------------------------------

### Basic App Navigation Setup

Source: https://oss.callstack.com/react-native-paper/docs/guides/react-navigation

This snippet shows the basic structure of a React Navigation app with a Stack Navigator, using a custom header component.

```javascript
export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator
        initialRouteName="Home"
        screenOptions={{
          header: (props) => <CustomNavigationBar {...props} />,
        }}>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

```

--------------------------------

### Install Material Design Icons with npm

Source: https://oss.callstack.com/react-native-paper/docs/guides/getting-started

Install the Material Design Icons package using npm, required for certain components.

```bash
npm install @react-native-vector-icons/material-design-icons  

```

--------------------------------

### App Setup with PaperProvider

Source: https://oss.callstack.com/react-native-paper/docs/guides/react-navigation

Ensure your root component is wrapped with PaperProvider for Menu component functionality. This sets up the necessary context for Material Design components.

```javascript
import { PaperProvider } from 'react-native-paper';
  
// ...  
  
<PaperProvider>
  <NavigationContainer>
    <Stack.Navigator
      initialRouteName="Home"
      screenOptions={{
        header: (props) => <CustomNavigationBar {...props} />,
      }}>
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Details" component={DetailsScreen} />
    </Stack.Navigator>
  </NavigationContainer>
</PaperProvider>
```

--------------------------------

### Button Component Usage

Source: https://oss.callstack.com/react-native-paper/docs/components/Button

Example of how to import and use the Button component with specified mode and onPress handler.

```APIDOC
## Button Component Usage

### Description
This code snippet demonstrates the basic usage of the Button component, including importing it and rendering it with an icon, a specific mode, and an `onPress` event handler.

### Usage Example
```javascript
import * as React from 'react';
import { Button } from 'react-native-paper';

const MyComponent = () => (
  <Button icon="camera" mode="contained" onPress={() => console.log('Pressed')}>
    Press me
  </Button>
);

export default MyComponent;
```

### Props Used in Example
- `icon`: Specifies an icon to display within the button.
- `mode`: Sets the visual style of the button (e.g., 'contained').
- `onPress`: A function that is called when the button is pressed.
```

--------------------------------

### BottomNavigation Navigation State Example

Source: https://oss.callstack.com/react-native-paper/docs/components/BottomNavigation

This example shows the structure of the navigation state object required by the BottomNavigation component, including route definitions with keys, titles, and icons.

```javascript
{
  index: 1,
  routes: [
    { key: 'music', title: 'Favorites', focusedIcon: 'heart', unfocusedIcon: 'heart-outline'},
    { key: 'albums', title: 'Albums', focusedIcon: 'album' },
    { key: 'recents', title: 'Recents', focusedIcon: 'history' },
    { key: 'notifications', title: 'Notifications', focusedIcon: 'bell', unfocusedIcon: 'bell-outline' },
  ]
}
```

--------------------------------

### Basic BottomNavigation Usage

Source: https://oss.callstack.com/react-native-paper/docs/components/BottomNavigation

This snippet demonstrates the basic setup and usage of the BottomNavigation component, including defining routes, rendering scenes, and managing the active tab index.

```javascript
import * as React from 'react';
import { BottomNavigation, Text } from 'react-native-paper';

const MusicRoute = () => <Text>Music</Text>;

const AlbumsRoute = () => <Text>Albums</Text>;

const RecentsRoute = () => <Text>Recents</Text>;

const NotificationsRoute = () => <Text>Notifications</Text>;

const MyComponent = () => {
  const [index, setIndex] = React.useState(0);
  const [routes] = React.useState([
    { key: 'music', title: 'Favorites', focusedIcon: 'heart', unfocusedIcon: 'heart-outline'},
    { key: 'albums', title: 'Albums', focusedIcon: 'album' },
    { key: 'recents', title: 'Recents', focusedIcon: 'history' },
    { key: 'notifications', title: 'Notifications', focusedIcon: 'bell', unfocusedIcon: 'bell-outline' },
  ]);

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

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

export default MyComponent;
```

--------------------------------

### Appbar.Action Usage

Source: https://oss.callstack.com/react-native-paper/docs/components/Appbar/AppbarAction

Example of how to use the Appbar.Action component within an Appbar.Header.

```APIDOC
## Appbar.Action

A component used to display an action item in the appbar.

### Usage
```javascript
import * as React from 'react';
import { Appbar } from 'react-native-paper';
import { Platform } from 'react-native';

const MORE_ICON = Platform.OS === 'ios' ? 'dots-horizontal' : 'dots-vertical';

const MyComponent = () => (
  <Appbar.Header>
     <Appbar.Content title="Title" subtitle={'Subtitle'} />
      <Appbar.Action icon="magnify" onPress={() => {}} />
      <Appbar.Action icon={MORE_ICON} onPress={() => {}} />
  </Appbar.Header>
);

export default MyComponent;
```

### Props

#### `color`
Type: `ColorValue`
Custom color for action icon.

#### `icon` (required)
Type: `IconSource`
Name of the icon to show.

#### `size`
Type: `number`
Default value: `24`
Optional icon size.

#### `disabled`
Type: `boolean`
Whether the button is disabled. A disabled button is greyed out and `onPress` is not called on touch.

#### `accessibilityLabel`
Type: `string`
Accessibility label for the button. This is read by the screen reader when the user taps the button.

#### `onPress`
Type: `() => void`
Function to execute on press.

#### `isLeading` Available in v5.x with theme version 3
Type: `boolean`
Whether it's the leading button. Note: If `Appbar.BackAction` is present, it will be rendered before any `isLeading` icons.

#### `style`
Type: `Animated.WithAnimatedValue<StyleProp<ViewStyle>>`

#### `ref`
Type: `React.RefObject<View>`

#### `theme`
Type: `ThemeProp`

### Theme colors

info
The table below outlines the theme colors, specifically for MD3 _(theme version 3)_ at the moment.

| mode              | iconColor                  |
|-------------------|----------------------------|
| leading icon      | theme.colors.onSurface     |
| not leading icon  | theme.colors.onSurfaceVariant |

tip
If a dedicated prop for a specific color is not available or the `style` prop does not allow color modification, you can customize it using the `theme` prop. It allows to override any color, within the component, based on the table above.

_Example of overriding_`primary` _color:_
`<Appbar.Action theme={{ colors: { primary: 'green' } }} />`
```

--------------------------------

### Install Web Dependencies with Expo

Source: https://oss.callstack.com/react-native-paper/docs/guides/react-native-web

Install necessary dependencies for web support when using Expo. This includes React DOM, React Native Web, and Expo Metro runtime.

```bash
npx expo install react-dom react-native-web @expo/metro-runtime  

```

--------------------------------

### Install React Native Paper from Git Commit

Source: https://oss.callstack.com/react-native-paper/docs/guides/contributing

Specify a git commit hash in your package.json to install a specific version of React Native Paper directly from the repository.

```json
{
  "dependencies": {
    "react-native-paper": "git+https://github.com/callstack/react-native-paper.git#<commit-hash>",
  }
}

```

--------------------------------

### Quick Example: BottomNavigation with React Navigation

Source: https://oss.callstack.com/react-native-paper/docs/guides/bottom-navigation

This example shows how to pass a BottomNavigation.Bar to the tab bar prop of a React Navigation bottom tab navigator. It handles routing, state, and screen options, rendering a Material 3 tab bar with icons and labels.

```javascript
import MaterialCommunityIcons from '@react-native-vector-icons/material-design-icons';  
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';  
import { CommonActions } from '@react-navigation/native';  
import { BottomNavigation } from 'react-native-paper';  
import { useSafeAreaInsets } from 'react-native-safe-area-context';  
  
const Tab = createBottomTabNavigator();  
  
function MyTabs() {
  const insets = useSafeAreaInsets();  
  
  return (
    <Tab.Navigator  
      screenOptions={{ animation: 'shift' }}  
      tabBar={({ navigation, state, descriptors }) => (
        <BottomNavigation.Bar  
          navigationState={state}  
          safeAreaInsets={insets}  
          onTabPress={({ route, preventDefault }) => {
            const event = navigation.emit({
              type: 'tabPress',
              target: route.key,
              canPreventDefault: true,
            });
            if (event.defaultPrevented) {
              preventDefault();
            } else {
              navigation.dispatch({
                ...CommonActions.navigate(route.name, route.params),
                target: state.key,
              });
            }
          }}
          renderIcon={({ route, focused, color }) =>
            descriptors[route.key].options.tabBarIcon?.({
              focused,
              color,
              size: 24,
            }) ?? null
          }
          getLabelText={({ route }) => {
            const { options } = descriptors[route.key];
            return typeof options.tabBarLabel === 'string'
              ? options.tabBarLabel
              : typeof options.title === 'string'
                ? options.title
                : route.name;
          }}
        />
      )}
    >
      <Tab.Screen
        name="Home"
        component={HomeScreen}
        options={{
          tabBarIcon: ({ color }) => (
            <MaterialCommunityIcons name="home" color={color} size={26} />
          ),
        }}
      />
      <Tab.Screen
        name="Settings"
        component={SettingsScreen}
        options={{
          tabBarIcon: ({ color }) => (
            <MaterialCommunityIcons name="cog" color={color} size={26} />
          ),
        }}
      />
    </Tab.Navigator>
  );
}

```

--------------------------------

### Basic List.Subheader Usage

Source: https://oss.callstack.com/react-native-paper/docs/components/List/ListSubheader

A simple example demonstrating how to import and use the List.Subheader component to display a title in a list.

```javascript
import * as React from 'react';
import { List } from 'react-native-paper';

const MyComponent = () => <List.Subheader>My List Title</List.Subheader>;

export default MyComponent;
```

--------------------------------

### Basic RadioButtonGroup Usage

Source: https://oss.callstack.com/react-native-paper/docs/components/RadioButton/RadioButtonGroup

Demonstrates the fundamental setup of a RadioButtonGroup with two options. Use this to manage a single selection from a predefined list.

```javascript
import * as React from 'react';
import { View } from 'react-native';
import { RadioButton, Text } from 'react-native-paper';

const MyComponent = () => {
  const [value, setValue] = React.useState('first');

  return (
    <RadioButton.Group onValueChange={newValue => setValue(newValue)} value={value}>
      <View>
        <Text>First</Text>
        <RadioButton value="first" />
      </View>
      <View>
        <Text>Second</Text>
        <RadioButton value="second" />
      </View>
    </RadioButton.Group>
  );
};

export default MyComponent;
```

--------------------------------

### Basic Badge Usage

Source: https://oss.callstack.com/react-native-paper/docs/components/Badge

Demonstrates how to import and use the Badge component with text content. Ensure react-native-paper is installed and imported correctly.

```javascript
import * as React from 'react';
import { Badge } from 'react-native-paper';

const MyComponent = () => (
  <Badge>3</Badge>
);

export default MyComponent;
```

--------------------------------

### AnimatedFAB Usage Example

Source: https://oss.callstack.com/react-native-paper/docs/components/FAB/AnimatedFAB

This snippet demonstrates how to use the AnimatedFAB component. It includes logic to extend or collapse the FAB based on scroll position. Ensure necessary imports are included.

```javascript
import React from 'react';
import {
  StyleProp,
  ViewStyle,
  Animated,
  StyleSheet,
  Platform,
  ScrollView,
  Text,
  SafeAreaView,
  I18nManager,
} from 'react-native';
import { AnimatedFAB } from 'react-native-paper';

const MyComponent = ({
  animatedValue,
  visible,
  extended,
  label,
  animateFrom,
  style,
  iconMode,
}) => {
  const [isExtended, setIsExtended] = React.useState(true);

  const isIOS = Platform.OS === 'ios';

  const onScroll = ({ nativeEvent }) => {
    const currentScrollPosition =
      Math.floor(nativeEvent?.contentOffset?.y) ?? 0;

    setIsExtended(currentScrollPosition <= 0);
  };

  const fabStyle = { [animateFrom]: 16 };

  return (
    <SafeAreaView style={styles.container}>
      <ScrollView onScroll={onScroll}>
        {[...new Array(100).keys()].map((_, i) => (
          <Text>{i}</Text>
        ))}
      </ScrollView>
      <AnimatedFAB
        icon={'plus'}
        label={'Label'}
        extended={isExtended}
        onPress={() => console.log('Pressed')}
        visible={visible}
        animateFrom={'right'}
        iconMode={'static'}
        style={[styles.fabStyle, style, fabStyle]}
      />
    </SafeAreaView>
  );
};

export default MyComponent;

const styles = StyleSheet.create({
  container: {
    flexGrow: 1,
  },
  fabStyle: {
    bottom: 16,
    right: 16,
    position: 'absolute',
  },
});
```

--------------------------------

### Publish New Release with release-it

Source: https://oss.callstack.com/react-native-paper/docs/guides/contributing

Run the 'release' script to automate the publishing of a new release. Ensure the GITHUB_TOKEN environment variable is set.

```bash
yarn release

```

--------------------------------

### Basic Portal Usage

Source: https://oss.callstack.com/react-native-paper/docs/components/Portal

Demonstrates how to use the Portal component to render a Text element. Ensure a Portal.Host is rendered in the parent tree, or use the Provider component which includes it.

```javascript
import * as React from 'react';
import { Portal, Text } from 'react-native-paper';

const MyComponent = () => (
  <Portal>
    <Text>This is rendered at a different place</Text>
  </Portal>
);

export default MyComponent;
```

--------------------------------

### Install deepmerge Package with pnpm

Source: https://oss.callstack.com/react-native-paper/docs/guides/theming-with-react-navigation

Installs the `deepmerge` package using pnpm. This utility is helpful for combining theme configurations.

```bash
pnpm add deepmerge

```

--------------------------------

### Install deepmerge Package with Yarn

Source: https://oss.callstack.com/react-native-paper/docs/guides/theming-with-react-navigation

Installs the `deepmerge` package using Yarn. This package is used for merging theme objects.

```bash
yarn add deepmerge

```

--------------------------------

### Basic Appbar.Action Usage

Source: https://oss.callstack.com/react-native-paper/docs/components/Appbar/AppbarAction

Demonstrates how to use Appbar.Action components within an Appbar.Header. It includes importing necessary components and defining icons based on the platform.

```javascript
import * as React from 'react';
import { Appbar } from 'react-native-paper';
import { Platform } from 'react-native';

const MORE_ICON = Platform.OS === 'ios' ? 'dots-horizontal' : 'dots-vertical';

const MyComponent = () => (
  <Appbar.Header>
     <Appbar.Content title="Title" subtitle={'Subtitle'} />
      <Appbar.Action icon="magnify" onPress={() => {}} />
      <Appbar.Action icon={MORE_ICON} onPress={() => {}} />
  </Appbar.Header>
);

export default MyComponent;
```

--------------------------------

### Basic Dialog Usage

Source: https://oss.callstack.com/react-native-paper/docs/components/Dialog

Demonstrates how to implement a basic dialog with a title, content, and actions. Ensure the Dialog is wrapped in a Portal and the app is wrapped in PaperProvider.

```javascript
import * as React from 'react';
import { View } from 'react-native';
import { Button, Dialog, Portal, PaperProvider, Text } from 'react-native-paper';

const MyComponent = () => {
  const [visible, setVisible] = React.useState(false);

  const showDialog = () => setVisible(true);

  const hideDialog = () => setVisible(false);

  return (
    <PaperProvider>
      <View>
        <Button onPress={showDialog}>Show Dialog</Button>
        <Portal>
          <Dialog visible={visible} onDismiss={hideDialog}>
            <Dialog.Title>Alert</Dialog.Title>
            <Dialog.Content>
              <Text variant="bodyMedium">This is simple dialog</Text>
            </Dialog.Content>
            <Dialog.Actions>
              <Button onPress={hideDialog}>Done</Button>
            </Dialog.Actions>
          </Dialog>
        </Portal>
      </View>
    </PaperProvider>
  );
};

export default MyComponent;
```

--------------------------------

### Install deepmerge Package

Source: https://oss.callstack.com/react-native-paper/docs/guides/theming-with-react-navigation

Installs the `deepmerge` package, which is a utility for merging JavaScript objects. This is used to combine themes from React Native Paper and React Navigation.

```bash
npm install deepmerge

```

--------------------------------

### Basic ProgressBar Usage

Source: https://oss.callstack.com/react-native-paper/docs/components/ProgressBar

Demonstrates how to import and use the ProgressBar component with a specific progress value and color.

```javascript
import * as React from 'react';
import { ProgressBar, Palette } from 'react-native-paper';

const MyComponent = () => (
  <ProgressBar progress={0.5} color={Palette.error50} />
);

export default MyComponent;
```

--------------------------------

### Uncontrolled List.AccordionGroup Example

Source: https://oss.callstack.com/react-native-paper/docs/components/List/ListAccordionGroup

This example demonstrates the uncontrolled usage of List.AccordionGroup, where the component manages its own expanded state. Ensure each List.Accordion has a unique `id` prop for proper group functionality.

```javascript
import * as React from 'react';
import { View, Text } from 'react-native';
import { List } from 'react-native-paper';

const MyComponent = () => (
  <List.AccordionGroup>
    <List.Accordion title="Accordion 1" id="1">
      <List.Item title="Item 1" />
    </List.Accordion>
    <List.Accordion title="Accordion 2" id="2">
      <List.Item title="Item 2" />
    </List.Accordion>
    <View>
      <Text>
        List.Accordion can be wrapped because implementation uses React.Context.
      </Text>
      <List.Accordion title="Accordion 3" id="3">
        <List.Item title="Item 3" />
      </List.Accordion>
    </View>
  </List.AccordionGroup>
);

export default MyComponent;
```

--------------------------------

### Basic Switch Usage

Source: https://oss.callstack.com/react-native-paper/docs/components/Switch

Demonstrates how to implement a basic toggle switch with state management. Use this for a simple on/off functionality.

```javascript
import * as React from 'react';
import { Switch } from 'react-native-paper';

const MyComponent = () => {
  const [isSwitchOn, setIsSwitchOn] = React.useState(false);

  const onToggleSwitch = () => setIsSwitchOn(!isSwitchOn);

  return <Switch value={isSwitchOn} onValueChange={onToggleSwitch} />;
};

export default MyComponent;
```

--------------------------------

### Appbar.Header Usage

Source: https://oss.callstack.com/react-native-paper/docs/components/Appbar/AppbarHeader

Example of how to use the Appbar.Header component in a React Native application.

```APIDOC
## Appbar.Header

### Description
A component to use as a header at the top of the screen. It can contain the screen title, controls such as navigation buttons, menu button etc.

### Props

#### dark
Type: `boolean`
Whether the background color is a dark color. A dark header will render light text and vice-versa.

#### statusBarHeight
Type: `number`
Extra padding to add at the top of header to account for translucent status bar. This is automatically handled on iOS >= 11 including iPhone X using `SafeAreaView`. If you are using Expo, we assume translucent status bar and set a height for status bar automatically. Pass `0` or a custom value to disable the default behaviour, and customize the height.

#### children (required)
Type: `React.ReactNode`
Content of the header.

#### mode Available in v5.x with theme version 3
Type: `'small' | 'medium' | 'large' | 'center-aligned'`
Default value: `Platform.OS === 'ios' ? 'center-aligned' : 'small'`
Mode of the Appbar.
  * `small` - Appbar with default height (64).
  * `medium` - Appbar with medium height (112).
  * `large` - Appbar with large height (152).
  * `center-aligned` - Appbar with default height and center-aligned title.

#### elevated Available in v5.x with theme version 3
Type: `boolean`
Default value: `false`
Whether Appbar background should have the elevation along with primary color pigment.

#### theme
Type: `ThemeProp`

#### style
Type: `Animated.WithAnimatedValue<StyleProp<ViewStyle>>`

#### testID
Type: ``
Default value: `'appbar-header'`

### Theme colors
info
The table below outlines the theme colors, specifically for MD3 _(theme version 3)_ at the moment.
mode| backgroundColor  
---|---
default| theme.colors.surface  
elevated| theme.colors.elevation.level2  
tip
If a dedicated prop for a specific color is not available or the `style` prop does not allow color modification, you can customize it using the `theme` prop. It allows to override any color, within the component, based on the table above.
_Example of overriding_`primary` _color:_
`<Appbar.Header theme={{ colors: { primary: 'green' } }} />`
```

--------------------------------

### Basic Menu Usage

Source: https://oss.callstack.com/react-native-paper/docs/components/Menu

Demonstrates how to implement a basic menu with items and a divider. Ensure the component is wrapped in PaperProvider. The menu is controlled by the 'visible' state and anchored to a button.

```javascript
import * as React from 'react';
import { View } from 'react-native';
import { Button, Menu, Divider, PaperProvider } from 'react-native-paper';

const MyComponent = () => {
  const [visible, setVisible] = React.useState(false);

  const openMenu = () => setVisible(true);

  const closeMenu = () => setVisible(false);

  return (
    <PaperProvider>
      <View
        style={{
          paddingTop: 50,
          flexDirection: 'row',
          justifyContent: 'center',
        }}>
        <Menu
          visible={visible}
          onDismiss={closeMenu}
          anchor={<Button onPress={openMenu}>Show menu</Button>}>
          <Menu.Item onPress={() => {}} title="Item 1" />
          <Menu.Item onPress={() => {}} title="Item 2" />
          <Divider />
          <Menu.Item onPress={() => {}} title="Item 3" />
        </Menu>
      </View>
    </PaperProvider>
  );
};

export default MyComponent;
```

--------------------------------

### Basic Avatar.Icon Usage

Source: https://oss.callstack.com/react-native-paper/docs/components/Avatar/AvatarIcon

Demonstrates how to import and use the Avatar.Icon component with a specified size and icon.

```javascript
import * as React from 'react';
import { Avatar } from 'react-native-paper';

const MyComponent = () => (
  <Avatar.Icon size={24} icon="folder" />
);
```

--------------------------------

### Basic Appbar.Content Usage

Source: https://oss.callstack.com/react-native-paper/docs/components/Appbar/AppbarContent

Demonstrates how to use the Appbar.Content component with a simple title within an Appbar.Header. Ensure Appbar and Appbar.Header are imported.

```javascript
import * as React from 'react';
import { Appbar } from 'react-native-paper';

const MyComponent = () => (
  <Appbar.Header>
     <Appbar.Content title="Title" />
  </Appbar.Header>
);

export default MyComponent;
```

--------------------------------

### Customizing Divider Color

Source: https://oss.callstack.com/react-native-paper/docs/components/Divider

Shows how to override the default divider color using the theme prop. This example sets the primary color to green.

```javascript
<Divider theme={{ colors: { primary: 'green' } }} />
```

--------------------------------

### List.Icon Component Usage

Source: https://oss.callstack.com/react-native-paper/docs/components/List/ListIcon

Demonstrates how to import and use the List.Icon component with different icons and colors.

```APIDOC
## List.Icon

A component to show an icon in a list item.

### Usage

```javascript
import * as React from 'react';
import { List, Palette } from 'react-native-paper';

const MyComponent = () => (
  <>
    <List.Icon color={Palette.tertiary70} icon="folder" />
    <List.Icon color={Palette.tertiary70} icon="equal" />
    <List.Icon color={Palette.tertiary70} icon="calendar" />
  </>
);

export default MyComponent;
```

### Props

#### icon (required)

*   **Type**: `IconSource`
*   **Description**: Icon to show.

#### color

*   **Type**: `ColorValue`
*   **Description**: Color for the icon.

#### style

*   **Type**: `StyleProp<ViewStyle>`

#### theme

*   **Type**: `ThemeProp`
```

--------------------------------

### Basic Searchbar Usage

Source: https://oss.callstack.com/react-native-paper/docs/components/Searchbar

This snippet demonstrates how to use the Searchbar component with basic functionality. It requires importing React and Searchbar, and managing the search query state.

```jsx
import * as React from 'react';
import { Searchbar } from 'react-native-paper';

const MyComponent = () => {
  const [searchQuery, setSearchQuery] = React.useState('');

  return (
    <Searchbar
      placeholder="Search"
      onChangeText={setSearchQuery}
      value={searchQuery}
    />
  );
};

export default MyComponent;
```

--------------------------------

### Basic List.Icon Usage

Source: https://oss.callstack.com/react-native-paper/docs/components/List/ListIcon

Demonstrates how to use the List.Icon component to display multiple icons with a specified color. Ensure you have imported React, List, and Palette.

```javascript
import * as React from 'react';
import { List, Palette } from 'react-native-paper';

const MyComponent = () => (
  <>
    <List.Icon color={Palette.tertiary70} icon="folder" />
    <List.Icon color={Palette.tertiary70} icon="equal" />
    <List.Icon color={Palette.tertiary70} icon="calendar" />
  </>
);

export default MyComponent;
```

--------------------------------

### Basic List.Section Usage

Source: https://oss.callstack.com/react-native-paper/docs/components/List/ListSection

Demonstrates how to import and use the List.Section component to group multiple List.Item components. Includes a List.Subheader for section titling and List.Icon for item icons.

```javascript
import * as React from 'react';
import { List, Palette } from 'react-native-paper';

const MyComponent = () => (
  <List.Section>
    <List.Subheader>Some title</List.Subheader>
    <List.Item title="First Item" left={() => <List.Icon icon="folder" />} />
    <List.Item
      title="Second Item"
      left={() => <List.Icon color={Palette.tertiary70} icon="folder" />}
    />
  </List.Section>
);

export default MyComponent;
```

--------------------------------

### Basic Card.Cover Usage

Source: https://oss.callstack.com/react-native-paper/docs/components/Card/CardCover

Demonstrates how to import and use the Card.Cover component within a Card to display an image. Ensure you have React and React Native Paper installed.

```javascript
import * as React from 'react';
import { Card } from 'react-native-paper';

const MyComponent = () => (
  <Card>
    <Card.Cover source={{ uri: 'https://picsum.photos/700' }} />
  </Card>
);

export default MyComponent;
```

--------------------------------

### Basic Avatar.Image Usage

Source: https://oss.callstack.com/react-native-paper/docs/components/Avatar/AvatarImage

Demonstrates how to import and use the Avatar.Image component with a specified size and image source. Ensure you have react-native-paper installed and the image file is accessible.

```javascript
import * as React from 'react';
import { Avatar } from 'react-native-paper';

const MyComponent = () => (
  <Avatar.Image size={24} source={require('../assets/avatar.png')} />
);
export default MyComponent
```

--------------------------------

### Appbar Usage

Source: https://oss.callstack.com/react-native-paper/docs/components/Appbar

Demonstrates how to use the Appbar component for both top and bottom bars, including actions and content.

```APIDOC
## Appbar Component Documentation

### Description
The Appbar component is used to display action items in a bar, which can be placed at the top or bottom of the screen. The top bar typically includes the screen title and controls like navigation or menu buttons, while the bottom bar provides access to a drawer and up to four actions.

### Usage Examples

#### Top Bar
```javascript
import * as React from 'react';
import { Appbar } from 'react-native-paper';

const MyComponent = () => (
  <Appbar.Header>
    <Appbar.BackAction onPress={() => {}} />
    <Appbar.Content title="Title" />
    <Appbar.Action icon="calendar" onPress={() => {}} />
    <Appbar.Action icon="magnify" onPress={() => {}} />
  </Appbar.Header>
);

export default MyComponent;
```

#### Bottom Bar
```javascript
import * as React from 'react';
import { StyleSheet } from 'react-native';
import { Appbar, FAB, useTheme } from 'react-native-paper';
import { useSafeAreaInsets } from 'react-native-safe-area-context';

const BOTTOM_APPBAR_HEIGHT = 80;
const MEDIUM_FAB_HEIGHT = 56;

const MyComponent = () => {
  const { bottom } = useSafeAreaInsets();
  const theme = useTheme();

  return (
    <Appbar
      style={[
        styles.bottom,
        {
          height: BOTTOM_APPBAR_HEIGHT + bottom,
          backgroundColor: theme.colors.surfaceContainer,
        },
      ]}
      safeAreaInsets={{ bottom }}
    >
      <Appbar.Action icon="archive" onPress={() => {}} />
      <Appbar.Action icon="email" onPress={() => {}} />
      <Appbar.Action icon="label" onPress={() => {}} />
      <Appbar.Action icon="delete" onPress={() => {}} />
      <FAB
        mode="flat"
        size="medium"
        icon="plus"
        onPress={() => {}}
        style={[styles.fab, { top: (BOTTOM_APPBAR_HEIGHT - MEDIUM_FAB_HEIGHT) / 2 }]}/>
    </Appbar>
  );
};

const styles = StyleSheet.create({
  bottom: {
    backgroundColor: 'aquamarine',
    position: 'absolute',
    left: 0,
    right: 0,
    bottom: 0,
  },
  fab: {
    position: 'absolute',
    right: 16,
  },
});

export default MyComponent;
```

### Props

- **dark** (boolean): Whether the background color is a dark color. A dark appbar will render light text and vice-versa.
- **children** (React.ReactNode): Required. Content of the `Appbar`.
- **mode** (string): Available in v5.x with theme version 3. Default value: `'small'`. Available options: `'small'`, `'medium'`, `'large'`, `'center-aligned'`.
  - `small`: Appbar with default height (64).
  - `medium`: Appbar with medium height (112).
  - `large`: Appbar with large height (152).
  - `center-aligned`: Appbar with default height and center-aligned title.
- **elevated** (boolean): Available in v5.x with theme version 3. Whether Appbar background should have the elevation along with primary color pigment.
- **safeAreaInsets** ({ bottom?: number; top?: number; left?: number; right?: number; }): Safe area insets for the Appbar. This can be used to avoid elements like the navigation bar on Android and bottom safe area on iOS.
- **theme** (ThemeProp): Theme configuration for the Appbar.
- **style** (Animated.WithAnimatedValue<StyleProp<ViewStyle>>): Custom styles for the Appbar.

### Theme Colors (MD3)

| mode | backgroundColor |
|---|---|
| default | theme.colors.surface |
| elevated | theme.colors.elevation.level2 |

**Note:** If a dedicated prop for a specific color is not available or the `style` prop does not allow color modification, you can customize it using the `theme` prop. For example, to override the `primary` color: `<Appbar theme={{ colors: { primary: 'green' } }} />`.
```

--------------------------------

### Basic Portal.Host Usage

Source: https://oss.callstack.com/react-native-paper/docs/components/Portal/PortalHost

Wrap your application's root component or a specific section with Portal.Host to enable portal rendering. This is useful for components like Modals or Snackbars that need to appear above other content. If you are using the Provider component, it already includes Portal.Host, so manual inclusion might be redundant.

```javascript
import * as React from 'react';
import { Text } from 'react-native';
import { Portal } from 'react-native-paper';

const MyComponent = () => (
  <Portal.Host>
    <Text>Content of the app</Text>
  </Portal.Host>
);

export default MyComponent;
```

--------------------------------

### Customize Ripple Effect Color

Source: https://oss.callstack.com/react-native-paper/docs/guides/ripple-effect

Set the ripple color for a specific component using the `rippleColor` prop. This example shows how to set a semi-transparent red ripple for a Button.

```jsx
<Button  
  rippleColor="#FF000020"  
  icon="camera"  
  mode="contained"  
  onPress={() => console.log('Pressed')}>  
  Press me  
</Button>  

```