AtharvaDeolalikar / react-native-animated-bottom-drawer

A lightweight and animated bottom drawer for react native 🚀
https://www.npmjs.com/package/react-native-animated-bottom-drawer
28 stars 10 forks source link

bottomDrawerRef.close() also closes other modals #6

Open nitasn opened 6 months ago

nitasn commented 6 months ago

I'm using this (amazing library, btw) to prompt "Add Photo from Camera / Image Library" inside a bottom drawer. when the user chooses "Library", I close the drawer and open expo's image picker, with ImagePicker.launchImageLibraryAsync.

However, it turns out calling bottomDrawerRef.close() also immediately closes expo's image picker modal :(

Below are the relevant parts from my code.

import * as ImagePicker from "expo-image-picker";
import BottomDrawer from "react-native-animated-bottom-drawer";
<BottomDrawer ref={bottomDrawerRef} gestureMode="content" initialHeight={240}>
  <View style={styles.bottomDrawer}>
    <Text style={styles.bottomDrawerTitle}>Add Photo</Text>
    <MenuItem
      iconName="camera-outline"
      text="From Camera"
      onPress={() => {
        bottomDrawerRef.current.close();
        pickImageFrom("Camera");
      }}
    />
    <MenuItem
      iconName="image-outline"
      text="From Gallery"
      onPress={async () => {
        bottomDrawerRef.current.close();    //  <--------- closing the drawer here
        pickImageFrom("ImageLibrary");
      }}
    />
  </View>
</BottomDrawer>
/**
* @param {'Camera' | 'ImageLibrary'} source
*/
const pickImageFrom = async (source) => {
  const launchPicker = {
    Camera: ImagePicker.launchCameraAsync,
    ImageLibrary: ImagePicker.launchImageLibraryAsync,
  }[source];

  const results = await launchPicker({  //  <--------- this image picker opens then immediately closes  :(
    mediaTypes: ImagePicker.MediaTypeOptions.Images,
    allowsEditing: true,
    aspect: [1, 1],
    quality: 0.5,
    base64: true,
  });

  if (!results.canceled && results.assets) {
    setImages((currentImages) => [...currentImages, ...results.assets]);
  }
};
xinkuiwu commented 1 month ago

same problem