### Start Local Development Server

Source: https://github.com/callstack/react-native-paper/blob/main/docs/README.md

Starts a local development server for live preview. Changes are reflected without server restart.

```bash
yarn start
```

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

### Start Expo Web Server

Source: https://github.com/callstack/react-native-paper/blob/main/docs/docs/guides/05-react-native-web.md

Command to start the development server for web applications when using Expo.

```bash
npx expo start --web
```

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

### Install Dependencies

Source: https://github.com/callstack/react-native-paper/blob/main/docs/README.md

Installs project dependencies using Yarn.

```bash
yarn
```

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

### Install React Native Paper

Source: https://github.com/callstack/react-native-paper/blob/main/docs/docs/guides/01-getting-started.mdx

Install the main React Native Paper library using npm or yarn.

```bash
npm install react-native-paper
```

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

### Basic Stack Navigator Setup

Source: https://github.com/callstack/react-native-paper/blob/main/docs/docs/guides/09-react-navigation.md

This snippet shows the initial setup of a Stack Navigator in React Navigation, where a custom header component is specified.

```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>
  );
}
```

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

### Basic Setup with PaperProvider

Source: https://github.com/callstack/react-native-paper/blob/main/docs/docs/guides/01-getting-started.mdx

Wrap your root component with `PaperProvider` to provide theme and context to all components. This is typically done in your `index.js` or `App.js` file.

```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);
```

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

### Install Dependencies for Expo

Source: https://github.com/callstack/react-native-paper/blob/main/docs/docs/guides/01-getting-started.mdx

Install core dependencies required for React Native Paper when using Expo.

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

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

### Basic React Navigation Stack Setup

Source: https://github.com/callstack/react-native-paper/blob/main/docs/docs/guides/09-react-navigation.md

Sets up a basic stack navigator with two screens, 'Home' and 'Details', using React Navigation. Ensure 'react-native-gesture-handler' is imported first.

```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 Web Dependencies with Expo

Source: https://github.com/callstack/react-native-paper/blob/main/docs/docs/guides/05-react-native-web.md

Install necessary packages 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 Material Design Icons for Community CLI

Source: https://github.com/callstack/react-native-paper/blob/main/docs/docs/guides/01-getting-started.mdx

Install the Material Design Icons package, which is required for certain components when using the Community CLI.

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

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

### App Entry Point with Theme Provider

Source: https://github.com/callstack/react-native-paper/blob/main/docs/docs/guides/08-theming-with-react-navigation.md

Wrap your entire application with PreferencesContext.Provider and PaperProvider to make theme values accessible globally. This setup allows for dynamic theme switching.

```javascript
import React from 'react';
import { PreferencesContext } from './PreferencesContext';

const Stack = createStackNavigator();

export default function App() {
  const [isThemeDark, setIsThemeDark] = React.useState(false);

  let theme = isThemeDark ? CombinedDarkTheme : CombinedDefaultTheme;

  const toggleTheme = React.useCallback(() => {
    return setIsThemeDark(!isThemeDark);
  }, [isThemeDark]);

  const preferences = React.useMemo(
    () => ({
      toggleTheme,
      isThemeDark,
    }),
    [toggleTheme, isThemeDark]
  );

  return (
    // Context is wired into the local state of our main component, so that its values could be propagated throughout the entire application
    <PreferencesContext.Provider value={preferences}>
      <PaperProvider theme={theme}>
        <NavigationContainer theme={theme}>
          <Stack.Navigator initialRouteName="Home">
            <Stack.Screen name="Home" component={HomeScreen} />
            <Stack.Screen name="Details" component={DetailsScreen} />
          </Stack.Navigator>
        </NavigationContainer>
      </PaperProvider>
    </PreferencesContext.Provider>
  );
}
```

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

### Install Dependencies for Community CLI

Source: https://github.com/callstack/react-native-paper/blob/main/docs/docs/guides/01-getting-started.mdx

Install core dependencies required for React Native Paper when using the React Native Community CLI.

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

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

### Wrapping Root Component with PaperProvider

Source: https://github.com/callstack/react-native-paper/blob/main/docs/docs/guides/09-react-navigation.md

Ensure your application's root component is wrapped with PaperProvider for the Menu component to function correctly. This setup is essential for theme and context management.

```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>
```

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

### Testing a Specific Pull Request/Commit

Source: https://github.com/callstack/react-native-paper/blob/main/CONTRIBUTING.md

To test changes from a pull request or commit, specify the git commit hash or branch in your project's `package.json` under `dependencies`. After updating, run `yarn install` or `npm install`.

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

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

### Import Button Component

Source: https://github.com/callstack/react-native-paper/blob/main/docs/src/pages/index.mdx

Import the Button component from 'react-native-paper' to use it in your application. This is a basic setup step.

```javascript
import {Button} from 'react-native-paper';
```

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

### Custom Icon Component Setup

Source: https://github.com/callstack/react-native-paper/wiki/Migration-guide-for-3.0

Configure PaperProvider to use a custom icon component, such as FontAwesome from react-native-vector-icons.

```javascript
import AwesomeIcon from 'react-native-vector-icons/FontAwesome';
// ...

      <PaperProvider
        settings={{
          icon: props => <AwesomeIcon {...props} />,
        }}>
        // ...
      </PaperProvider>
