Shadow Appears on Disabled, Selected Flat Chip When Rendered Next to Outlined Chip in Same Row

[ttrvdw]

Current behaviour

I'm rendering chip 1, an outlined chip that is not selected and not disabled in the same row as chip 2, a flat chip that is selected and disabled. Chip 2 is showing a shade at the bottom of the element.

The issue seems to only arise when putting chips 1 and 2 in the same row, stacking vertically results in the expected rendering:

Expected behaviour

Chip 1: outlined, not selected, not disabled Chip 2: flat, selected, disabled Putting Chip 1 and Chip 2 in the same row gives two chips of the same height, where Chip 2 does not have a shade at the bottom.

How to reproduce?

import React from 'react';
import {StyleSheet, View} from 'react-native';
import {Chip} from 'react-native-paper';

const Demo = () => {
  return (
    <View style={styles.container}>
      <Chip mode="outlined" selected={false} disabled={false}>
        Not selected, enabled
      </Chip>
      <Chip mode="flat" selected={true} disabled={true}>
        Selected, disabled
      </Chip>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
  },
});

export default Demo;

Preview

What have you tried so far?

Explicitly setting the height of the chips to 32 solves the problem. I suspect a problem with two different overlays (disabled and selected) with different flex properties.

Edit: The above proposed fix still causes problems with chips that have an onClose handler, as the cross icon increases the size of the chip.

Your Environment

software	version
ios	17.5
react-native	0.74.3
react-native-paper	5.12.3
node	20.12.2
yarn	1.22.22
expo sdk	0.10.11

[ttrvdw]

After playing around some more, the issue seems to lie in the mode={'flat'}. The click target has a smaller height than the height of the blue color applied to the chip. This happens only when the chip is placed in a row together with an element with a larger height.

[ttrvdw]

Video illustrating the click target size is not correct:

https://github.com/user-attachments/assets/341a480f-4c35-49ae-9276-486c945df484

The issue is also showing when the chip is enabled. Root cause lies in the size changing for mode={'flat'} if it's in a row with a larger component.

[kamilkedzierski]

Hey @ttrvdw! 👋 I've just created a PR that resolves the shadow issue. However, I wasn't able to reproduce the problem with the Chip changing size when selected. Could you please provide a code snippet demonstrating this issue? 🙏

[ttrvdw]

Hey @ttrvdw! 👋 I've just created a PR that resolves the shadow issue. However, I wasn't able to reproduce the problem with the Chip changing size when selected. Could you please provide a code snippet demonstrating this issue? 🙏

Thanks for taking a deeper look into this issue!

Apologies for the confusion around this. Our setup is such that a we switch between flat and outlined when toggling from unselected to selected. A more accurate description of the issue is that the size of a chip seems to change in my setup when switching from flat to outlined and vice versa. Hope that clarifies the issue.

[kamilkedzierski]

I got you! I gave it another go and toggled between flat and outlined modes, but I couldn't reproduce the issue.

Check out this Expo snack to see how I tested it: Expo Snack Link. I also ran it locally with the same versions of react-native and react-native-paper.

If there's anything I should tweak in my code to trigger the issue, just let me know!