monstrodev / expo-image-picker-multiple Goto Github PK

View Code? Open in Web Editor NEW

64.0 64.0 68.0 281 KB

Multiple image selecting package for Expo SDK (React Native) using MediaLibrary and Permissions.

JavaScript 100.00%

expo-image-picker-multiple's People

Contributors

Stargazers

Watchers

expo-image-picker-multiple's Issues

Package doesn't work after uploading to play store

Hi, please when I generated an apk file and tested my app, it works but when I uploaded the app bundle for google play store internal testing, the package doesn't work, and all images didn't show. Is there something I need to do when pushing my app to production? @MonstroDev

Screen orientation uses incorrect constants

ImageBrowser.js, line 53:

getNumColumns = orientation => orientation === ScreenOrientation.Orientation.PORTRAIT ? 4 : 7;

The PORTRAIT constant is not defined on ScreenOrientation.Orientation using recent versions of expo-screen-orientation. More recent versions define PORTRAIT_UP and PORTRAIT_DOWN. By modifying this line to include the newer constants, it should always work:

getNumColumns = orientation => (orientation === ScreenOrientation.Orientation.PORTRAIT || orientation === ScreenOrientation.Orientation.PORTRAIT_UP || orientation === ScreenOrientation.Orientation.PORTRAIT_DOWN) ? 4 : 7;

images not getting properly selected

