likern/react-native-enhanced-popup-menu

Doesn't work with RN 0.62.2

Closed this issue · 11 comments

losikov commented 
Unhandled JS Exception: TypeError: undefined is not an object (evaluating '_reactNative.TouchableHighlight.propTypes.style')

RCTFatal
-[RCTExceptionsManager reportFatal:stack:exceptionId:suppressRedBox:]
-[RCTExceptionsManager reportException:]
__invoking___
-[NSInvocation invoke]
-[NSInvocation invokeWithTarget:]
-[RCTModuleMethod invokeWithBridge:module:arguments:]
facebook::react::invokeInner(RCTBridge*, RCTModuleData*, unsigned int, folly::dynamic const&)
facebook::react::RCTNativeModule::invoke(unsigned int, folly::dynamic&&, int)::$_0::operator()() const
invocation function for block in facebook::react::RCTNativeModule::invoke(unsigned int, folly::dynamic&&, int)
_dispatch_call_block_and_release
_dispatch_client_callout
_dispatch_lane_serial_drain
_dispatch_lane_invoke
_dispatch_workloop_worker_thread
_pthread_wqthread
start_wqthread

MenuItem.js fix required.

likern commented

@losikov Could you provide minimal verifiable repository?

fabio-C commented

I got the same error.

walosha commented

It does work on my app any fix?

likern commented

It does work on my app any fix?

I expect to investigate on this issue during this week. But no exact due dates.

TomBerriot commented

Hi, we use react-native-material-menu and we have the same error, maybe that info can help.

Here are my errors outputs in Xcode ouput

2020-06-09 08:57:35.738183+0200 pcea[34435:1741152] [] nw_socket_handle_socket_event [C5.1:1] Socket SO_ERROR [61: Connection refused]
2020-06-09 08:57:35.742129+0200 pcea[34435:1741152] [] nw_socket_handle_socket_event [C5.2:1] Socket SO_ERROR [61: Connection refused]
2020-06-09 08:57:35.744455+0200 pcea[34435:1741163] [] nw_connection_get_connected_socket [C5] Client called nw_connection_get_connected_socket on unconnected nw_connection
2020-06-09 08:57:35.745232+0200 pcea[34435:1741163] TCP Conn 0x600001710900 Failed : error 0:61 [61]
2020-06-09 08:57:35.805 [error][tid:com.facebook.react.JavaScript] TypeError: undefined is not an object (evaluating '_reactNative.TouchableHighlight.propTypes.style')
2020-06-09 08:57:35.810 [fatal][tid:com.facebook.react.ExceptionsManagerQueue] Unhandled JS Exception: TypeError: undefined is not an object (evaluating '_reactNative.TouchableHighlight.propTypes.style')
2020-06-09 08:57:35.828 [error][tid:com.facebook.react.JavaScript] Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication)
2020-06-09 08:57:35.896 [fatal][tid:com.facebook.react.ExceptionsManagerQueue] Unhandled JS Exception: Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication)
2020-06-09 08:57:35.958454+0200 pcea[34435:1741598] 6.8.1 - [Firebase/Analytics][I-ACS031010] Tracking view controller. Class, ID: UIViewController, 170578337242257097
2020-06-09 08:57:35.959882+0200 pcea[34435:1741598] 6.8.1 - [Firebase/Analytics][I-ACS031013] Screen view event not logged. App is not active.
2020-06-09 08:57:36.256990+0200 pcea[34435:1741598] 6.8.1 - [Firebase/Analytics][I-ACS031006] View controller already tracked. Class, ID: UIViewController, 170578337242257097

Edit : React Native Material Menu fixed it by removing compltely PropTypes related code : https://github.com/mxck/react-native-material-menu/releases/tag/v1.1.2

  • 👍1
likern commented

Fixed in published package.

  • 🎉1
likern commented

I've added react-native demo application to show how to use library with React Native 0.62.2 using TypeScript.

likern commented

I'm trying to run (without typescript) with RN 0.62 and it does not work.
Getting:

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got undefined. you likely forgot to export your component...

using 0.6.1 and deleting all PropTypes related code as @TomBerriot suggested worked for me.

I think your issue is not related to react-native-enhanced-popup-menu.

In new version I've completely removed PropTypes, substituting them to TypeScript types. I've just checked library with pure Javascript example and it's working just fine.

Here is Javascript example (just deleted all types)

import React from 'react';
import {
  View,
  Text,
  Button as RNButton,
  StyleProp,
  ViewStyle,
} from 'react-native';
import {
  Menu,
  MenuItem,
  MenuDivider,
  Position,
} from 'react-native-enhanced-popup-menu';

const ElementToStick = React.forwardRef(({style}, ref) => {
  return (
    <View
      ref={ref}
      style={[
        {
          padding: 16,
          borderColor: 'grey',
          borderWidth: 2,
          justifyContent: 'center',
          alignItems: 'center',
        },
        style,
      ]}>
      <Text>Element to which menu is sticked</Text>
    </View>
  );
});

const Button = ({title, style, onPress}) => {
  return (
    <View style={style}>
      <RNButton title={title} onPress={onPress} />
    </View>
  );
};

const App = () => {
  let elementRef = React.createRef();
  let menuRef = null;

  const setMenuRef = ref => (menuRef = ref);
  const hideMenu = () => menuRef?.hide();
  const showMenu = () => {
    menuRef?.show(elementRef.current, Position.TOP_LEFT);
  };

  const onPress = () => showMenu();
  return (
    <>
      <View
        style={{
          width: '100%',
          height: '100%',
          alignItems: 'center',
          justifyContent: 'center',
        }}>
        <ElementToStick ref={elementRef} />
        <Button
          style={{position: 'absolute', bottom: 64}}
          title={'Press to show menu'}
          onPress={onPress}
        />
        <Menu ref={setMenuRef}>
          <MenuItem onPress={hideMenu}>Item 1</MenuItem>
          <MenuItem onPress={hideMenu}>Item 2</MenuItem>
          <MenuItem onPress={hideMenu} disabled>
            Item 3
          </MenuItem>
          <MenuDivider />
          <MenuItem onPress={hideMenu}>Item 4</MenuItem>
        </Menu>
      </View>
    </>
  );
};

export default App;
  • 👍1
mynameisguy commented

@likern
you are right I imported the components in the library wrong:
import Menu, {MenuItem, Position} from 'react-native-enhanced-popup-menu';
instead of:
import {Menu, MenuItem, Position} from 'react-native-enhanced-popup-menu';

That's why I deleted my comment when I realized that after a few minutes.
You already saw it and comment :) So thanks!

likern commented

@likern
you are right I imported the components in the library wrong:
import Menu, {MenuItem, Position} from 'react-native-enhanced-popup-menu';
instead of:
import {Menu, MenuItem, Position} from 'react-native-enhanced-popup-menu';

That's why I deleted my comment when I realized that after a few minutes.
You already saw it and comment :) So thanks!

I'll have to put that in Breaking Changes in release information.

Your original import was correct. In new library vesion I changed how import is done - deleting default import.

  • 👍1