```

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

### Material Design 3 Display Font Variants

Source: https://github.com/callstack/react-native-paper/blob/main/docs/docs/guides/04-fonts.md

Configuration examples for display font variants (displaySmall, displayMedium, displayLarge) in Material Design 3. These define the font family, size, weight, and spacing.

```json
"displaySmall": {
  "fontFamily": "Font",
  "fontSize": 36,
  "fontWeight": "400",
  "letterSpacing": 0,
  "lineHeight": 44,
}
```

```json
"displayMedium": {
  "fontFamily": "Font",
  "fontSize": 45,
  "fontWeight": "400",
  "letterSpacing": 0,
  "lineHeight": 52,
}
```

```json
"displayLarge": {
  "fontFamily": "Font",
  "fontSize": 57,
  "fontWeight": "400",
  "letterSpacing": 0,
  "lineHeight": 64,
}
```

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

### Conventional Commits Specification

Source: https://github.com/callstack/react-native-paper/blob/main/CONTRIBUTING.md

Follows the conventional commits specification for commit messages. Examples include 'fix: bug fixes', 'feat: new features', 'refactor: code refactor', 'docs: documentation changes', 'test: adding or updating tests', 'chore: tooling changes', and 'BREAKING CHANGE: changes that break existing usage'.

```markdown
- `fix`: bug fixes, e.g. fix Button color on DarkTheme.
- `feat`: new features, e.g. add Snackbar component.
- `refactor`: code refactor, e.g. new folder structure for components.
- `docs`: changes into documentation, e.g. add usage example for Button.
- `test`: adding or updating tests, eg unit, snapshot testing.
- `chore`: tooling changes, e.g. change circleci config.
- `BREAKING CHANGE`: for changes that break existing usage, e.g. change API of a component.
```

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

### Basic App Structure with PaperProvider and NavigationContainer

Source: https://github.com/callstack/react-native-paper/blob/main/docs/docs/guides/08-theming-with-react-navigation.md

Set up the application entry point using `PaperProvider` for React Native Paper and `NavigationContainer` for React Navigation. This ensures both libraries function correctly and themes can be applied.

```javascript
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { TouchableOpacity } from 'react-native';
import {
  Card,
  Text,
  List,
  PaperProvider,
} from 'react-native-paper';

const Stack = createNativeStackNavigator();

const HomeScreen = ({ navigation }) => (
  <TouchableOpacity
    onPress={() =>
      navigation?.push('Details', {
        title,
        content,
      })
    }
  >
    <Card>
      <Card.Content>
        <Text variant="titleLarge">{title}</Text>
        <Text variant="bodyMedium">{content}</Text>
      </Card.Content>
    </Card>
  </TouchableOpacity>
);

const DetailsScreen = (props) => {
  const { title, content } = props?.route?.params;
  return (
    <List.Section>
      <List.Subheader>{title}</List.Subheader>
      <List.Item title={content} />
    </List.Section>
  );
};