There is an issue in selectImage function in ImageBrowser.js. This is due to line this.setState({selected: newSelected}. As setState is asynch, the prepareCallback works before the state is set. In order to avoid this I had to call the prepareCallback inside a callback from setState.

  this.setState({selected: newSelected}, () =>{
      this.props.onChange(newSelected.length, () => this.prepareCallback());
    });

VirtualizedLists should never be nested inside plain ScrollViews with the same orientation

what the problem and how to fix it ?

handling videos aswell

Would it be possible to also get videos into the feed?

Image file contents

How can we get the actual bytes of the images selected so I can upload them to the server? I'd like to get the raw bytes or a base64 version of the file.

expo-permissions v8.0.0 is broken on Expo 35

Hi,

I'm having issues running this package with Expo 35, since it's shipped with expo-permissions v8.0.0 and appears to be broken on iOS only (Everything is working well on Android though.)

Do you have any viable solution without upgrading Expo's SDK ?

For reference, here's the error thrown when asking for permissions :

[__NSCFString countByEnumeratingWithState:objects:count:]: unrecognized selector sent to instance

Thanks

Close and Done button is missing

Please enable the close and done button is missing

getNumColumns is backwards

// ImageBrowser.js, line 53:
getNumColumns = orientation => orientation !== ScreenOrientation.Orientation.PORTRAIT_UP ? 4 : 7;

This is backwards. If the screen orientation is portrait, then the column count should be 4, not 7.
The code should read

getNumColumns = orientation => orientation === ScreenOrientation.Orientation.PORTRAIT_UP ? 4 : 7;

New Expo SDK 42 breaks expo-image-picker-multiple

Hi,

In the new Expo SDK 42 the expo-permissions library was deprecated in expo SDK 42 in favor of module specific permissions (https://blog.expo.io/expo-sdk-42-579aee2348b6)

As a result, this breaks expo-image-picker-multiple because it's still based on expo-permissions.

Will there be an update in line with the expo-permissions deprecation for this expo-image-picker-multiple? When do you project this to be completed?

Thanks so much!

I need to know how I can use this?

Can you please provide a fully working snack as the snack link you mentioned is not working. Thank You

getAssetInfoAsync error

Hello!

Expo sdk 38

Error:

imagePicker ImageBrowser callback catch error [Error: Native method ExponentMediaLibrary.getAssetInfoAsync expects 1 argument but received 2]

Workaround for now is to pass loadCompleteMetadata false

Expo-Snack not displaying photos to choose from after granting permissions

Tried opening it on an iPhone X and an iPhone 7, but on both devices, after providing permissions, I see a blank screen without any photos.

No photos shown if I turn camera permissions off.

After removing the camera permissions the component stops showing any images. How is this possible?

Cannot use module due to `Invariant Violation: Tried to register two views with the same name RNSVGSvgView`

Just trying to use the package as instructed in README.md but due to the error, it doesn't work.

If anyone knows how to fix this, please help me or is there any other ways to use multiple selection for images? (I couldn't find good ones)

My dependencies are:

"dependencies": {
    "@react-native-async-storage/async-storage": "~1.17.3",
    "@react-native-firebase/app": "^15.4.0",
    "@react-native-picker/picker": "2.4.2",
    "@react-navigation/native": "^6.0.12",
    "@react-navigation/native-stack": "^6.8.0",
    "@rneui/base": "^4.0.0-rc.6",
    "@rneui/themed": "^4.0.0-rc.6",
    "dotenv": "^16.0.2",
    "expo": "~46.0.9",
    "expo-auth-session": "~3.7.1",
    "expo-firebase-core": "~5.1.1",
    "expo-image-multiple-picker": "^4.4.0",
    "expo-image-picker": "~13.3.1",
    "expo-localization": "~13.1.0",
    "expo-random": "~12.3.0",
    "expo-status-bar": "~1.4.0",
    "expo-web-browser": "~11.0.0",
    "firebase": "^9.9.3",
    "i18n-js": "^4.1.1",
    "react": "18.0.0",
    "react-dom": "18.0.0",
    "react-native": "0.69.5",
    "react-native-draggable-flatlist": "^3.1.2",
    "react-native-element-dropdown": "^2.3.0",
    "react-native-gesture-handler": "~2.5.0",
    "react-native-jazzicon": "^0.1.2",
    "react-native-keyboard-aware-scroll-view": "^0.9.5",
    "react-native-reanimated": "~2.9.1",
    "react-native-safe-area-context": "4.3.1",
    "react-native-screens": "~3.15.0",
    "react-native-svg": "12.3.0",
    "react-native-web": "~0.18.7"
  },

how to style Image Item ? Add Support that feature please!!

ImagePicker did not allow to see all photos in IOS

https://imgur.com/a/XJVc5qG [This does not work]
https://imgur.com/a/CuwsQrU [This work]
As the title suggests, it did not allow the user to access to whole photos. I think it is because of some problem with permission, but on another phone it does work.

import { AntDesign } from "@expo/vector-icons";
import HeaderButton from "../../../components/UI/HeaderButton";
import React, { useMemo, useState, useEffect } from "react";
import {
  Button,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
  Dimensions,
  Pressable,
} from "react-native";
import { HeaderButtons, Item } from "react-navigation-header-buttons";
import { MaterialCommunityIcons } from "@expo/vector-icons";
import { AssetsSelector } from "expo-images-picker";
import { MediaType } from "expo-media-library";
import { Colors, Fonts } from "../../../constants/defaultStyle";
import { Ionicons, Feather } from "@expo/vector-icons";
import ImageBrowser from "../../../components/ImagePicker/ImageBrowser";
import Back from "../../../assets/Icon/ProfileIcon/Back";
import BackButton from "../../../components/Button/BackButton";
import Back2 from "../../../assets/Icon/Back2";
// import HeaderButton from "../components/UI/HeaderButton";
const windowWidth = Dimensions.get("window").width;
const windowHeight = Dimensions.get("window").height;

//NOTE Redux
//NOTE Redux
import { useSelector, useDispatch } from "react-redux";
import {
  ButtonShownActions,
  ImagePickerActions,
  ExtraNavigationActions,
} from "../../../store/index";

export default function ImagePickerScreen(props) {
  const dispatch = useDispatch();
  const show = useSelector((state) => state.ButtonShown);
  const images = useSelector((state) => state.ImagePicker.value);
  return (
    <View style={styles.container}>
      {/* HEADER */}
      <View
        style={{
          backgroundColor: Colors.primaryColor,
        }}
      >
        <View
          style={{
            marginTop: (Fonts.normalText.fontSize * 52) / 20,
            flexDirection: "row",
            marginBottom: (Fonts.normalText.fontSize * 10) / 20,

            alignItems: "center",
          }}
        >
          <Pressable
            style={{
              shadowColor: "#000",
              shadowOffset: {
                width: 0,
                height: 2,
              },
              shadowOpacity: 0.25,
              shadowRadius: 3.84,

              elevation: 10,
              width: (36 * Fonts.normalText.fontSize) / 20,
              height: (36 * Fonts.normalText.fontSize) / 20,
              borderRadius: (36 * Fonts.normalText.fontSize) / 2,

              backgroundColor: Colors.boxColor,
              justifyContent: "center",
              alignItems: "center",
              marginLeft: Fonts.normalText.fontSize / 2,
            }}
            onPress={() => {
              props.navigation.goBack();
            }}
          >
            <Back2 style={{ alignSelf: "center" }}></Back2>
          </Pressable>

          <Text
            style={{
              ...Fonts.HelvethaicaBold,
              fontSize: (40 * Fonts.normalText.fontSize) / 20,
              color: Colors.boxColor,
              marginLeft: (Fonts.normalText.fontSize * 101) / 20,
            }}
          >
            เพิ่มรูปภาพ
          </Text>

          {show.value > 0 && (
            <Pressable
              onPress={() => {
                props.navigation.goBack();
              }}
              style={{
                width: (Fonts.normalText.fontSize * 67) / 20,
                height: (Fonts.normalText.fontSize * 36) / 20,
                backgroundColor: Colors.boxColor,
                flexDirection: "row",
                borderRadius: 25,
                justifyContent: "center",
                alignSelf: "center",
                position: "absolute",
                alignSelf: "center",
                right: Fonts.normalText.fontSize / 2,
                shadowColor: "#000",
                shadowOffset: {
                  width: 0,
                  height: 2,
                },
                shadowOpacity: 0.25,
                shadowRadius: 3.84,

                elevation: 5,

                // height: (Fonts.normalText.fontSize * 36) / 20,
              }}
            >
              <Text
                style={{
                  ...Fonts.Helvethaica,
                  fontSize: (30 * Fonts.normalText.fontSize) / 20,
                  alignSelf: "center",
                }}
              >
                บันทึก
              </Text>
            </Pressable>
          )}
        </View>
      </View>

      <ImageBrowser
        selectedImages={images}
        max={10}
        onChange={(num, onSubmit) => {
          console.log(num);
          dispatch(ButtonShownActions.set(num));
          onSubmit(num);
        }}
        callback={async (callback) => {
          const items = await callback;

          dispatch(ImagePickerActions.set(items));
        }}
      />

      <View
        style={{
          width: "100%",
          height: windowHeight * (73 / 961),
          backgroundColor: "white",
          position: "absolute",
          bottom: 0,
          borderRadius: 10,
          justifyContent: "center",
        }}
      >
        <Text
          style={{
            textAlign: "center",

            ...Fonts.HelvethaicaBold,
            fontSize: 26,
            color: Colors.primaryColor,
          }}
        >
          เลือกไปเเล้ว ({images.length})
        </Text>
      </View>
    </View>
  );
}

export const screenOptions = (navData) => {
  // const show2 = useSelector((state) => state.ImagePicker.value);
  console.log("eiei", navData);
  return {
    headerShown: false,
  };
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

reorder the searched images in browser from new to old

ImageBrowser not selecting

Good day, your snack demo shows error.
I have a project and I need multiple image selection and I'm using Expo. Came across your example but have small issues.

here's my code:

      title="Open image browser"
      onPress={() => { move.navigate(NavigationNames.ImageBrowserScreen); }}
     />
     <ScrollView>
           {photos.photos.map((item, i) => renderImage(item, i))}
      </ScrollView>

page.js

const ImageBrowserScreen = ({ navigation, route }) => {
  const move = useNavigation();
  const imagesCallback = (callback) => {
    navigation.setParams({ loading: true });
    callback.then(async (photos) => {
        const cPhotos = [];
        for(let photo of photos) {
          const pPhoto = await _processImageAsync(photo.uri);
          cPhotos.push({
            uri: pPhoto.uri,
            name: photo.filename,
            type: 'image/jpg'
          })
        }
        navigation.navigate('Main', {photos: cPhotos});
      })
      .catch((e) => console.log(e))
      .finally(() => navigation.setParams({ loading: false }));
}
  move.setOptions({
    title: "0 selected photos",
    headerTransparent: true,
    headerTintColor: Theme.colors.primaryColorDark,
    headerRight: () => (
      <HeaderButtons HeaderButtonComponent={IoniconsHeaderButton}>
        <Item
          title="done"
          iconName="md-image"
          onPress={() => imagesCallback }
        />
      </HeaderButtons>
    ),
  })

    const _processImageAsync = async(uri) => {
        const file = await ImageManipulator.manipulateAsync(
          uri,
          [{resize: { width: 1000 }}],
          { compress: 0.8, format: ImageManipulator.SaveFormat.JPEG }
        );
        return file;
    }

    const updateHandler = (count, onSubmit) => {
        navigation.setParams({
          headerTitle: `Selected ${count} files`,
          headerRight: onSubmit,
        });
    };

    const renderSelectedComponent = (number) => (
        <View style={styles.countBadge}>
          <Text style={styles.countBadgeText}>{number}</Text>
        </View>
    );

    const emptyStayComponent = <Text style={styles.emptyStay}>Empty =(</Text>;
    return (
        <View style={[styles.flex, styles.container]}>
        <ImageBrowser
            max={4}
            onChange={updateHandler}
            callback={imagesCallback}
            renderSelectedComponent={renderSelectedComponent}
            emptyStayComponent={emptyStayComponent}
        />
      </View>
    )
}

ImageBrowserScreen.js

I'm unable to select images, like it selects but don't do anything

does not update its width

when I use the component in a view as a modal that has the width of the screen reduced, the fourth column of the images in the gallery is hidden.

you could set the number of columns/rows to be displayed, and also customize the view styles

is there possible to open native platform gallery for select, like in Expo ImagePicker ?

my issue is, can I open the system UI for selecting images ?
if I can, let me see how, if there are not the feature yet, are you going to add such the feature in the future?

Add video picker support

The expo Image Picker SDK allows for multiple types of media to be picked:
https://docs.expo.io/versions/v40.0.0/sdk/imagepicker/#imagepickerlaunchimagelibraryasyncoptions

Wondering if we could get this feature here as well. Thanks! This is a great help.

Is there support for React Native?

I really need to use this lib in my React Native (without expo) and I'd like to know if you pretend to add support to it

Working Example

Can you give me a working example of this as a component? I'm just new to Expo so I can't seem to follow the sample that you gave. Any help will be greatly appreciated. Thanks

Images layout

Is there a way to ensure padding between images?

Invariant Violation: Tried to get frame for out of range index: NaN

Error occurs using Expo and expo-image-picker-multiple.

Following error occurs when trying to open the ImageBrowser.
This error is located at: in VirtualizedList (at FlatList.js:676) in FlatList(at ImageBrowser.js:129) in RCTView (at ImageBrowser.js:152)

My code:
<ImageBrowser max={3} onChange={(num: any, onSubmit:any) => { setSubmit(() => onSubmit); }} callback={(callback:any) => { console.log("first callback"); callback.then((images:any) => { console.log("second callback"); }) .catch((err:any) => console.log(err)) }} emptyStayComponent={emptyStayComponent} noCameraPermissionComponent={noCameraPermissionComponent} renderSelectedComponent={renderSelectedComponent} />

Is this support for typescript?

I installed package already, then system asked me to install another package for @types/expo-image-picker-multiple

Double failed to get permissions

Android 10
Expo SDK 40

Global exports were removed in SDK 41.

@MonstroDev,

I believe this project needs to be updated for the code to continue to work with the latest version of expo. It looks like ImageTile relies on some deprecated globals .

For example, per the latest SDK 41 release notes blog

expo-permissions has been deprecated in favor of module-specific permissions methods
You should migrate from using Permissions.askAsync and Permissions.getAsync to the permissions methods exported by modules that require the permissions. For example: you should replace calls to Permissions.askAsync(Permissions.CAMERA) with Camera.requestPermissionsAsync(). There shouldn’t be two ways to do an identical thing in a single SDK, and so we picked our preferred approach and are consolidating around it.

After upgrading to the latest version of Expo, the issue I'm having has to do with the callback not firing. It's probably related to the aforementioned updates to Expo. I'll take a stab at trying to fix it, but I'm not that familiar with the code.

cameraRoll error on expo sdk 40

Looks like permissions have changed in expo sdk 40 and MEDIA_LIBRARY is the new one

iOS EAS Build Crash

When attempting to build with EAS, it crashes partway through.

These are the relevant logs:

[!] CocoaPods could not find compatible versions for pod "EXPermissions":
In Podfile: EXPermissions (from `../node_modules/expo-image-picker-multiple/node_modules/expo-permissions/ios`)
Specs satisfying the `EXPermissions (from `../node_modules/expo-image-picker-multiple/node_modules/expo-permissions/ios`)` dependency were found, but they required a higher minimum deployment target.

Relevant dependencies:

 "dependencies": {
    "expo": "~40.0.0",
    "expo-image-picker-multiple": "^1.4.1",
  },

ScreenOrientation error on expo sdk 37.0.0

Error:

[Unhandled promise rejection: TypeError: undefined is not an object (evaluating '_expoScreenOrientation.default.addOrientationChangeListener')]

The dependencies on my project are

    "expo": "^37.0.0",
    "expo-cli": "^3.13.8",
    "expo-image-picker": "~8.1.0",
    "expo-image-picker-multiple": "^1.1.5",
    "expo-multiple-media-imagepicker": "^1.2.1",

This error started showing up after I upgraded to expo sdk v 37.0.0

Readme errors

Readme -> Usage -> Example is:

<ImageBrowser
  max={4}
  onChange={(callback) => {
    
  }}
  callback={(num, onSubmit) => {

  }}
/>

Should be :

<ImageBrowser
  max={4}
  onChange={(num, onSubmit)  => {
    
  }}
  callback={callback) => {

  }}
/>

Also it says that loadCompleteMetadata defaults false but it does not, as shown below:

static defaultProps = {
    loadCompleteMetadata: true,
    loadCount: 50,
    emptyStayComponent: null,
    preloaderComponent: <ActivityIndicator size='large'/>
  }

iOS white flicker

Hi!
Is there a way I can get rid of the white flickering when I open the image picker?Thanks! (iOS on expo 40)

Issue with permission in sdk40 expo, package does not work

getting error implementing this package.

error:
Unrecognized permission: cameraRoll, please install and link the package expo-media-library, see more at https://github.com/expo/expo/tree/master/packages/expo-media-library]

tried changing #35 pull request manually but it did not solve the problem. Has #35 pull request been merged?? and has this solved the issue??

Make onChange method to return images

Thanks for writing this library.

Can you make onChange method to return images sources not images length?

Expo SDK 40: Snack works fine, local project doesn't load images.

Hi All,

I am currently trying to build an app and use this wonderful library but I have came across a major flaw. I tried the example snack and made some changes in the snack, ran the code and it worked fine, but when I downloaded the snack and ran yarn install and expo start, the app loaded and when I pressed the button to open the Image Browser it returned 0 images in the image browser and returned 2 warnings related to permissions errors.

I believe this problem is related to #26, #30, #4 & #18

Please let me know if there's any thing I can do to help this run or if you need anymore information.

Thanks in advance.

Unrecognized Permission: mediaLibrary

Getting this error when launching the ImageBrowser currently. [Unhandled promise rejection: Error: Unrecognized permission: mediaLibrary, please install and link the package expo-media-library, see more at https://github.com/expo/expo/tree/master/packages/expo-media-library]. Downloaded latest version V 1.4.1

Image browser is not working on iOS devices(and simulator) when expo sdk 39

Hi guys,
I'm trying to use this library on my app, which is based on expo sdk 39.
It works well on android emulator and device, but shows nothing on iOS.
Even on the snack example on the README page link, when you adjust sdk version to 39, it shows an error and doesn't
work.
Please find out the way. THX.

monstrodev / expo-image-picker-multiple Goto Github PK

expo-image-picker-multiple's People

Contributors

Stargazers

Watchers

Forkers

expo-image-picker-multiple's Issues

Recommend Projects

Recommend Topics

Recommend Org