javascript - How to use react-native-action-sheet with hooks - Stack Overflow

admin管理员组

文章数量:1430802

I'm trying to use in a functional ponent using the provided hook useActionSheet(). I'm already using the class ponents version without any problem but I'd like to switch to functional.

React version is 16.9.0

This is my ponent

import {
  connectActionSheet,
  useActionSheet,
} from "@expo/react-native-action-sheet";
import React, { Component } from "react";
import { View, Text, SafeAreaView } from "react-native";
import TaButton from "../ponents/TaButton";
import { typography, styles, buttons } from "../ponents/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.

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

React version is 16.9.0

This is my ponent

import {
  connectActionSheet,
  useActionSheet,
} from "@expo/react-native-action-sheet";
import React, { Component } from "react";
import { View, Text, SafeAreaView } from "react-native";
import TaButton from "../ponents/TaButton";
import { typography, styles, buttons } from "../ponents/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.

• javascript
• react-native
• react-hooks
• actionsheet

Share Improve this question Follow edited Dec 15, 2021 at 20:15 Michel Floyd 20.3k44 gold badges2626 silver badges4444 bronze badges asked Aug 11, 2020 at 13:50 zeightszeights 10311 silver badge66 bronze badges 2

• 1 Did you find a solution ? Also looking for that. – Luc Commented Oct 6, 2020 at 16:46
• Can you post full solution please – krishna Commented Oct 25, 2021 at 9:54

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 1

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

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

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>
    )
}

本文标签： javascriptHow to use reactnativeactionsheet with hooksStack Overflow