ERROR TypeError: Cannot read property 'length' of undefined

[anthonylau323]

I got the TypeError when using the action sheet on android. Anyone know how to fix it

[bradbyte]

Hello, hard to say without seeing any code. Can you provide a sample of the code that reproduces the error? Thanks.

[bradbyte]

Going to close... please reopen if you can provide an example. Thanks!

[iriscoopers]

Hi @bradbyte, I have this issue as well.

Using react-native: 0.72.4 react-native-action-sheet latest version Android SDK 33

My component:

import React, { useCallback, useRef } from 'react';
import { StyleSheet, View, Linking } from 'react-native';
import WebView from 'react-native-webview';
import { connectActionSheet } from "@expo/react-native-action-sheet";
[..snip..]

function MyComponent({ showActionSheetWithOptions }) {
  [..snip..]

  const handleWebviewMessage = useCallback((e) => {
    const parsed_json = JSON.parse(e.nativeEvent.data);
    const json_data = parsed_json.data;

    switch (parsed_json.method) {
      case 'download':
        console.log('download')
        break;
      case 'upload':
        openImagePickerMenu();
        break;
      case 'openlink':
        console.log('openlink')
        break;
    }
  }, []);

  const openImagePickerMenu = () => {
    const actionSheetOptions = [
      'Cancel',
      'Take a picture',
      'Upload a photo',
      'Upload a file',
    ];
    const cancelButtonIndex = 0;

    showActionSheetWithOptions(
      {
        actionSheetOptions,
        cancelButtonIndex,
        title: 'Selecteer een actie',
      },
      (buttonIndex) => {
        console.log('buttonIndex', buttonIndex);
      }
    );

  return(
    <View style={styles.container}>
      <WebView
        source={{uri: url}}
        onMessage={handleWebviewMessage}
      />
    </View>
  )

}

export default connectActionSheet(MyComponent);
[..snip..]

• showActionSheetWithOptions is defined but even with this barebone set up I run into this error.
• My App component is wrapped inside the <ActionSheetProvider> component.

Screenshots:

As you can see I have no problem logging the options, but as soon as showActionSheetWithOptions is called, it breaks.

Thanks for your time. I hope this info helps and you can give me some pointers :)

[iriscoopers]

Got help from someone and I found my mistake 😅

Commenting here so it might help you, @anthonylau323 :

Because I gave my options array a different name than options, it needs to be passed using the options: key:

  const actionSheetOptions = [..];

    showActionSheetWithOptions(
      {
        options: actionSheetOptions,
      },
      (buttonIndex) => {
        ...
      }
    );