React Native Paper

https://oss.callstack.com/react-native-paper/
Admin
React Native Paper is a Material Design component library for React Native that provides a set of...
Tokens:120,567
Snippets:1,218
Trust Score:10
Update:15 hours ago
Show doc for...
Tokens:
Raw
### Install webpack for custom setup

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

Install webpack, webpack-cli, and webpack-dev-server as dev dependencies for a custom webpack setup.

```bash
npm install --save-dev webpack webpack-cli webpack-dev-server
```

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

### Initial PaperProvider wrapper

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

The starting code in the root component after following the getting started guide. It wraps the app with PaperProvider.

```jsx
<PaperProvider>
  <App />
</PaperProvider>
```

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

### navigationState example

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

Example of the navigationState prop structure with index and routes array.

```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' },
  ]
}
```

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

### Install react-native-paper

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

Run this command in your project's folder to install the react-native-paper library.

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

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

### Icon Usage Example

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

Shows how to import and use the Icon component with a source, color, and size. The example uses MD3Colors.error50 for the color and a size of 20.

```tsx
import * as React from 'react';
import { Icon, MD3Colors } from 'react-native-paper';

const MyComponent = () => (
  <Icon
    source="camera"
    color={MD3Colors.error50}
    size={20}
  />
);

export default MyComponent;
```

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

### Generate native projects with Expo prebuild

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

Run this command from the project root to generate the native iOS and Android projects for the example app. It is the first step before building and installing the development build.

```bash
yarn example expo prebuild
```

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

### Build and install Android development build

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

Builds and installs the development build on the Android emulator. Run after generating native projects with 'yarn example expo prebuild'.

```bash
yarn example android
```

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

### Install react-native-web dependencies

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

Install react-native-web, react-dom, and react-art to enable React Native Paper on the web.

```bash
npm install react-native-web react-dom react-art
```

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

### Build and install iOS development build

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

Builds and installs the development build on the iOS simulator. Run after generating native projects with 'yarn example expo prebuild'.

```bash
yarn example ios
```

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

### renderScene callback example

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

Example of a renderScene callback that switches on route.key to return the appropriate component. The component receives a jumpTo prop for navigation.

```javascript
renderScene = ({ route, jumpTo }) => {
  switch (route.key) {
    case 'music':
      return <MusicRoute jumpTo={jumpTo} />;
    case 'albums':
      return <AlbumsRoute jumpTo={jumpTo} />;
  }
}
```

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

### Install react-native-safe-area-context

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

Required from v5 for handling safe area. Run this command to install the dependency.

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

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

### ToggleButton usage example

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

Example showing how to use ToggleButton with state management for toggling between checked and unchecked status.

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

const ToggleButtonExample = () => {
  const [status, setStatus] = React.useState('checked');

  const onButtonToggle = value => {
    setStatus(status === 'checked' ? 'unchecked' : 'checked');
  };

  return (
    <ToggleButton
      icon="bluetooth"
      value="bluetooth"
      status={status}
      onPress={onButtonToggle}
    />
  );
};

export default ToggleButtonExample;
```

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

### Chip usage example

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

Basic example of a Chip component with an icon and onPress handler. Import Chip from 'react-native-paper' and render it with an icon and press handler.

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

const MyComponent = () => (
  <Chip icon="information" onPress={() => console.log('Pressed')}>Example Chip</Chip>
);

export default MyComponent;
```

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

### Tooltip Component Usage

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

Example showing how to use the Tooltip component with an IconButton.

```APIDOC
## Tooltip Component

### Description
Tooltips display informative text when users hover over, focus on, or tap an element. Plain tooltips, when activated, display a text label identifying an element, such as a description of its function. Tooltips should include only short, descriptive text and avoid restating visible UI text.

### Usage
```jsx
import * as React from 'react';
import { IconButton, Tooltip } from 'react-native-paper';

const MyComponent = () => (
  <Tooltip title="Selected Camera">
    <IconButton icon="camera" selected size={24} onPress={() => {}} />
  </Tooltip>
);

