How do I use Chips in React Native Paper?

Chips are the small rounded labels you see on filters, tags, and quick choices, and React Native Paper has one ready to use. If you’re here because a chip won’t stay selected or the check mark won’t show, start with its selected and icon props, since those control both, and they’re covered below.

How it works

Chip is a pressable label from react-native-paper, which is on version 5 as of this writing. It shows what you pass in, so selection lives in your state: you pass selected and flip it in onPress. Here are the main props:

• mode: "flat" (the default) or "outlined"
• selected: shows the selected style, and by default a check mark (showSelectedCheck, on by default)
• icon: a leading icon by name, such as "tag", which replaces the check mark when the chip is selected
• onClose: adds a close button and runs when it’s tapped, and closeIcon changes its icon
• compact: tighter horizontal padding when the chip only has a label
• disabled, elevated, showSelectedOverlay, textStyle, and style for the rest

How to add it

1. Install it along with the safe area library it needs from version 5 on:

   npx expo install react-native-paper react-native-safe-area-context

   In an Expo app you don’t need to install icons separately, because the icon set comes with the expo package.

2. Wrap your app in PaperProvider. With Expo Router, that’s the root layout:

   import { Stack } from "expo-router";
   import { PaperProvider } from "react-native-paper";
   
   export default function RootLayout() {
     return (
       <PaperProvider>
         <Stack />
       </PaperProvider>
     );
   }

3. Render a row of chips people can select:

   import { useState } from "react";
   import { View } from "react-native";
   import { Chip } from "react-native-paper";
   
   const TAGS = ["Vegan", "Gluten free", "Spicy", "Under 30 min"];
   
   export function TagFilter() {
     const [picked, setPicked] = useState<string[]>([]);
   
     const toggle = (tag: string) =>
       setPicked((current) =>
         current.includes(tag) ? current.filter((t) => t !== tag) : [...current, tag],
       );
   
     return (
       <View style={{ flexDirection: "row", flexWrap: "wrap", gap: 8 }}>
         {TAGS.map((tag) => (
           <Chip
             key={tag}
             mode="outlined"
             selected={picked.includes(tag)}
             onPress={() => toggle(tag)}
           >
             {tag}
           </Chip>
         ))}
       </View>
     );
   }

   For a single choice, keep one string in state instead of an array.

4. Make chips removable by adding onClose, for example onClose={() => removeTag(tag)} on chips that show tags a person has already added.

How you know it works

Tapping a chip shows the check mark and the selected style, and tapping it again clears both. The close button removes the chip. With a screen reader on, each chip reads as a button, and the close button reads as “Close” unless you set closeIconAccessibilityLabel.

If it doesn’t look right

If the check mark never shows, check for an icon prop, because a chip with an icon shows that icon whether it’s selected or not. If each chip stretches across the screen, its parent is a column, so put the chips in a row with flexWrap: "wrap" as above, or give a lone chip alignSelf: "flex-start". And if your colors don’t match the rest of the app, we’d pass your theme to PaperProvider rather than styling each chip.