export default function App() {
  return (
    <PaperProvider>
      <NavigationContainer>
        <Stack.Navigator initialRouteName="Home">
          <Stack.Screen name="Home" component={HomeScreen} />
          <Stack.Screen name="Details" component={DetailsScreen} />
        </Stack.Navigator>
      </NavigationContainer>
    </PaperProvider>
  );
}
```

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

### Build Static Website

Source: https://github.com/callstack/react-native-paper/blob/main/docs/README.md

Generates static website content into the 'build' directory for hosting.

```bash
yarn build
```

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

### Deploy Website (SSH)

Source: https://github.com/callstack/react-native-paper/blob/main/docs/README.md

Deploys the website using SSH, typically for GitHub Pages hosting.

```bash
USE_SSH=true yarn deploy
```

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

### Deploy Website (No SSH)

Source: https://github.com/callstack/react-native-paper/blob/main/docs/README.md

Deploys the website without SSH, requiring a GitHub username.

```bash
GIT_USER=<Your GitHub username> yarn deploy
```

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

### React Navigation Bottom Tab Navigator with BottomNavigation.Bar

Source: https://github.com/callstack/react-native-paper/blob/main/docs/docs/guides/09-bottom-navigation.md

Use this snippet to integrate BottomNavigation.Bar with createBottomTabNavigator. Ensure you have installed `@react-navigation/native` and `@react-navigation/bottom-tabs`.

```jsx
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>
  );
}

```

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

### Use Icon Name with Button

Source: https://github.com/callstack/react-native-paper/blob/main/docs/docs/guides/03-icons.mdx

Pass the name of an icon from MaterialDesignIcons to the `icon` prop of a component like `Button` to display it. Ensure `react-native-vector-icons` is installed and linked.

```javascript
<Button icon="camera">Press me</Button>
```

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

### Configure Flow for Typechecking

Source: https://github.com/callstack/react-native-paper/blob/main/docs/docs/guides/01-getting-started.mdx

Add necessary module file extensions to your .flowconfig for proper typechecking with Flow.

```ini
module.file_ext=.js
module.file_ext=.native.js
module.file_ext=.android.js
module.file_ext=.ios.js
```

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

### Publishing a New Release

Source: https://github.com/callstack/react-native-paper/blob/main/CONTRIBUTING.md

To publish a new release, ensure you have publish access to the NPM package and a `GITHUB_TOKEN` environment variable is set. Run the `yarn release` command from the main branch.

```sh
yarn release
```

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

### Customize Ripple Effect Color

Source: https://github.com/callstack/react-native-paper/blob/main/docs/docs/guides/11-ripple-effect.md

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

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

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

### Material Design 3 Body Font Variants

Source: https://github.com/callstack/react-native-paper/blob/main/docs/docs/guides/04-fonts.md

Configuration examples for body font variants (bodySmall, bodyMedium, bodyLarge) in Material Design 3. These define the font family, size, weight, and spacing.

```json
"bodySmall": {
  "fontFamily": "Font",
  "fontSize": 12,
  "fontWeight": "400",
  "letterSpacing": 0.4,
  "lineHeight": 16,
}
```

```json
"bodyMedium": {
  "fontFamily": "Font",
  "fontSize": 14,
  "fontWeight": "400",
  "letterSpacing": 0.25,
  "lineHeight": 20,
}
```

```json
"bodyLarge": {
  "fontFamily": "Font",
  "fontSize": 16,
  "fontWeight": "400",
  "letterSpacing": 0.15,
  "lineHeight": 24,
}
```

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

### Create Preferences Context

Source: https://github.com/callstack/react-native-paper/blob/main/docs/docs/guides/08-theming-with-react-navigation.md

Define a React Context to manage theme preferences, including a toggle function and a boolean indicating the current theme's darkness.

```javascript
import React from 'react';

