Skip to content

Card OnPress throws TypeError: Cannot add new property '_tracking' after RN 0.77.0 upgradeΒ #4617

@GianpaoloPascasi

Description

@GianpaoloPascasi

Current behaviour

After the upgrade from RN 0.75.4 to 0.77 (i already had installed React-Native-Paper 5.12.3, now it is 5.13.1 so no migration)
Now tapping on cards with the onPress event triggers the error TypeError: Cannot add new property '_tracking'

Does anyone have the same problem?

PS The problems seems to happen in flat lists views only

Expected behaviour

It should execute the onpress as always.

How to reproduce?

Upgrade a project RN from 0.75.4 to 0.77 and React-Native-Paper from 5.12.3 to 5.13.1.
Place a card in a scrolling flat list

export const ProductListComponent = () => {
  const navigation = useNavigation<ProductListScreenNavigationProp>();
  const dispatch = useDispatch<Dispatch<AppFluxAction>>();

 // omitting code for brevity

  const onProductPress = useCallback(
    (id: number) => {
      if (products.find(e => e.product_code === id) === undefined) {
        dispatch(getProductById(id));
      }
      navigation.navigate('ProductDetail', { id });
    },
    [navigation, dispatch, products]
  );

  return (
    <SafeAreaView style={styles.productsContainer}>
      <FixedSearchBarComponent height={searchBarHeight} />
      <FilterProductsComponent />
      <FlatList
        ref={flatlist}
        ListEmptyComponent={() => (
          <Text style={{ textAlign: 'center' }}>
            {getI18NText('ui.products.no_item', country)}
          </Text>
        )}
        ItemSeparatorComponent={() => (
          <Divider style={{ marginVertical: 25 }} />
        )}
        contentContainerStyle={styles.flatListContainer}
        columnWrapperStyle={{ justifyContent: 'flex-start' }}
        data={products}
        keyExtractor={(item, index) =>
          item.product_code.toString() + String(index)
        }
        renderItem={({ item }) => (
          <ProductListElementComponent item={item} onPress={onProductPress} />
        )}
        numColumns={4}
        onEndReached={onLoadMore}
      />
    </SafeAreaView>
  );
};

export const ProductListElementComponent = ({
  item,
  onPress
}: ProductListElementComponentProps) => {
  
  return (
    <Card
      style={CardStyles.cardContainer}
      onPress={() => onPress(item.product_code)}
    >

Preview

Image

What have you tried so far?

To identify i just launched the app in debug mode and when tapping the RN error dialog pops up

Your Environment

software version
ios x
android API 34
react-native 0.77.0
react-native-paper 5.13.1
node 18.20.2
npm or yarn npm 10.5.0
expo sdk x

Metadata

Metadata

Assignees

Labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions