TypeError: undefined is not an object (evaluating 'refRBSheet.current.open')

Question

I tried to use react-native-raw-bottom-sheet as a reusable component. And I created one parent Componet, The problem is When I tries to give the values I got this error.

 TypeError: undefined is not an object (evaluating 'refRBSheet.current.open')

parent component

import React from 'react';
import RBSheet from 'react-native-raw-bottom-sheet';

const CustomActionSheet = (props) => {
  const { ref, Content, height } = { ...props };
  return (
    <RBSheet
      height={height}
      ref={ref}
      closeOnDragDown={true}
      closeOnPressMask={true}
      customStyles={{
        wrapper: {
          backgroundColor: 'transparent',
        },
        draggableIcon: {
          backgroundColor: '#000',
        },
      }}
    >
      {Content}
    </RBSheet>
  );
};

export default CustomActionSheet;

child component

<View style={styles.chsDlvrBtn}>
          <Button title="Choose Delivery" onPress={() => refRBSheet.current.open()} />
        </View>
        <CustomActionSheet
          ref={refRBSheet}
          Content={
            <View style={styles.view}>
              {MONTH_OF_YEAR.map((val) => {
                return (
                  <Chip mode="outlined" onPress={() => {}} style={styles.chp}>
                    {val}
                  </Chip>
                );
              })}
            </View>
          }
        />

ref hook

const refRBSheet = useRef()

What's going wrong here. Thanks, Advance !!!

Hi, I think it's the problem with forward ref. can you take a look into this https://reactjs.org/docs/forwarding-refs.html — Sivakumar A, May 01 '21 at 20:48

jeremyblong · Accepted Answer · 2021-05-31T04:47:46.957

I only know how to do this with functional components but do this...

Put RBSheet or whatever ref'd sheet in the child component
import child component into parent component (import component with slide-up sheet into main component
create a ref in the parent component with something like this.sheetRef = React.createRef();
pass that ref as props to your RBSheet child component (RBSheet should be IN the child component - not the parent - your essentially importing a helper component with the RBSheet in it) - should look something like <MyChildComponent {...otherProps} sheetRef={this.sheetRef} />
To open in parent component do something like this.sheetRef.current.open(); and in the child component, something like sheetRef.current.close();

RBSheet in child component should look something like...

import RBSheet from 'react-native-raw-bottom-sheet'

const MyChildComponent = ({ sheetRef }) => {
useEffect(() => {
    sheetRef.current.close();
}, [])
return(
        <RBSheet
            ref={sheetRef} 
            closeOnDragDown={true}
            height={height * 0.90}
            openDuration={250}
            customStyles={{
                container: {
                    borderTopLeftRadius: 40,
                    borderTopRightRadius: 40
                },
                draggableIcon: {
                    backgroundColor: "grey",
                    width: 250
                }
            }}
            > 
        </RBSheet>
    );
};

parent component should look something like...


class MyParentComponent extends Component {
constructor (props) {
super(props);
 this.sheetRef = React.createRef();
}
componentDidMount () {
   this.sheetRef.current.open();
}
render () {
  return (
     <Fragment>
          <MyChildComponent {...otherProps} sheetRef={this.sheetRef} />
     </Fragment>
  );
 }
}

score 0 · Answer 2 · answered Jul 06 '22 at 09:25

0

Try replacing onPress={() => refRBSheet.current.open()} with onPress={() => refRBSheet?.current?.present()}

answered Jul 06 '22 at 09:25

Joumana Moussa

1
1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jul 08 '22 at 00:42

TypeError: undefined is not an object (evaluating 'refRBSheet.current.open')

2 Answers2