Skip to content

fix: chip selected colors #4825

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 10 commits into
base: main
Choose a base branch
from
Open

fix: chip selected colors #4825

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
4d6128f
fix: apply selectedColor only when selected & support custom background
theBGuy Oct 26, 2025
9b5ce49
test: update Chip tests
theBGuy Oct 26, 2025
10896ee
docs: organize & add chip examples for new usage
theBGuy Oct 26, 2025
5334c1e
fix: apply selected check to v2 section
theBGuy Oct 26, 2025
569a8e9
test: update selectedColor tests
theBGuy Oct 26, 2025
9f9fccd
fix: only apply selectedColor when `selected` is true
theBGuy Oct 26, 2025
a872195
fix: update `getIconColor` for selected state
theBGuy Oct 26, 2025
bf2529c
test: update tests for ripple & icon selected state
theBGuy Oct 26, 2025
bff04c5
docs: fix jsdoc translation loosing spacing
theBGuy Oct 26, 2025
89dfcb0
fix: add selected check for getBorderColor
theBGuy Oct 27, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
315 changes: 212 additions & 103 deletions example/src/Examples/ChipExample.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -249,10 +249,10 @@ const ChipExample = () => {
</Chip>
</View>
</List.Section>
<List.Section title="Custom chip">
<View style={styles.row}>
{isV3 && (
<>
<List.Section title="Custom chips">
{isV3 && (
<List.Section title="Custom border radius">
<View style={styles.row}>
<Chip
mode="outlined"
onPress={() => {}}
Expand All @@ -265,7 +265,7 @@ const ChipExample = () => {
}
style={[styles.chip, styles.customBorderRadius]}
>
Compact with custom border radius
Compact with custom border radius (outlined)
</Chip>
<Chip
mode="flat"
Expand All @@ -279,110 +279,219 @@ const ChipExample = () => {
}
style={[styles.chip, styles.customBorderRadius]}
>
Compact with custom border radius
Compact with custom border radius (flat)
</Chip>
</>
)}
<Chip
mode="outlined"
onPress={() => {}}
onLongPress={() =>
setSnackbarProperties({ visible: true, text: '' })
}
style={styles.chip}
>
With onLongPress
</Chip>
<Chip
selected
onPress={() => {}}
style={[
styles.chip,
{
backgroundColor: color(customColor).alpha(0.2).rgb().string(),
},
]}
selectedColor={customColor}
>
Flat selected chip with custom color
</Chip>
<Chip
onPress={() => {}}
style={styles.chip}
selectedColor={customColor}
>
Flat unselected chip with custom color
</Chip>
</View>
</List.Section>
)}
<List.Section title="Custom background color">
<View style={styles.row}>
<Chip
selected
onPress={() => {}}
style={[
styles.chip,
{
backgroundColor: color(customColor)
.alpha(0.2)
.rgb()
.string(),
},
]}
>
Flat selected chip with custom background color
</Chip>
<Chip
selected={false}
onPress={() => {}}
style={[
styles.chip,
{
backgroundColor: color(customColor)
.alpha(0.2)
.rgb()
.string(),
},
]}
>
Flat unselected chip with custom background color
</Chip>
<Chip
disabled
onPress={() => {}}
style={[
styles.chip,
{
backgroundColor: color(customColor)
.alpha(0.2)
.rgb()
.string(),
},
]}
>
Flat disabled chip with custom background color
</Chip>
</View>
</List.Section>
<List.Section title="Custom selected color">
<View style={styles.row}>
<Chip
selected
onPress={() => {}}
style={[styles.chip]}
selectedColor={customColor}
>
Flat selected chip with custom selected color
</Chip>
<Chip
selected={false}
onPress={() => {}}
style={styles.chip}
selectedColor={customColor}
>
Flat unselected chip with custom selected color
</Chip>
<Chip
selected
showSelectedCheck={false}
onPress={() => {}}
style={[styles.chip]}
selectedColor={customColor}
>
Flat selected chip with custom selected color (no check)
</Chip>
<Chip
selected={false}
showSelectedCheck={false}
onPress={() => {}}
style={styles.chip}
selectedColor={customColor}
>
Flat unselected chip with custom selected color (no check)
</Chip>
<Chip
disabled
onPress={() => {}}
style={styles.chip}
selectedColor={customColor}
>
Flat disabled unselected chip with custom selected color
</Chip>
<Chip
selected
mode="outlined"
onPress={() => {}}
style={[
styles.chip,
{
backgroundColor: color(customColor)
.alpha(0.2)
.rgb()
.string(),
},
]}
selectedColor={customColor}
>
Outlined selected chip with custom color
</Chip>
<Chip
mode="outlined"
onPress={() => {}}
style={styles.chip}
selectedColor={customColor}
>
Outlined unselected chip with custom color
</Chip>
</View>
</List.Section>
<List.Section title="Custom styling">
<View style={styles.row}>
<Chip
selected
showSelectedCheck={false}
onPress={() => {}}
style={[styles.chip]}
selectedColor="rgba(255, 255, 255, 1)"
selectedBackgroundColor="rgba(0, 0, 0, 1)"
>
Flat selected chip with custom selected color & background color
</Chip>
<Chip
disabled
onPress={() => {}}
style={[styles.chip]}
selectedColor="rgba(255, 255, 255, 1)"
selectedBackgroundColor="rgba(0, 0, 0, 1)"
>
Flat disabled chip with custom selected & background color
</Chip>
<Chip
onPress={() => {}}
style={styles.chip}
textStyle={styles.tiny}
>
With custom size
</Chip>
<Chip
onPress={() => {}}
style={styles.chip}
textStyle={styles.tiny}
>
<Text variant="titleLarge">With custom text</Text>
</Chip>
<Chip
onPress={() => {}}
onClose={() =>
setSnackbarProperties({
visible: true,
text: 'Custom icon close button pressed',
})
}
closeIcon="arrow-down"
style={styles.chip}
closeIconAccessibilityLabel="Custom Close icon accessibility label"
>
With custom close icon
</Chip>
<Chip
mode="outlined"
onPress={() => {}}
onLongPress={() =>
setSnackbarProperties({ visible: true, text: '' })
}
style={styles.chip}
>
With onLongPress
</Chip>
</View>
</List.Section>
<List.Section title="Full width & long text">
<View style={styles.row}>
<Chip
onPress={() => {}}
onClose={() =>
setSnackbarProperties({
visible: true,
text: 'Close button pressed',
})
}
style={styles.bigTextFlex}
textStyle={styles.bigTextStyle}
ellipsizeMode="middle"
>
With a very big text: React Native Paper is a high-quality,
standard-compliant Material Design library that has you covered
in all major use-cases.
</Chip>
</View>
<Chip
selected
mode="outlined"
onPress={() => {}}
style={[
styles.chip,
{
backgroundColor: color(customColor).alpha(0.2).rgb().string(),
},
]}
selectedColor={customColor}
>
Outlined selected chip with custom color
</Chip>
<Chip
mode="outlined"
onPress={() => {}}
style={styles.chip}
selectedColor={customColor}
>
Outlined unselected chip with custom color
</Chip>
<Chip
onPress={() => {}}
style={styles.chip}
textStyle={styles.tiny}
>
With custom size
</Chip>
<Chip
onPress={() => {}}
onClose={() =>
setSnackbarProperties({
visible: true,
text: 'Close button pressed',
})
}
style={styles.bigTextFlex}
textStyle={styles.bigTextStyle}
ellipsizeMode="middle"
>
With a very big text: React Native Paper is a high-quality,
standard-compliant Material Design library that has you covered in
all major use-cases.
</Chip>
<Chip
onPress={() => {}}
onClose={() =>
setSnackbarProperties({
visible: true,
text: 'Custom icon close button pressed',
})
}
closeIcon="arrow-down"
style={styles.chip}
closeIconAccessibilityLabel="Custom Close icon accessibility label"
style={styles.fullWidthChip}
>
With custom close icon
Full width chip
</Chip>
<Chip
onPress={() => {}}
style={styles.chip}
textStyle={styles.tiny}
>
<Text variant="titleLarge">With custom text</Text>
</Chip>
</View>
<Chip mode="outlined" onPress={() => {}} style={styles.fullWidthChip}>
Full width chip
</Chip>
</List.Section>
</List.Section>
</ScreenWrapper>
<Snackbar
Expand Down
Loading