BottomSheet function called before onPress?-CodePudding

I'm new to react js and I can't figure out why the bottom sheet opens up before I press the Avatar onPress? Please help me out!

function Profile() {

  const sheetRef = React.useRef(null);
return (
<SafeAreaView style={styles.container2}>
    <View style={styles.profileview}>
        <TouchableOpacity onPress={() => sheetRef.current.snapTo(0)}>
            <Avatar.Image
                source={require("../assets/defaultprofile.jpg")}
                size={80}/>
        </TouchableOpacity>
        <Title style={styles.text}>Name</Title>
        <Caption style={styles.caption}>@username</Caption>
    </View>
    <BottomSheet
    ref={sheetRef}
    snapPoints={[200, 150, 0]}
    borderRadius={10}
    renderContent={renderContent}/>
</SafeAreaView>
);}

CodePudding user response：

The package takes the first index of 'snapPoints' prop as the default point when it mounts. There are two options to fix it:

1- You can change the 'snapPoints' prop to [0, 150, 200]. When you do this change, it will take the first index (0), and it will be mounted as 'closed' 2- Second option is to use another prop called 'initialSnap' that takes the index of the initial point, which is 2 for you.

So, to be clear, here is the code block that I think is a solution:

function Profile() {

  const sheetRef = React.useRef(null);
  return (
      <SafeAreaView style={styles.container2}>
          <View style={styles.profileview}>
              <TouchableOpacity onPress={() => sheetRef.current.snapTo(0)}>
                  <Avatar.Image
                      source={require("../assets/defaultprofile.jpg")}
                          size={80}/>
              </TouchableOpacity>
              <Title style={styles.text}>Name</Title>
              <Caption style={styles.caption}>@username</Caption>
          </View>
        <BottomSheet
             ref={sheetRef}
             snapPoints={[200, 150, 0]}
             initialSnap={2}
             borderRadius={10}
             renderContent={renderContent}
        />
     </SafeAreaView>
 );}

I hope it helps. Best of luck