monstrodev / expo-image-picker-multiple Goto Github PK
View Code? Open in Web Editor NEWMultiple image selecting package for Expo SDK (React Native) using MediaLibrary and Permissions.
Multiple image selecting package for Expo SDK (React Native) using MediaLibrary and Permissions.
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} />
Looks like permissions have changed in expo sdk 40 and MEDIA_LIBRARY is the new one
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
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
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
what the problem and how to fix it ?
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
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??
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.
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
<ImageBrowser
max={4}
onChange={(callback) => {
}}
callback={(num, onSubmit) => {
}}
/>
<ImageBrowser
max={4}
onChange={(num, onSubmit) => {
}}
callback={callback) => {
}}
/>
static defaultProps = {
loadCompleteMetadata: true,
loadCount: 50,
emptyStayComponent: null,
preloaderComponent: <ActivityIndicator size='large'/>
}
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,
},
});
Please enable the close and done button is missing
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.
Can you please provide a fully working snack as the snack link you mentioned is not working. Thank You
// 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;
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
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
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.
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"
},
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.
After removing the camera permissions the component stops showing any images. How is this possible?
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;
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
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
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!
Thanks for writing this library.
Can you make onChange method to return images sources not images length?
Android 10
Expo SDK 40
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.
Is there a way to ensure padding between images?
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",
},
Hi
Would it be possible to also get videos into the feed?
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());
});
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.
I installed package already, then system asked me to install another package for @types/expo-image-picker-multiple
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.