enesozturk / react-native-hold-menu

📱 A performant, easy to use hold to open context menu for React Native powered by Reanimated 🚀
https://enesozturk.github.io/react-native-hold-menu/
MIT License
1.42k stars 95 forks source link

undefined is not an object (evaluating '_useInternal.state') #23

Open kacperkwapisz opened 3 years ago

kacperkwapisz commented 3 years ago

That's the only error showing up which won't allow me to use the react-native-hold-menu. Do you know how to fix this?

undefined is not an object (evaluating '_useInternal.state')

ksitko commented 3 years ago

What version of Reanimated are you using? There should be no error with the latest release, "react-native-reanimated": "2.1.0"

kacperkwapisz commented 3 years ago

I'm using the 2.1.0. I'm not sure what is the problem here

enesozturk commented 3 years ago

Hi @kacperkwapisz, is the problem still exist? If yes could you provide more details how did you used the Hold Menu with code snippets, provide versions and other details in issue template.

filiptronicek commented 3 years ago

@enesozturk, I think I might be getting the same problem as @kacperkwapisz on iOS, which is undefined is not an object (evaluating 'O.state'). This is my package.json:

{
  "dependencies": {
    "react-native-paper": "3.6.0",
    "expo-constants": "~10.1.3",
    "react-native-hold-menu": "*",
    "react-native-reanimated": "~2.1.0",
    "expo-blur": "~9.0.3",
    "react-native-gesture-handler": "~1.10.2"
  }
}

This is my App.js:

import React from 'react';
import { View } from 'react-native';

import { HoldItem } from 'react-native-hold-menu';

const MenuItems = [
  { text: 'Actions', icon: 'home', isTitle: true, onPress: () => {} },
  { text: 'Action 1', icon: 'edit', onPress: () => {} },
  { text: 'Action 2', icon: 'map-pin', withSeparator: true, onPress: () => {} },
  { text: 'Action 3', icon: 'trash', isDestructive: true, onPress: () => {} },
];

const Example = () => {
  return (
    <HoldItem
      items={[
        { text: 'Actions', isTitle: true, onPress: () => {} },
        { text: 'Reply', onPress: () => {} },
        { text: 'Edit', onPress: () => {} },
        { text: 'Delete', onPress: () => {} },
      ]}
    />
  );
};

export default Example;

This is an Expo snack as a demo: https://snack.expo.io/@filiptronicek/react-native-hold-menu-bug

filiptronicek commented 3 years ago

When I ran this locally with Expo, this error I got seems to be the exact same as @kacperkwapisz!

TypeError: undefined is not an object (evaluating '_useInternal.state')
This error is located at:
    in HoldItemComponent (at App.js:10)
    in RCTView (at View.js:34)
    in View (at App.js:9)
    in App (created by ExpoRoot)
    in ExpoRoot (at renderApplication.js:45)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:106)
    in DevAppContainer (at AppContainer.js:121)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:132)
    in AppContainer (at renderApplication.js:39)
Stack trace ``` node_modules\react-native\Libraries\LogBox\LogBox.js:148:8 in registerError node_modules\react-native\Libraries\LogBox\LogBox.js:59:8 in errorImpl node_modules\react-native\Libraries\LogBox\LogBox.js:33:4 in console.error node_modules\expo\build\environment\react-native-logs.fx.js:27:4 in error node_modules\react-native\Libraries\Core\ExceptionsManager.js:104:6 in reportException node_modules\react-native\Libraries\Core\ExceptionsManager.js:171:19 in handleException node_modules\react-native\Libraries\Core\ReactFiberErrorDialog.js:43:2 in showErrorDialog node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:15257:32 in logCapturedError node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:15361:20 in logError node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:16597:12 in update.callback node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:7106:2 in callCallback node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:7127:20 in commitUpdateQueue node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:15801:25 in commitLifeCycles node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:18744:22 in commitLayoutEffects node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:265:4 in invokeGuardedCallbackImpl node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:476:2 in invokeGuardedCallback node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:18483:29 in commitRootImpl [native code]:null in commitRootImpl node_modules\scheduler\cjs\scheduler.development.js:653:23 in unstable_runWithPriority node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:18317:17 in commitRoot node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:17697:12 in performSyncWorkOnRoot [native code]:null in performSyncWorkOnRoot node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5321:31 in runWithPriority$argument_1 node_modules\scheduler\cjs\scheduler.development.js:653:23 in unstable_runWithPriority node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5316:21 in flushSyncCallbackQueueImpl node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5304:28 in flushSyncCallbackQueue node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:17741:26 in flushSync node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:6154:13 in scheduleRefresh node_modules\react-refresh\cjs\react-refresh-runtime.development.js:218:8 in mountedRoots.forEach$argument_0 [native code]:null in forEach node_modules\react-refresh\cjs\react-refresh-runtime.development.js:210:4 in performReactRefresh node_modules\react-native\Libraries\Core\setUpReactRefresh.js:43:6 in Refresh.performReactRefresh node_modules\metro\src\lib\polyfills\require.js:627:10 in setTimeout$argument_0 node_modules\react-native\Libraries\Core\Timers\JSTimers.js:130:14 in _callTimer node_modules\react-native\Libraries\Core\Timers\JSTimers.js:383:16 in callTimers node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:416:4 in __callFunction node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:109:6 in __guard$argument_0 node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:364:10 in __guard node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:108:4 in callFunctionReturnFlushedQueue [native code]:null in callFunctionReturnFlushedQueue ... ```
enesozturk commented 3 years ago

Hi @filiptronicek, thanks for providing all the details. I will check these as soon as possible. 👍🏽

tcolinpa commented 3 years ago

any updates?

enesozturk commented 2 years ago

Hi guys, it's been a long time. I tried to reproduce the issue in both bare workflow and managed workflow by Expo but could not handle it. Anyone still having the issue?

filiptronicek commented 2 years ago

@enesozturk I still am, just checked with my iPhone XS running iOS 15.3 (tried the provided Expo Snack with the Expo Go app)

Joehoel commented 2 years ago

Did you use the HoldMenuProvider like in the docs?

import React from 'react';

import { HoldMenuProvider } from 'react-native-hold-menu';

const App = () => {
  return (
    <HoldMenuProvider theme="light">
      {/* Your app components */}
    </HoldMenuProvider>
  );
};

export default App;
kesha-antonov commented 2 years ago

Same error here

kesha-antonov commented 2 years ago
Screenshot 2022-11-18 at 08 59 07 Screenshot 2022-11-18 at 08 59 26
kesha-antonov commented 2 years ago

I forgot to use

import { HoldMenuProvider } from 'react-native-hold-menu'

<HoldMenuProvider>
  ...
</HoldMenuProvider>

now it works