Im trying to do bottomSheet on react native but ım getting an error. Error is: Type 'string&#03-CodePudding

<BottomSheet
      bottomSheerColor="#FFFFFF"
      ref="BottomSheet"
      initialPosition={'50%'} 
      snapPoints={['50%', '100%']}
      isBackDrop={true}
      isBackDropDismissByPress={true}
      backDropColor="red"             //======> this prop will change color of backdrop
      
      header={
        <View>
          <Text style={styles.text}>Header</Text>
        </View>
      }
      body={
        <View style={styles.body}>
          <Text style={styles.text}>Body</Text>
        </View>
      }
    />

the problem line is: ref="BottomSheet"

this ref is main problem

how can i fix this ?

CodePudding user response：

String refs are legacy implementation. Please use the useRef hook to manage ref.

const bottomsheetRef = React.useRef(null)

....

<BottomSheet
  ref={bottomsheetRef}
/>

Now to access the ref, do

bottomsheetRef.current

CodePudding user response：

import: import { BottomSheet } from 'react-native-btr';

const [visible, setVisible] = useState(false);

const toggleBottomNavigationView = () => {
  //Toggling the visibility state of the bottom sheet
  setVisible(!visible);
};

this is bottomSheet:

 <BottomSheet
      visible={visible}
      //setting the visibility state of the bottom shee
      onBackButtonPress={toggleBottomNavigationView}
      //Toggling the visibility state on the click of the back botton
      onBackdropPress={toggleBottomNavigationView}
    //Toggling the visibility state on the clicking out side of the sheet
    >
      <View >
        <Text>asd</Text>
      </View>
    </BottomSheet>