export default MyComponent;
```

### Props

#### children (required)
- Type: `React.ReactElement`
- Description: Tooltip reference element. Needs to be able to hold a ref.

#### enterTouchDelay
- Type: `number`
- Default: `500`
- Description: The number of milliseconds a user must touch the element before showing the tooltip.

#### leaveTouchDelay
- Type: `number`
- Default: `1500`
- Description: The number of milliseconds after the user stops touching an element before hiding the tooltip.

#### title (required)
- Type: `string`
- Description: Tooltip title

#### titleMaxFontSizeMultiplier
- Type: `number`
- Description: Specifies the largest possible scale a title font can reach.

#### theme
- Type: `ThemeProp`
- Description: Theme prop for customization.

### Theme colors

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

| mode | backgroundColor | textColor |
| --- | --- | --- |
| - | theme.colors.onSurface | theme.colors.surface |

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:_

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

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

### Usage example with TextInput.Icon

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

Shows how to render a trailing icon inside a TextInput using the right prop. The icon prop is required and accepts an IconSource. The example uses a password field with a secureTextEntry and an eye icon.

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

const MyComponent = () => {
  const [text, setText] = React.useState('');

  return (
    <TextInput
      label="Password"
      secureTextEntry
      right={<TextInput.Icon icon="eye" />}
    />
  );
};

export default MyComponent;
```

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

### Install babel-loader and presets for React Native Web

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

Install the required dependencies for babel-loader configuration. This includes presets for environment, React, Flow, and TypeScript, plus plugins for class properties and object rest spread.

```bash
npm install --save-dev babel-loader @babel/preset-env @babel/preset-react @babel/preset-flow @babel/preset-typescript @babel/plugin-proposal-class-properties @babel/plugin-proposal-object-rest-spread
```

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

### Switch Component Usage

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

Example of using the Switch component with state management.

```APIDOC
## Switch Component

### Description
Switch is a visual toggle between two mutually exclusive states — on and off.

### Usage
```jsx
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;
```

### Props

#### disabled
- Type: `boolean`
- Description: Disable toggling the switch.

#### value
- Type: `boolean`
- Description: Value of the switch, true means 'on', false means 'off'.

#### color
- Type: `string`
- Description: Custom color for switch.

#### onValueChange
- Type: `Function`
- Description: Callback called with the new value when it changes.

#### style
- Type: `StyleProp<ViewStyle>`
- Description: Style for the switch.

#### theme
- Type: `ThemeProp`
- Description: Theme for the switch.
```

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

### App entry point with PaperProvider and NavigationContainer

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

Shows the required wrapper setup at the application entry point. Both PaperProvider and NavigationContainer must be used for the themes to work.

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

const Stack = createStackNavigator();

const HomeScreen = ({ navigation }) => (
  <TouchableOpacity
    onPress={() =>
      navigation?.push('Details', {
        title,
        content,
      })
    }
  >
    <Card>
      <Card.Content>
        <Title>{title}</Title>
        <Paragraph>{content}</Paragraph>
      </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>
  );
}
```

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

### Basic usage of Appbar.Header

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

Shows a basic Appbar.Header with back action, content title, and two actions. The example defines handlers for back, search, and more actions.

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

const MyComponent = () => {
  const _goBack = () => console.log('Went back');

  const _handleSearch = () => console.log('Searching');

  const _handleMore = () => console.log('Shown more');

  return (
    <Appbar.Header>
      <Appbar.BackAction onPress={_goBack} />
      <Appbar.Content title="Title" />
      <Appbar.Action icon="magnify" onPress={_handleSearch} />
      <Appbar.Action icon="dots-vertical" onPress={_handleMore} />
    </Appbar.Header>
  );
};

export default MyComponent;
```

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

### Usage with React Navigation (static)

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

