Unable to resolve "./TouchableNativeFeedback" from "node_modules/react-native-gesture-handler/src/components/touchables/index.ts"

[kenny-mwendwa]

Description

I am using Expo and installed the package using npm and tried to render a list using FlatList,

import { FlatList } from "react-native-gesture-handler";
import orders from "../../../../assets/data/orders";
import OrderListItem from "@/components/OrderListItem";

export default function OrdersScreen() {
  return (
    <>
      <FlatList
        data={orders}
        contentContainerStyle={{ gap: 10, padding: 10 }}
        renderItem={({ item }) => <OrderListItem order={item} />}
      />
    </>
  );
}

Error output on the terminal:

 ERROR  [Error: undefined Unable to resolve module ./TouchableNativeFeedback from /home/icon/code/projects/expo/food-ordering/node_modules/react-native-gesture-handler/src/components/touchables/index.ts: 

None of these files exist:
  * node_modules/react-native-gesture-handler/src/components/touchables/TouchableNativeFeedback(.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.mjs|.native.mjs|.mjs|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json|.android.cjs|.native.cjs|.cjs|.android.scss|.native.scss|.scss|.android.sass|.native.sass|.sass|.android.css|.native.css|.css)
  * node_modules/react-native-gesture-handler/src/components/touchables/TouchableNativeFeedback/index(.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.mjs|.native.mjs|.mjs|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json|.android.cjs|.native.cjs|.cjs|.android.scss|.native.scss|.scss|.android.sass|.native.sass|.sass|.android.css|.native.css|.css)
  2 | export type { TouchableOpacityProps } from './TouchableOpacity';
  3 | export type { TouchableWithoutFeedbackProps } from './TouchableWithoutFeedback';
> 4 | export { default as TouchableNativeFeedback } from './TouchableNativeFeedback';
    |                                                     ^
  5 | export { default as TouchableWithoutFeedback } from './TouchableWithoutFeedback';
  6 | export { default as TouchableOpacity } from './TouchableOpacity';
  7 | export { default as TouchableHighlight } from './TouchableHighlight';]

Steps to reproduce

1. Install react-native-gesture-handler via npm
2. Try to render a FlatList example:

   
   import { FlatList } from "react-native-gesture-handler";
   import orders from "../../../../assets/data/orders";
   import OrderListItem from "@/components/OrderListItem";

export default function OrdersScreen() { return ( <> <FlatList data={orders} contentContainerStyle={{ gap: 10, padding: 10 }} renderItem={({ item }) => } /> </> ); }

### Snack or a link to a repository

https://github.com/kenny-mwendwa/expo-food-ordering-app/blob/master/src/app/(user)/orders/index.tsx

### Gesture Handler version

2.16.0

### React Native version

0.73.6

### Platforms

Android

### JavaScript runtime

None

### Workflow

None

### Architecture

None

### Build type

None

### Device

None

### Device model

_No response_

### Acknowledgements

Yes

[m-bert]

Hi! I've checked your repo and everything looks fine - I've managed to run the app. There were some problems though - missing GestureHandlerRootView and flushOperationsError - you're using Gesture Handler 2.16.0, but expected version in your expo project is 2.14.0 (and this matters, because there were changes in the native code).

Have you tried to remove node_modules and reset cache?