export const PreferencesContext = React.createContext({
  toggleTheme: () => {},
  isThemeDark: false,
});
```

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

### Material Design 3 Title Font Variants

Source: https://github.com/callstack/react-native-paper/blob/main/docs/docs/guides/04-fonts.md

Configuration examples for title font variants (titleSmall, titleMedium, titleLarge) in Material Design 3. These define the font family, size, weight, and spacing.

```json
"titleSmall": {
  "fontFamily": "Font",
  "fontSize": 14,
  "fontWeight": "500",
  "letterSpacing": 0.1,
  "lineHeight": 20,
}
```

```json
"titleMedium": {
  "fontFamily": "Font",
  "fontSize": 16,
  "fontWeight": "500",
  "letterSpacing": 0.15,
  "lineHeight": 24,
}
```

```json
"titleLarge": {
  "fontFamily": "Font",
  "fontSize": 22,
  "fontWeight": "400",
  "letterSpacing": 0,
  "lineHeight": 28,
}
```

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

### Wrap Root Component with PaperProvider

Source: https://github.com/callstack/react-native-paper/blob/main/docs/docs/guides/02-theming.mdx

Wrap your root component with `PaperProvider` to enable custom theming throughout your application. By default, it applies the Material You theme (MD3).

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

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

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

### Material Design 3 Label Font Variants

Source: https://github.com/callstack/react-native-paper/blob/main/docs/docs/guides/04-fonts.md

Configuration examples for label font variants (labelSmall, labelMedium, labelLarge) in Material Design 3. These define the font family, size, weight, and spacing.

```json
"labelSmall": {
  "fontFamily": "Font",
  "fontSize": 11,
  "fontWeight": "500",
  "letterSpacing": 0.5,
  "lineHeight": 16,
}
```

```json
"labelMedium": {
  "fontFamily": "Font",
  "fontSize": 12,
  "fontWeight": "500",
  "letterSpacing": 0.5,
  "lineHeight": 16,
}
```

```json
"labelLarge": {
  "fontFamily": "Font",
  "fontSize": 14,
  "fontWeight": "500",
  "letterSpacing": 0.1,
  "lineHeight": 20,
}
```

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

### Screen Components for React Navigation

Source: https://github.com/callstack/react-native-paper/blob/main/docs/docs/guides/09-react-navigation.md

Defines the basic 'HomeScreen' and 'DetailsScreen' components. These are placeholder views that will be rendered by the stack navigator.

```javascript
import React from 'react';
import {View, Text, Button, StyleSheet} from 'react-native';

function HomeScreen() {
  return (
    <View style={style.container}>
      <Text>Home Screen</Text>
    </View>
  );
}

function DetailsScreen() {
  return (
    <View style={style.container}>
      <Text>Details Screen</Text>
    </View>
  );
}

const style = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});
```

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

### Define Assets Directory for Fonts

Source: https://github.com/callstack/react-native-paper/blob/main/docs/docs/guides/04-fonts.md

Configure your project's metro bundler to recognize the directory containing your font files. Ensure the path is correctly specified.

```js
module.exports = {
  ... 
  assets: [
    './assets/fonts'
  ],
}
```

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

### Material Design 3 Headline Font Variants

Source: https://github.com/callstack/react-native-paper/blob/main/docs/docs/guides/04-fonts.md

Configuration examples for headline font variants (headlineSmall, headlineMedium, headlineLarge) in Material Design 3. These define the font family, size, weight, and spacing.

```json
"headlineSmall": {
  "fontFamily": "Font",
  "fontSize": 24,
  "fontWeight": "400",
  "letterSpacing": 0,
  "lineHeight": 32,
}
```

```json
"headlineMedium": {
  "fontFamily": "Font",
  "fontSize": 28,
  "fontWeight": "400",
  "letterSpacing": 0,
  "lineHeight": 36,
}
```

```json
"headlineLarge": {
  "fontFamily": "Font",
  "fontSize": 32,
  "fontWeight": "400",
  "letterSpacing": 0,
  "lineHeight": 40,
}
```

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

### Customizing Theme with PaperProvider

Source: https://github.com/callstack/react-native-paper/blob/main/docs/docs/guides/01-getting-started.mdx

Provide a custom theme object to `PaperProvider` to override default colors and other theme properties. Use `MD3LightTheme` as a base for Material Design 3 themes.

```javascript
import * as React from 'react';
import {
  MD3LightTheme as DefaultTheme,
  PaperProvider,
} from 'react-native-paper';
import App from './src/App';

const theme = {
  ...DefaultTheme,
  colors: {
    ...DefaultTheme.colors,
    primary: 'tomato',
    secondary: 'yellow',
  },
};

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

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

### Customize All Instances of a Component

Source: https://github.com/callstack/react-native-paper/blob/main/docs/docs/guides/02-theming.mdx

Style a component globally without altering the theme's global properties by creating a wrapper component with specific theme overrides.

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

export default function FancyButton(props) {
  return (
    <Button
      theme={{ typescale: { labelLarge: { letterSpacing: 1 } } }}
      {...props}
    />
  );
}
```

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

### Use Render Function for Icon

Source: https://github.com/callstack/react-native-paper/blob/main/docs/docs/guides/03-icons.mdx

Provide a function to the `icon` prop that returns a React element. This function receives `size` and `color` arguments. Ensure the returned element's size is appropriate.

```javascript
<Button
  icon={({ size, color }) => (
    <Image
      source={require('../assets/chameleon.jpg')}
      style={{ width: size, height: size, tintColor: color }}
    />
  )}
>
  Press me
</Button>
```

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

### Wrap Dialog in Portal for consistent rendering

Source: https://github.com/callstack/react-native-paper/wiki/Migration-guide-for-2.0

Modal-like components no longer render on top by default. Wrap components like `Dialog` in `Portal` to maintain previous behavior.

```javascript
<Dialog
  visible={this.state.visible}
  onDismiss={this._hideDialog}>
  ...
</Dialog>
```

```javascript
<Portal>
  <Dialog
    visible={this.state.visible}
    onDismiss={this._hideDialog}>
    ...
  </Dialog>
</Portal>
```

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

### Configure Custom Icons with PaperProvider

Source: https://github.com/callstack/react-native-paper/blob/main/docs/docs/guides/03-icons.mdx

To use icons from libraries other than MaterialDesignIcons, import them and pass a render function to the `icon` prop within the `settings` of `PaperProvider`.

```javascript
import AwesomeIcon from '@react-native-vector-icons/fontawesome';
// ...

<PaperProvider
  settings={{
    icon: (props) => <AwesomeIcon {...props} />,
  }}
  theme={this.state.theme}
>
  // ...
</PaperProvider>
```

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

### Update Paper import to Surface

Source: https://github.com/callstack/react-native-paper/wiki/Migration-guide-for-2.0

The 'Paper' component has been renamed to 'Surface'. Update your import statements accordingly.

```javascript
import { Paper } from 'react-native-paper';
```

```javascript
import { Surface } from 'react-native-paper';
```

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

### Combine React Navigation and React Native Paper Themes with Vanilla JS

Source: https://github.com/callstack/react-native-paper/blob/main/docs/docs/guides/08-theming-with-react-navigation.md

Combine Material Design 3 themes from React Native Paper with adapted React Navigation themes using vanilla JavaScript object spreading. This method achieves a unified theme without external libraries like `deepmerge`.

```javascript
const { LightTheme, DarkTheme } = adaptNavigationTheme({
  reactNavigationLight: NavigationDefaultTheme,
  reactNavigationDark: NavigationDarkTheme,
});

const CombinedDefaultTheme = {
  ...MD3LightTheme,
  ...LightTheme,
  colors: {
    ...MD3LightTheme.colors,
    ...LightTheme.colors,
  },
};
const CombinedDarkTheme = {
  ...MD3DarkTheme,
  ...DarkTheme,
  colors: {
    ...MD3DarkTheme.colors,
    ...DarkTheme.colors,
  },
};
```

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

### Configure Babel for Expo Production Optimization

Source: https://github.com/callstack/react-native-paper/blob/main/docs/docs/guides/01-getting-started.mdx

Configure babel.config.js for Expo projects to include the react-native-paper/babel plugin for production bundle size optimization.

```javascript
module.exports = function (api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    env: {
      production: {
        plugins: ['react-native-paper/babel'],
      },
    },
  };
};
```

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

### Migrate Chip onDelete prop to onClose

Source: https://github.com/callstack/react-native-paper/wiki/Migration-guide-for-2.0

The `onDelete` prop of the `Chip` component was renamed to `onClose`. Update your code accordingly.

```javascript
<Chip icon="info" onPress={this._handlePress} onDelete={this._handleDelete}>
  Example Chip
</Chip>
```

```javascript
<Chip icon="info" onPress={this._handlePress} onClose={this._handleDelete}>
  Example Chip