Example of using BottomNavigation.Bar with React Navigation's static API. It creates a bottom tab navigator with a custom tabBar that uses BottomNavigation.Bar. The example shows how to handle tab presses, render icons, and get labels from the navigation descriptors.

```jsx
import { Text, View } from 'react-native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { Provider, BottomNavigation } from 'react-native-paper';
import MaterialCommunityIcons from '@expo/vector-icons/MaterialCommunityIcons';
import {
  CommonActions,
  createStaticNavigation,
} from '@react-navigation/native';

function HomeScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home!</Text>
    </View>
  );
}

function SettingsScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Settings!</Text>
    </View>
  );
}

const MyTabs = createBottomTabNavigator({
  screenOptions: {
    animation: 'shift',
  },
  tabBar: ({ navigation, state, descriptors, insets }) => (
    <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];
        const label =
          typeof options.tabBarLabel === 'string'
            ? options.tabBarLabel
            : typeof options.title === 'string'
            ? options.title
            : route.name;

        return label;
      }}
    />
  ),
  screens: {
    Home: {
      screen: HomeScreen,
      options: {
        tabBarIcon: ({ color }) => (
          <MaterialCommunityIcons name="home" color={color} size={26} />
        ),
      },
    },
    Settings: {
      screen: SettingsScreen,
      options: {
        tabBarIcon: ({ color }) => (
          <MaterialCommunityIcons name="cog" color={color} size={26} />
        ),
      },
    },
  },
});

const Navigation = createStaticNavigation(MyTabs);

export default function App() {
  return (
    <Provider>
      <Navigation>
        <MyTabs />
      </Navigation>
    </Provider>
  );
}

```

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

### Disable ripple effect in all components via PaperProvider settings

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

Set `rippleEffectEnabled: false` on the `settings` prop of `PaperProvider` to disable the ripple effect globally. This example shows the required import and provider setup.

```jsx
import { Provider as PaperProvider } from 'react-native-paper';
// ...

<PaperProvider
  settings={{
    rippleEffectEnabled: false
  }}
>
  // ...
</PaperProvider>
```

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

### Portal usage example

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

Shows how to use the Portal component to render content at a different place in the tree. Requires a Portal.Host in the parent tree, which is included when using the Provider component.

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

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

### Usage example for IconButton

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

Shows how to import and use IconButton with an icon, color, size, and onPress handler.

```jsx
import * as React from 'react';
import { IconButton, MD3Colors } from 'react-native-paper';

const MyComponent = () => (
  <IconButton
    icon="camera"
    iconColor={MD3Colors.error50}
    size={20}
    onPress={() => console.log('Pressed')}
  />
);

export default MyComponent;
```

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

### Usage of Drawer.CollapsedItem

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

Basic usage example showing how to render a Drawer.CollapsedItem with focused and unfocused icons and a label.

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

const MyComponent = () => (
  <Drawer.CollapsedItem
    focusedIcon="inbox"
    unfocusedIcon="inbox-outline"
    label="Inbox"
  />
);

export default MyComponent;
```

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

### Usage example of Appbar.Action

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

Shows how to use Appbar.Action inside an Appbar.Header with icons and onPress handlers. Includes a platform-specific icon constant.

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

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

### Theme Color Override Example

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

Example of overriding the primary color using the theme prop.

```jsx
<Badge theme={{ colors: { primary: 'green' } }} />
```

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

### Install deepmerge package

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

Command to install the deepmerge package, which simplifies merging the theme objects.

```bash
npm install deepmerge
```

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

### Banner Component Usage

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

Example demonstrating how to use the Banner component with actions, an icon, and visibility state.

```APIDOC
## Banner Component

### Description
Banner displays a prominent message and related actions.

