How to use react-native-action-sheet with hooks

Question

I'm trying to use https://github.com/expo/react-native-action-sheet in a functional component using the provided hook useActionSheet(). I'm already using the class components version without any problem but I'd like to switch to functional.

React version is 16.9.0

This is my component

import {
  connectActionSheet,
  useActionSheet,
} from "@expo/react-native-action-sheet";
import React, { Component } from "react";
import { View, Text, SafeAreaView } from "react-native";
import TaButton from "../components/TaButton";
import { typography, styles, buttons } from "../components/Styles";

const UploadUI: React.FC<{
  description: string;
  label: string;
}> = (props) => {
  const { showActionSheetWithOptions } = useActionSheet();

  const openActionSheet = () => {
    console.log("TEST - Choosing action now");
    const options = [
      "Scegli dalla libreria",
      "Scatta una foto",
      "Carica un file",
      "Annulla",
    ];
    //const destructiveButtonIndex = 0;
    const cancelButtonIndex = options.length - 1;

    showActionSheetWithOptions(
      {
        options,
        cancelButtonIndex,
        //destructiveButtonIndex,
      },
      (buttonIndex) => {
        // Do something here depending on the button index selected
        switch (buttonIndex) {
          case 0:
            console.log('Case 0')
            
            return;
          case 1:
            console.log("Case 1");
            return;
          case 2:
            console.log("Case 2");
            return;

          default:
        }
      }
    );
  };

  const { description, label } = props;
  return (
    <View style={{ flexDirection: "row", height: 50, marginBottom: 30 }}>
      <View style={{ flex: 0.7, justifyContent: "center" }}>
        <Text style={typography.body}>{description}</Text>
      </View>
      <View style={{ flex: 0.3 }}>
        <TaButton
          style={buttons.primary}
          labelStyle={buttons.primaryLabel}
          onPress={() => openActionSheet()}
          label={label}
        />
      </View>
    </View>
  );
};

const URWStep4: React.FC = (props) => {
  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.container}>
        <View style={{ paddingVertical: 30, marginBottom: 20 }}>
          <Text style={typography.title}>
            Ci serviranno alcuni documenti per verificare la tua identità
          </Text>
        </View>
        <UploadUI
          description="Carta d'identità - Fronte"
          label="Carica"
        ></UploadUI>
        <UploadUI
          description="Carta d'identità - Retro"
          label="Carica"
        ></UploadUI>
      </View>
    </SafeAreaView>
  );
};

export default connectActionSheet(URWStep4);

When clicking on buttons, the sentence "TEST - Choosing action now" is logged ad expected, but nothing more happens. The actionsheet does not open.

Answer 1

using useRef, I saw the issue in lib and Allanmaral's answer:

 
import ActionSheet from 'react-native-actionsheet'

const Demo = (props) => {
  const refActionSheet = useRef(null);

  showActionSheet = () => {
    if (refActionSheet.current) {
      refActionSheet.current.show();
    }
  }
  
  return (
      <View>
        <Text onPress={this.showActionSheet}>Open ActionSheet</Text>
        <ActionSheet
          ref={refActionSheet}
          title={'Which one do you like ?'}
          options={['Apple', 'Banana', 'cancel']}
          cancelButtonIndex={2}
          destructiveButtonIndex={1}
          onPress={(index) => { /* do something */ }}
        />
      </View>
    )
}

Answer 2

Check you have wrapped your top-level component with <ActionSheetProvider /> even when using hooks

https://github.com/expo/react-native-action-sheet#1-wrap-your-top-level-component-with-actionsheetprovider-