When do you support hooks?

[khsi12345]

I am using a functional component, not a class component. How should I give ref to <ActionSheet>? ref = {ref => this.ActionSheet = ref} ?? This method cannot be used in hooks

[huuthinh245]

useRef sir

[MahmudHasanMenon]

@huuthinh245 please explain how can we use useRef?

[allanmaral]

@MahmudHasanMenon Using the example in the README as base, you can use in functional components like this:

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

[phanvinh876]

you save my day @allanmaral

[Esoriak]

Thanks to you @allanmaral !!

[noumantahir]

the onPress callback is referencing the old state... is there any workaround?

[trinhnguyen99]

Thank you @allanmaral <3

[badalpub1991]

Property 'show' does not exist on type 'never'.ts(2339)

import React, { useRef } from "react";
import { View, Text } from "react-native";
import ActionSheet from "react-native-actionsheet";

interface CrossActionSheetProps {
onCloseButtonPress?: () => void;
onButtonPress?: (index: any) => void;
arrOptions: any;
distructiveIndex: any;
headerTitle: any;
isOpenActionSheet: any;
}

// const options = [
//   "Cancel",
//   "Apple",
//   <Text style={{ color: "yellow" }}>Banana</Text>,
//   "Watermelon",
//   <Text style={{ color: "red" }}>Durian</Text>,
// ];

const CrossActionSheet = ({
headerTitle,
arrOptions,
onButtonPress,
distructiveIndex,
}: CrossActionSheetProps) => {
const refActionSheet = useRef(null);
const showActionSheet = () => {
 if (refActionSheet.current) {
   refActionSheet.current.show();
 }
};

console.log("atSheet");
return (
 <View>
   <Text onPress={showActionSheet}>Open ActionSheet</Text>
   <ActionSheet
     ref={refActionSheet}
     title={
       <Text style={{ color: "#000", fontSize: 18 }}>{headerTitle}</Text>
     }
     options={arrOptions}
     cancelButtonIndex={0}
     destructiveButtonIndex={distructiveIndex}
     onPress={(index: any) => {
       onButtonPress;
     }}
   />
 </View>
);
};
export default CrossActionSheet;

[badalWiser]

I am getting error const refActionSheet = useRef(null); in code(undefined is not a function) by @allanmaral

import React from 'react';
import {View, Text, useRef, useEffect} from 'react-native';
import {ActionSheetCustom as ActionSheet} from 'react-native-actionsheet';

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

  const showActionSheet = () => {
    if (refActionSheet.current) {
      refActionSheet.current.show();
    }
  };

  return (
    <View>
      <Text onPress={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>
  );
};

export default InvalidVersionAlert;

[allanmaral]

@badalWiser you are invoking the showActionSheet function as you pass it as a prop.

The updated sample code using TypeScript for future reference. Remember to install @types/react-native-actionsheet

import { Text, View } from 'react-native';
import { useRef } from 'react';
import ActionSheet from 'react-native-actionsheet'

const Demo: React.FC = (props) => {
  const refActionSheet = useRef<ActionSheet>(null);

  const showActionSheet = () => {
    if (refActionSheet.current) {
      refActionSheet.current.show();
    }
  }
  
  return (
      <View>
        <Text onPress={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>
    )
}