### Usage
```jsx
import * as React from 'react';
import { Image } from 'react-native';
import { Banner } from 'react-native-paper';

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

  return (
    <Banner
      visible={visible}
      actions={[
        {
          label: 'Fix it',
          onPress: () => setVisible(false),
        },
        {
          label: 'Learn more',
          onPress: () => setVisible(false),
        },
      ]}
      icon={({size}) => (
        <Image
          source={{
            uri: 'https://avatars3.githubusercontent.com/u/17571969?s=400&v=4',
          }}
          style={{
            width: size,
            height: size,
          }}
        />
      )}>
      There was a problem processing a transaction on your credit card.
    </Banner>
  );
};

export default MyComponent;
```

### Props

#### visible (required)
- Type: `boolean`
- Description: Whether banner is currently visible.

#### children (required)
- Type: `React.ReactNode`
- Description: Content that will be displayed inside banner.

#### icon
- Type: `IconSource`
- Description: Icon to display for the `Banner`. Can be an image.

#### actions
- Type: `Array< { label: string; } & $RemoveChildren<typeof Button> >`
- Default: `[]`
- Description: Action items to shown in the banner. An action item should contain the following properties:
  - `label`: label of the action button (required)
  - `onPress`: callback that is called when button is pressed (required)
  - To customize button you can pass other props that button component takes.

#### contentStyle
- Type: `StyleProp<ViewStyle>`
- Description: Style of banner's inner content. Use this prop to apply custom width for wide layouts.

#### elevation (Available in v5.x with theme version 3)
- Type: `0 | 1 | 2 | 3 | 4 | 5 | Animated.Value`
- Default: `1`
- Description: Changes Banner shadow and background on iOS and Android.

#### maxFontSizeMultiplier
- Type: `number`
- Description: Specifies the largest possible scale a text font can reach.

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

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

#### theme
- Type: `ThemeProp`

#### onShowAnimationFinished
- Type: `Animated.EndCallback`
- Default: `() => {}`
- Description: Optional callback that will be called after the opening animation finished running normally

#### onHideAnimationFinished
- Type: `Animated.EndCallback`
- Default: `() => {}`
- Description: Optional callback that will be called after the closing animation finished running normally

### Theme colors

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

| mode | textColor | action textColor |
| --- | --- | --- |
| - | theme.colors.onSurface | theme.colors.primary |

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:_

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

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

### Button Usage

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

Example of importing and using the Button component with an icon, mode, and onPress handler.

```APIDOC
## Button Component

### Description
A button is a component that the user can press to trigger an action.

### Usage
```jsx
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

#### mode
- Type: `'text' | 'outlined' | 'contained' | 'elevated' | 'contained-tonal'`
- Default: `'text'`
- Description: Mode of the button. Adjusts styling to give desired emphasis.
  - `text` - flat button without background or outline, for lowest priority actions.
  - `outlined` - button with outline without background, medium emphasis.
  - `contained` - button with background color, high emphasis.
  - `elevated` - button with background color and elevation, for visual separation. Available in v5.x with theme version 3.
  - `contained-tonal` - button with secondary background color, alternative between contained and outlined. Available in v5.x with theme version 3.

#### dark
- Type: `boolean`
- Description: Whether the color is a dark color. A dark button renders light text and vice-versa. Only applicable for `contained` mode in theme version 2, and `contained`, `contained-tonal`, `elevated` modes in theme version 3.

#### compact
- Type: `boolean`
- Description: Use a compact look, useful for `text` buttons in a row.

#### color (Deprecated in v5.x - use `buttonColor` or `textColor` instead)
- Type: `string`
- Description: Custom text color for flat button, or background color for contained button.

#### buttonColor
- Type: `string`
- Description: Custom button's background color.

#### textColor
- Type: `string`
- Description: Custom button's text color.

#### rippleColor
- Type: `ColorValue`
- Description: Color of the ripple effect.

#### loading
- Type: `boolean`
- Description: Whether to show a loading indicator.

#### icon
- Type: `IconSource`
- Description: Icon to display for the `Button`.

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

#### children (required)
- Type: `React.ReactNode`
- Description: Label text of the button.

#### uppercase
- Type: `boolean`
- Description: Make the label text uppercased. Note that this won't work if you pass React elements as children.

