fix: correct Chip touchable style

[lukewalczak]

Fixes: #2972, #2959

Summary

Setting the flexGrow to Touchable within Chip

Android	ios	web

at the same time it's not breaking the previous issue: #2804

Android	ios	web

Test plan

Run the code below from one of the issues and expect Chips are displayed properly:

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

const ChipExample = () => {
  return (
    <>
      <List.Section title="Flat chip">
        <View style={styles.row}>
          <Chip selected onPress={() => { }} style={styles.chip}>
            Simple 1
          </Chip>
          <Chip selected onPress={() => { }} style={styles.chip}>
            Simple 2
          </Chip>
          <Chip selected onPress={() => { }} style={styles.chip}>
            Simple 3
          </Chip>
        </View>
      </List.Section>
    </>
  );
};

const styles = StyleSheet.create({
  row: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    paddingHorizontal: 12,
  },
  chip: {
    margin: 4,
  },
});

export default ChipExample;

[github-actions]

The mobile version of example app from this branch is ready! You can see it here

.

[brunohkbx]

Thanks @lukewalczak. I didn't realize that using flex: 1 in the touchable would cause problems.
WDYT about adding a test to track this regression described in #2972?

[lukewalczak]

@brunohkbx sure, good point! Will add it!

[lukewalczak]

After the research I guess we are not able to test the regression without e2e tests. Snapshot indicates only change from flex to flexGrow. Also the component is always available within the tree, so firing event on it will always pass as well.

[callstack-bot]

Hey @lukewalczak, thank you for your pull request 🤗. The documentation from this branch can be viewed here.

[github-actions]

The mobile version of example app from this branch is ready! You can see it here

.