</Chip>
```

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

### Use Local Image Source with Button

Source: https://github.com/callstack/react-native-paper/blob/main/docs/docs/guides/03-icons.mdx

Use a local image as an icon by passing a `require` statement to the `icon` prop. The component might adjust the image's color.

```javascript
<Button icon={require('../assets/chameleon.jpg')}>Press me</Button>
```

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

### Update SearchBar import to Searchbar

Source: https://github.com/callstack/react-native-paper/wiki/Migration-guide-for-2.0

Replace the import statement for 'SearchBar' with 'Searchbar' to use the new component name.

```javascript
import { SearchBar } from 'react-native-paper';
```

```javascript
import { Searchbar } from 'react-native-paper';
```

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

### Configure Babel for Production Optimization

Source: https://github.com/callstack/react-native-paper/blob/main/docs/docs/guides/01-getting-started.mdx

Add the react-native-paper/babel plugin to your babel.config.js for production environments to optimize bundle size by excluding unused modules.

```javascript
module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  env: {
    production: {
      plugins: ['react-native-paper/babel'],
    },
  },
};
```

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

### Migrate TextInput to use mode prop for outline appearance

Source: https://github.com/callstack/react-native-paper/wiki/Migration-guide-for-2.0

The `TextInput` component now includes a `mode` prop. Add `mode="outline"` to use the outline appearance.

```javascript
<TextInput
  label="Email"
  value={this.state.text}
  onChangeText={text => this.setState({ text })}
/>
```

```javascript
<TextInput
  mode="outline"
  label="Email"
  value={this.state.text}
  onChangeText={text => this.setState({ text })}
/>
```

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

### Link Assets for React Native < 0.69

Source: https://github.com/callstack/react-native-paper/blob/main/docs/docs/guides/04-fonts.md

Use this command to link font assets for older versions of React Native.

```sh
npx react-native link
```

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

### Migrate Snackbar duration static to milliseconds

Source: https://github.com/callstack/react-native-paper/wiki/Migration-guide-for-2.0

The duration statics in Snackbar were changed. Migrate to new values or pass milliseconds directly to keep the old behavior.

```javascript
<Snackbar visible={this.state.visible} duration={Snackbar.DURATION_SHORT}>Hey there</Snackbar>
```

```javascript
<Snackbar visible={this.state.visible} duration={2500}>Hey there</Snackbar>
```

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

### Syncing Dynamic Colors with System

Source: https://github.com/callstack/react-native-paper/blob/main/docs/docs/guides/02-theming.mdx

Utilize `DynamicLightTheme` and `DynamicDarkTheme` to automatically sync your app's colors with Android's system palette. This requires Android 12 (API 31+).

```tsx
import { useColorScheme } from 'react-native';
import {
  DynamicDarkTheme,
  DynamicLightTheme,
  PaperProvider,
} from 'react-native-paper';
import App from './src/App';

export default function Main() {
  const isDarkMode = useColorScheme() === 'dark';

  return (
    <PaperProvider theme={isDarkMode ? DynamicDarkTheme : DynamicLightTheme}>
      <App />
    </PaperProvider>
  );
}
```

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

### Header Component with Theme Switch

Source: https://github.com/callstack/react-native-paper/blob/main/docs/docs/guides/08-theming-with-react-navigation.md

Integrate a Switch component into your header to allow users to toggle between light and dark themes. This component uses PreferencesContext to access and update the theme state.

```javascript
import React from 'react';
import { useTheme, Appbar, TouchableRipple, Switch } from 'react-native-paper';
import { PreferencesContext } from './PreferencesContext';

const Header = ({ scene }) => {
  const theme = useTheme();
  const { toggleTheme, isThemeDark } = React.useContext(PreferencesContext);

  return (
    <Appbar.Header
      theme={{
        colors: {
          primary: theme?.colors.surface,
        },
      }}
    >
      <Appbar.Content title={scene.route?.name} />
        <Switch
          color={'red'}
          value={isThemeDark}
          onValueChange={toggleTheme}
        />
    </Appbar.Header>
  );
};
```

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

### Applying Custom Color Schemes

Source: https://github.com/callstack/react-native-paper/blob/main/docs/docs/guides/02-theming.mdx

Pass your generated color scheme to the `colors` property within the `theme` object to customize the app's appearance.

```jsx
import * as React from 'react';
import {
  MD3LightTheme as DefaultTheme,
  PaperProvider,
} from 'react-native-paper';
import App from './src/App';