#### background
- Type: `PressableAndroidRippleConfig`
- Description: Type of background drawable to display the feedback (Android). See [Pressable ripple config](https://reactnative.dev/docs/pressable#rippleconfig).

#### accessibilityLabel
- Type: `string`
- Description: Accessibility label for the button. Read by screen reader when user taps the button.

#### accessibilityHint
- Type: `string`
- Description: Accessibility hint for the button. Read by screen reader when user taps the button.
```

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

### Dialog usage example

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

Shows how to use the Dialog component with Portal, including state management for visibility and a button to show the dialog.

```jsx
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 react-app-rewired for CRA

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

Install react-app-rewired as a dev dependency to override webpack configuration in Create React App.

```bash
npm install --save-dev react-app-rewired
```

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

### Install file-loader for webpack < 5.0

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

Install file-loader to enable importing images and other assets using require in webpack versions before 5.0.

```bash
npm install --save-dev file-loader
```

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

### Usage example for Drawer.Section

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

Shows how to use Drawer.Section with a title and two Drawer.Item components, managing the active state with React.useState.

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

const MyComponent = () => {
  const [active, setActive] = React.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>
  );
};

export default MyComponent;
```

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

### Basic ProgressBar Usage

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

Example showing how to import and use ProgressBar with progress and color props. The color prop uses MD3Colors.error50.

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

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

export default MyComponent;
```

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

### FAB Component Usage

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

Example of using the FAB component with an icon and onPress handler.

```APIDOC
## FAB Component

### Description
A floating action button represents the primary action on a screen. It appears in front of all screen content.

### Usage
```jsx
import * as React from 'react';
import { StyleSheet } from 'react-native';
import { FAB } from 'react-native-paper';

const MyComponent = () => (
  <FAB
    icon="plus"
    style={styles.fab}
    onPress={() => console.log('Pressed')}
  />
);

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

export default MyComponent;
```

### Props

#### icon
- Type: `IconSource`
- Description: Icon to display for the `FAB`. It's optional only if `label` is defined.

#### label
- Type: `string`
- Description: Optional label for extended `FAB`. It's optional only if `icon` is defined.

#### uppercase
- Type: `boolean`
- Description: Make the label text uppercased.

#### background
- Type: `PressableAndroidRippleConfig`
- Description: Type of background drawable to display the feedback (Android). See [RippleConfig](https://reactnative.dev/docs/pressable#rippleconfig).

#### accessibilityLabel
- Type: `string`
- Default: `label`
- Description: Accessibility label for the FAB. This is read by the screen reader when the user taps the FAB. Uses `label` by default if specified.

#### accessibilityState
- Type: `AccessibilityState`
- Description: Accessibility state for the FAB. This is read by the screen reader when the user taps the FAB.

#### animated
- Type: `boolean`
- Default: `true`
- Description: Whether an icon change is animated.

#### small (Deprecated in v.5x - use prop size="small")
- Type: `boolean`
- Description: Whether FAB is mini-sized, used to create visual continuity with other elements. This has no effect if `label` is specified.

#### color
- Type: `string`
- Description: Custom color for the icon and label of the `FAB`.

#### rippleColor
- Type: `ColorValue`
- Description: Color of the ripple effect.

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

#### visible
- Type: `boolean`
- Default: `true`
- Description: Whether `FAB` is currently visible.

#### loading
- Type: `boolean`
- Description: Whether to show a loading indicator.

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

#### onLongPress
- Type: `(e: GestureResponderEvent) => void`
- Description: Function to execute on long press.

#### delayLongPress
- Type: `number`
- Description: The number of milliseconds a user must touch the element before executing `onLongPress`.

#### size (Available in v5.x with theme version 3)
- Type: `'small' | 'medium' | 'large'`
- Default: `'medium'`
- Description: Size of the `FAB`.
  - `small` - FAB with small height (40).
  - `medium` - FAB with default medium height (56).
  - `large` - FAB with large height (96).

#### customSize
- Type: `number`
- Description: Custom size for the `FAB`. This prop takes precedence over size prop.
```

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

