TypeError: _RNGestureHandlerModule.default.flushOperations is not a function

[idrissakhi]

Description

Issue with typing on the new version 2.4.0, the tests where we use Scrollable View (FlatList, ScrollView ...) does not pass anymore

TypeError: _RNGestureHandlerModule.default.flushOperations is not a function

  at Timeout._onTimeout (node_modules/react-native-gesture-handler/lib/commonjs/handlers/gestureHandlerCommon.ts:194:30)

Platforms

• iOS
• Android
• Web

Screenshots

Steps To Reproduce

1. update to new version 2.4.0 from version 2.3.1

2. write component that uses ScrollView for example

3. run test

4. test will fail with following error => ` TypeError: _RNGestureHandlerModule.default.flushOperations is not a function

   at Timeout._onTimeout (node_modules/react-native-gesture-handler/lib/commonjs/handlers/gestureHandlerCommon.ts:194:30)`

Expected behavior

Actual behavior

Snack or minimal code example

`import { ReactElement } from 'react';
import { View, useWindowDimensions, ActivityIndicator } from 'react-native';
import { ScrollView } from 'react-native-gesture-handler';
import RenderHTML from 'react-native-render-html';
import { useNavigation, useRoute } from '@react-navigation/native';

import { useTranslation } from 'src/Shared/Config';
import { Color, routeNames, sharedStyles, tagsStyle } from 'src/Shared/constants';
import { SettingsHeader } from '../SubComponents';
import { styles } from './PrivacyPolicyScreen.style';
import { SettingsScreenProps, SettingsTermsOfUseProps } from 'src/Router/types.router';

export const PrivacyPolicyScreen = (): ReactElement => {
const { t } = useTranslation();
const {
params: { uri },
} = useRoute<SettingsTermsOfUseProps['route']>();
const { goBack, navigate } = useNavigation<SettingsScreenProps['navigation']>();
const { width: screenWidth } = useWindowDimensions();

const onClose = () => {
navigate(routeNames.App);
};

return (
<View testID="privacyPolicyScreenContainer" style={[sharedStyles.fullFlex, styles.container]}>
<SettingsHeader title={t('settings_privacy_policy_item')} onLeftPress={goBack} onRightPress={onClose} />

<RenderHTML
source={{ uri }}
contentWidth={screenWidth}
tagsStyles={tagsStyle}
remoteLoadingView={() => }
/>


);
};
`

====== Jest Test ======

` it('click on terms of use to the correct page', async () => {
const { getByTestId } = render();

const termOfUseEntry = getByTestId('testId-settings_page_item_terms_use');
expect(termOfUseEntry).toBeDefined();

await act(async () => {
  fireEvent.press(termOfUseEntry);
});

await waitFor(() => expect(navContext.navigate).toHaveBeenCalledTimes(1));
expect(navContext.navigate).toHaveBeenNthCalledWith(1, routeNames.SettingsTermsOfUse, {
  uri: 'https://partoo-mobile-app.s3.eu-west-1.amazonaws.com/terms-of-use/terms-of-use_fr.html',
});

});`

==== Error ====
TypeError: _RNGestureHandlerModule.default.flushOperations is not a function

  at Timeout._onTimeout (node_modules/react-native-gesture-handler/lib/commonjs/handlers/gestureHandlerCommon.ts:194:30)

Package versions

• React: 17.0.2
• React Native: 0.67.4.
• React Native Gesture Handler: 2.4.0
• React Native Reanimated:2.7.0

[cbotsikas]