const theme = {
  ...DefaultTheme,
  colors: yourGeneratedLightOrDarkScheme.colors, // Copy it from the color codes scheme and then use it here
};

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

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

### Link Assets for React Native >= 0.69

Source: https://github.com/callstack/react-native-paper/blob/main/docs/docs/guides/04-fonts.md

Use this command to link font assets for React Native versions 0.69 and above.

```sh
npx react-native-asset
```

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

### Integrating PaperProvider with Redux

Source: https://github.com/callstack/react-native-paper/blob/main/docs/docs/guides/01-getting-started.mdx

When using other providers like Redux, ensure `PaperProvider` is wrapped outside of them to make the library's context available within modals.

```javascript
import * as React from 'react';
import { PaperProvider } from 'react-native-paper';
import { Provider as StoreProvider } from 'react-redux';
import App from './src/App';
import store from './store';

export default function Main() {
  return (
    <StoreProvider store={store}>
      <PaperProvider>
        <App />
      </PaperProvider>
    </StoreProvider>
  );
}
```

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

### Navigate to Details Screen from Home

Source: https://github.com/callstack/react-native-paper/blob/main/docs/docs/guides/09-react-navigation.md

Modifies the 'HomeScreen' to include a React Native Paper Button that navigates to the 'Details' screen using the 'navigation' prop. Requires 'react-native-paper' Button import.

```javascript
import { Button } from 'react-native-paper';

function HomeScreen({ navigation }) {
  return (
    <View style={style.container}>
      <Text>Home Screen</Text>
      <Button mode="contained" onPress={() => navigation.navigate('Details')}>
        Go to details
      </Button>
    </View>
  );
}

const style = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});
```

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

### Define a Custom Font Variant

Source: https://github.com/callstack/react-native-paper/blob/main/docs/docs/guides/04-fonts.md

Use the `configureFonts` helper to define a new font variant by passing a `fontConfig` object with the custom variant name and its properties. This is useful for creating unique text styles.

```javascript
import * as React from 'react';
import { configureFonts, MD3LightTheme, PaperProvider } from 'react-native-paper';
import App from './src/App';

const fontConfig = {
  customVariant: {
    fontFamily: Platform.select({
      web: 'Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif',
      ios: 'System',
      default: 'sans-serif',
    }),
    fontWeight: '400',
    letterSpacing: 0.5,
    lineHeight: 22,
    fontSize: 20,
  }
};

const theme = {
  ...MD3LightTheme,
  fonts: configureFonts({config: fontConfig}),
};

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

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

### Migrate List.Item icon and avatar props to left and right props

Source: https://github.com/callstack/react-native-paper/wiki/Migration-guide-for-2.0

When `List.Item` uses both `icon` and `avatar` props, replace them with `left` for the avatar image and `right` for the icon.

```javascript
<ListSection.Item
  icon="event"
  avatar={
    <Image
      source={require('../assets/avatar.png')}
      style={styles.avatar}
    />
  }
  title="Some title"
  description="Some description"
/>
```

```javascript
<ListSection.Item
  left={() =>
    <Image
      source={require('../assets/email-icon.png')}
      style={styles.avatar}
    />
  }
  right={props => <ListSection.Icon {...props} icon="event" />}
  title="Some title"
  description="Some description"
/>
```

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

### Extending React Native Paper Theme

Source: https://github.com/callstack/react-native-paper/blob/main/docs/docs/guides/02-theming.mdx

Learn how to extend the default theme by adding custom properties or modifying existing ones. This snippet shows how to merge custom properties into the theme object and pass it to PaperProvider.

```javascript
import * as React from 'react';
import {
  MD3LightTheme as DefaultTheme,
  PaperProvider,
} from 'react-native-paper';
import App from './src/App';

const theme = {
  ...DefaultTheme,
  // Specify custom property
  myOwnProperty: true,
  // Specify custom property in nested object
  colors: {
    ...DefaultTheme.colors,
    myOwnColor: '#BADA55',
  },
};

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