### DataTable Usage Example

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

A complete example of using the DataTable component with pagination. It imports React and DataTable, defines state for pagination, and renders a table with headers, rows, and a pagination control. The example includes a list of items and demonstrates how to slice the data based on the current page and items per page.

```tsx
import * as React from 'react';
import { DataTable } from 'react-native-paper';

const MyComponent = () => {
  const [page, setPage] = React.useState<number>(0);
  const [numberOfItemsPerPageList] = React.useState([2, 3, 4]);
  const [itemsPerPage, onItemsPerPageChange] = React.useState(
    numberOfItemsPerPageList[0]
  );

  const [items] = React.useState([
   {
     key: 1,
     name: 'Cupcake',
     calories: 356,
     fat: 16,
   },
   {
     key: 2,
     name: 'Eclair',
     calories: 262,
     fat: 16,
   },
   {
     key: 3,
     name: 'Frozen yogurt',
     calories: 159,
     fat: 6,
   },
   {
     key: 4,
     name: 'Gingerbread',
     calories: 305,
     fat: 3.7,
   },
  ]);

  const from = page * itemsPerPage;
  const to = Math.min((page + 1) * itemsPerPage, items.length);

  React.useEffect(() => {
    setPage(0);
  }, [itemsPerPage]);

  return (
    <DataTable>
      <DataTable.Header>
        <DataTable.Title>Dessert</DataTable.Title>
        <DataTable.Title numeric>Calories</DataTable.Title>
        <DataTable.Title numeric>Fat</DataTable.Title>
      </DataTable.Header>

      {items.slice(from, to).map((item) => (
        <DataTable.Row key={item.key}>
          <DataTable.Cell>{item.name}</DataTable.Cell>
          <DataTable.Cell numeric>{item.calories}</DataTable.Cell>
          <DataTable.Cell numeric>{item.fat}</DataTable.Cell>
        </DataTable.Row>
      ))}

      <DataTable.Pagination
        page={page}
        numberOfPages={Math.ceil(items.length / itemsPerPage)}
        onPageChange={(page) => setPage(page)}
        label={`${from + 1}-${to} of ${items.length}`}
        numberOfItemsPerPageList={numberOfItemsPerPageList}
        numberOfItemsPerPage={itemsPerPage}
        onItemsPerPageChange={onItemsPerPageChange}
        showFastPaginationControls
        selectPageDropdownLabel={'Rows per page'}
      />
    </DataTable>
  );
};

export default MyComponent;
```

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

### Dialog Component Usage

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

Example demonstrating how to use the Dialog component with Portal, including showing and hiding the dialog.

```APIDOC
## Dialog Component Usage

### Description
Example of using the Dialog component with Portal, including state management for visibility.

### Code Example
```jsx
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;
```
```

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

### ToggleButton.Group usage example

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

Example showing how to use ToggleButton.Group with two ToggleButton children. It manages a selected value with React state and updates it via onValueChange.

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

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

  return (
    <ToggleButton.Group
      onValueChange={value => setValue(value)}
      value={value}
    >
      <ToggleButton icon="format-align-left" value="left" />
      <ToggleButton icon="format-align-right" value="right" />
    </ToggleButton.Group>
  );
};

export default MyComponent;
```

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

### Create a basic stack navigator with Home and Details screens

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

Sets up a NavigationContainer with a Stack.Navigator containing two screens. Requires react-native-gesture-handler import and the @react-navigation/native and @react-navigation/stack packages.

```jsx
import 'react-native-gesture-handler';
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

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

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

### RadioButton Usage Example

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

Example showing how to use RadioButton with state to manage the selected value. It imports React, View, and RadioButton, and defines a component with two radio buttons.

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

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

  return (
    <View>
      <RadioButton
        value="first"
        status={ checked === 'first' ? 'checked' : 'unchecked' }
        onPress={() => setChecked('first')}
      />
      <RadioButton
        value="second"
        status={ checked === 'second' ? 'checked' : 'unchecked' }
        onPress={() => setChecked('second')}
      />
    </View>
  );
};