same here :( well, almost. for me the error is about js instead of ts, but it's the same issue.

    TypeError: _RNGestureHandlerModule.default.flushOperations is not a function

      at Timeout._onTimeout (node_modules/react-native-gesture-handler/lib/commonjs/handlers/gestureHandlerCommon.js:102:39)

Package versions

React: 17.0.2
React Native: 0.67.3
React Native Gesture Handler: 2.4.0
React Native Reanimated: 2.4.1

[Alex5ander]

remove this line
import { ScrollView } from 'react-native-gesture-handler';
add this line import { ScrollView} from 'react-native';
run your test again, error only in test with imports from react-native-gesture-handler.

[Alex5ander]

error on node_modules/react-native-gesture-handler/src/mocks.ts not export method flushOperations

[cbotsikas]

ScrollView

We don't import ScrollView from react-native-gesture-handler

error on node_modules/react-native-gesture-handler/src/mocks.ts not export method flushOperations

Indeed, when adding a NOOP for flushOperations on mocks, all tests work again.

[Alex5ander]

yes

[idrissakhi]

remove this line import { ScrollView } from 'react-native-gesture-handler'; add this line import { ScrollView} from 'react-native'; run your test again, error only in test with imports from react-native-gesture-handler.

I can't do that because I have issues with react-native scrollViews when used inside Screens presented as Modals by react-navigation (Scroll does not work on android devices). So I had to use the ones from react-native-gesture-handler

[j-piasecki]

Hi! I added mock for flushOperations in daaeea8. Should be fixed in the next release.

[idrissakhi]

Hi! I added mock for flushOperations in daaeea8. Should be fixed in the next release.

Tried to patch it as you did, but it didn’t resolve my issue

[j-piasecki]

Hmm, I cannot reproduce it with the patch applied. Could you prepare a repository with a reproduction of it?

[DominicGBauer]

When will the next release with this be deployed?

[chrismcleod]

@idrissakhi i had the same issue.

needed to apply similar changes to node_modules/react-native-gesture-handler/lib/commonjs/mocks.js

[j-piasecki]

@DominicGBauer Just released Gesture Handler 2.4.1 contains the fix for this issue.

[idrissakhi]

@j-piasecki we need to add the same code to node_modules/react-native-gesture-handler/lib/commonjs/mocks.js, otherwise the new version does not resolve this issue at 100%

[j-piasecki]

@idrissakhi the code under lib/ is autogenerated, the 2.4.1 package includes changes in those files.

[idrissakhi]

Perfect, I will test new release today 💪

[hichemBAALI]

contains

@DominicGBauer Just released Gesture Handler 2.4.1 contains the fix for this issue.

Didn't work for me

[j-piasecki]

@hichemBAALI I'm not able to reproduce it after the fix. If this is still affecting you, could you prepare a reproduction?

@idrissakhi Did the new release fix the problem for you?

[j-piasecki]

Since the discussion has stopped, I'm assuming the problem was fixed by the latest release. I'll close the issue but if you are still experiencing it, feel free to reopen it.

[idrissakhi]

I confirm that the issue is resolved, thank you @j-piasecki

[cloudworkpro-hassen]

I am not sure if its a similar issue but I am getting this error when running yarn test

TypeError: Cannot read properties of undefined (reading 'flushOperations')

      at Object.<anonymous> (node_modules/react-native-gesture-handler/lib/commonjs/RNGestureHandlerModule.ts:19:28)
      at Object.<anonymous> (node_modules/react-native-gesture-handler/lib/commonjs/init.ts:2:1)

  console.error
    [react-native-gesture-handler] react-native-gesture-handler module was not found. Make sure you're running your app on the native platform and your code is linked properly (cd ios && pod install && cd ..).
    
    For installation instructions, please refer to https://docs.swmansion.com/react-native-gesture-handler/docs/#installation

      at Object.<anonymous> (node_modules/react-native-gesture-handler/lib/commonjs/RNGestureHandlerModule.ts:7:11)
      at Object.<anonymous> (node_modules/react-native-gesture-handler/lib/commonjs/init.ts:2:1)

in my package.json I have this

    "react-native-gesture-handler": "^2.4.2",

Also I have linked pods for IOS

[veho-paul]

Same issue here ^^

[j-piasecki]

Make sure you've setup Gesture Handler's mocks correctly as described here, as it looks like mocks for GH module are missing.