react-native-actions-sheet

react-native-actions-sheet copied to clipboard

Whenever I try to hide the action sheet, this happens.

The Detailed Code is given Below `<ActionSheet ref={petOptionsActionSheet} bounceOnOpen={true}> <View style={{ flexDirection: 'column', margin: 20, marginBottom: 30, }}> <ClickableText onPress={() => { console.log('Add Media'); photoOrVideoActionSheet.current.setModalVisible(); }} textToPut={'Add Media'} textStyle={{ margin: 8, color: colors.blue, alignSelf: 'center', fontSize: 20, fontFamily: 'ProductSans-Medium', }} />

      <ClickableText
        onPress={() => {
          console.log('Delete');
          petOptionsActionSheet.current.hide();
          firestore().collection('allPets').doc(data.petId).delete();
          navigation.goBack();
        }}
        textToPut={'Delete'}
        textStyle={{
          margin: 8,
          marginTop: 16,
          alignSelf: 'center',
          color: colors.blue,
          fontSize: 20,
          fontFamily: 'ProductSans-Medium',
        }}
      />

      <ClickableText
        onPress={() => {
          petOptionsActionSheet.current.setModalVisible();
        }}
        textToPut={'Cancel'}
        textStyle={{
          margin: 8,
          marginTop: 25,
          alignSelf: 'center',
          color: colors.danger,
          fontSize: 20,
          fontFamily: 'ProductSans-Medium',
        }}
      />
    </View>

    <ActionSheet ref={photoOrVideoActionSheet} bounceOnOpen={true}>
      <View
        style={{
          flexDirection: 'column',
          margin: 20,
          marginBottom: 30,
        }}>
        <ClickableText
          onPress={() => {
            console.log('PhotoSelected');
            photoOrVideoSelected = 'photo';
            cameraOrGalleryActionSheet.current.setModalVisible();
          }}
          textToPut={'Photo'}
          textStyle={{
            margin: 8,
            color: colors.blue,
            alignSelf: 'center',
            fontSize: 20,
            fontFamily: 'ProductSans-Medium',
          }}
        />

        <ClickableText
          onPress={() => {
            console.log('VideoSelected');
            photoOrVideoSelected = 'video';
            cameraOrGalleryActionSheet.current.setModalVisible();
          }}
          textToPut={'Video'}
          textStyle={{
            margin: 8,
            marginTop: 16,
            alignSelf: 'center',
            color: colors.blue,
            fontSize: 20,
            fontFamily: 'ProductSans-Medium',
          }}
        />

        <ClickableText
          onPress={() => {
            photoOrVideoActionSheet.current.setModalVisible();
          }}
          textToPut={'Cancel'}
          textStyle={{
            margin: 8,
            marginTop: 25,
            alignSelf: 'center',
            color: colors.danger,
            fontSize: 20,
            fontFamily: 'ProductSans-Medium',
          }}
        />
      </View>

      <ActionSheet ref={cameraOrGalleryActionSheet} bounceOnOpen={true}>
        <View
          style={{
            flexDirection: 'column',
            margin: 20,
            marginBottom: 30,
          }}>
          <ClickableText
            onPress={() => {
              console.log('Camera');

              pickImageOrVideo(
                'camera',
                photoOrVideoSelected,
                returnUri => {
                  console.log('URI:: ' + returnUri);
                  if (photoOrVideoSelected === 'photo') {
                    uploadPhoto(returnUri);
                  } else if (photoOrVideoSelected === 'video') {
                    uploadVideo(returnUri);
                  }
                  petOptionsActionSheet.current?.hide();
                },
              );
              //var uri = cameraOrGallery('camera');
              // try {
              //   petOptionsActionSheet.current.setModalVisible();
              //   // cameraOrGalleryActionSheet.current.setModalVisible();
              //   // photoOrVideoActionSheet.current.setModalVisible();
              // } catch (error) {}
            }}
            textToPut={'Camera'}
            textStyle={{
              margin: 8,
              color: colors.blue,
              alignSelf: 'center',
              fontSize: 20,
              fontFamily: 'ProductSans-Medium',
            }}
          />

          <ClickableText
            onPress={() => {
              console.log('Gallery');
              pickImageOrVideo(
                'gallery',
                photoOrVideoSelected,
                returnUri => {
                  console.log('URI:: ' + returnUri);
                  if (photoOrVideoSelected === 'photo') {
                    uploadPhoto(returnUri);
                  } else if (photoOrVideoSelected === 'video') {
                    uploadVideo(returnUri);
                  }
                  petOptionsActionSheet.current.hide();
                },
              );
            }}
            textToPut={'Gallery'}
            textStyle={{
              margin: 8,
              marginTop: 16,
              alignSelf: 'center',
              color: colors.blue,
              fontSize: 20,
              fontFamily: 'ProductSans-Medium',
            }}
          />

          <ClickableText
            onPress={() => {
              cameraOrGalleryActionSheet.current.setModalVisible();
            }}
            textToPut={'Cancel'}
            textStyle={{
              margin: 8,
              marginTop: 25,
              alignSelf: 'center',
              color: colors.danger,
              fontSize: 20,
              fontFamily: 'ProductSans-Medium',
            }}
          />
        </View>
      </ActionSheet>
    </ActionSheet>
  </ActionSheet>`