export default MyComponent;
```

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

### Portal.Host usage example

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

Wrap a screen in Portal.Host to render Portal elements above it. The Provider component already includes Portal.Host.

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

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

### Dialog.Content usage example

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

Shows how to use Dialog.Content inside a Dialog with a Portal. The example includes a state variable 'visible' and a hideDialog function to control the dialog's visibility.

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

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

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

  return (
    <Portal>
      <Dialog visible={visible} onDismiss={hideDialog}>
        <Dialog.Content>
          <Text variant="bodyMedium">This is simple dialog</Text>
        </Dialog.Content>
      </Dialog>
    </Portal>
  );
};

export default MyComponent;
```

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

### Text Component Usage

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

Example showing how to use the Text component with different variants.

```APIDOC
## Text Component

### Description
A typography component that applies styles based on the `variant` prop.

### Usage
```jsx
import * as React from 'react';
import { Text } from 'react-native-paper';

const MyComponent = () => (
  <>
    <Text variant="displayLarge">Display Large</Text>
    <Text variant="displayMedium">Display Medium</Text>
    <Text variant="displaySmall">Display small</Text>

    <Text variant="headlineLarge">Headline Large</Text>
    <Text variant="headlineMedium">Headline Medium</Text>
    <Text variant="headlineSmall">Headline Small</Text>

    <Text variant="titleLarge">Title Large</Text>
    <Text variant="titleMedium">Title Medium</Text>
    <Text variant="titleSmall">Title Small</Text>

    <Text variant="bodyLarge">Body Large</Text>
    <Text variant="bodyMedium">Body Medium</Text>
    <Text variant="bodySmall">Body Small</Text>

    <Text variant="labelLarge">Label Large</Text>
    <Text variant="labelMedium">Label Medium</Text>
    <Text variant="labelSmall">Label Small</Text>
  </>
);

export default MyComponent;
```

### Props

#### Text props
Extends: [`...Text props`](https://reactnative.dev/docs/text#props)

#### variant
Available in v5.x with theme version 3

Type: `VariantProp<T>`

Variant defines appropriate text styles for type role and its size. Available variants:

- Display: `displayLarge`, `displayMedium`, `displaySmall`
- Headline: `headlineLarge`, `headlineMedium`, `headlineSmall`
- Title: `titleLarge`, `titleMedium`, `titleSmall`
- Label: `labelLarge`, `labelMedium`, `labelSmall`
- Body: `bodyLarge`, `bodyMedium`, `bodySmall`

#### children (required)
Type: `React.ReactNode`

#### theme
Type: [`ThemeProp`](https://callstack.github.io/react-native-paper/docs/guides/theming#theme-properties)

#### style
Type: [`StyleProp<TextStyle>`](https://reactnative.dev/docs/text-style-props)

### Theme colors

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

| mode | textColor |
| --- | --- |
| - | theme.colors.onSurface |

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:_

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

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

### SegmentedButtons usage example

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

A complete example of using SegmentedButtons with a single-select state. It imports React, SafeAreaView, StyleSheet, and SegmentedButtons, and renders a segmented control with three options: Walking, Transit, and Driving.

```jsx
import * as React from 'react';
import { SafeAreaView, StyleSheet } from 'react-native';
import { SegmentedButtons } from 'react-native-paper';

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

  return (
    <SafeAreaView style={styles.container}>
      <SegmentedButtons
        value={value}
        onValueChange={setValue}
        buttons={[
          {
            value: 'walk',
            label: 'Walking',
          },
          {
            value: 'train',
            label: 'Transit',
          },
          { value: 'drive', label: 'Driving' },
        ]}
      />
    </SafeAreaView>
  );
};

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

export default MyComponent;
```
Tokens:
Raw