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 !!!

Answer 1

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

1. Put RBSheet or whatever ref'd sheet in the child component

2. import child component into parent component (import component with slide-up sheet into main component

3. create a ref in the parent component with something like this.sheetRef = React.createRef();

4. 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} />

5. To open in parent component do something like this.sheetRef.current.open(); and in the child component, something like sheetRef.current.close();

6. 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>
       );
   };
   
   

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