Security News
How Threat Actors are Abusing GitHub’s File Upload Feature to Host Malware
GitHub is susceptible to a CDN flaw that allows attackers to host malware on any public repository.
react-native-cameraroll-image-picker
Advanced tools
Readme
react-native-cameraroll-image-picker
Image Picker with cameraroll
$ npm install @react-native-community/cameraroll --save
$ npm install react-native-cameraroll-image-picker --save && npx pod-install
iOS
ios/Podfile
target 'routine' do
config = use_native_modules!
permissions_path = '../node_modules/react-native-permissions/ios'
pod 'Permission-PhotoLibrary', :path => "#{permissions_path}/PhotoLibrary/Permission-PhotoLibrary.podspec"
...
The user's permission is required in order to access the Camera Roll on devices running iOS 10 or later. Add the NSPhotoLibraryUsageDescription
key in your Info.plist
with a string that describes how your app will use this data. This key will appear as Privacy - Photo Library Usage Description
in Xcode.
If you are targeting devices running iOS 11 or later, you will also need to add the NSPhotoLibraryAddUsageDescription
key in your Info.plist
. Use this key to define a string that describes how your app will use this data. By adding this key to your Info.plist
, you will be able to request write-only access permission from the user. If you try to save to the camera roll without this permission, your app will exit.
Android
Permission is required to read and write to the external storage.
On Expo, follow the guide here for requesting the permission.
On react-native-cli or ejected apps, adding the following lines will add the capability for the app to request the permission. Find more info on Android Permissions here.
<manifest>
...
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
...
<application>
ImagePicker
component accepts the following props...
Parameters:
Name | Type | Required | Description |
---|---|---|---|
params | object | No | Expects a params with the shape described below. |
ref
: {any} : you can use getAlbum method.initialNumToRender
: {number} : Number of photos to load first. [default 50]groupTypes
: {string} : Specifies which group types to filter the results to. Valid values are:
Album
All
// defaultEvent
Faces
Library
PhotoStream
SavedPhotos
assetType
: {string} : Specifies filter on asset type. Valid values are:
All
Videos
Photos
// defaultmaximum
: {number} : Maximum number of selectable images. [default 15]imagesPerRow
: {number} : number of spaces. [default 3]imageMargin
: {number} : gap between images. [default 1]containerWidth
: {number} : screen width. [default Dimension screen width]backgroundColor
: {string} : backgroundColor [default white]emptyText
: {string} : Text to be displayed when the image is empty. [default null]emptyTextStyle
: {object} : Text style to show if image is empty. [default null]loader
: {element} : Loading Component [default null]album
: {string} : current album [default All]albums
: {array} : album list [default []]isMultiSelect
: {boolean} : Whether to allow multiple selections or not. [default false]onChangePhotosEvent
: {(e: {
selected: {
name: string;
type: string;
uri: string;
}[];
item: {
name: string;
type: string;
uri: string;
};
index: number;
isChecked: boolean;
}) => void} : event when the selected image changes.onMaxSelectedEvent
: {() => void} : Event when image selection is no longer possible.getAlbumsData
: {(albums:
{
label: string;
value: string;
count: number;
}[]) => void} : Import album list.onChangeAlbumEvent
: {(album: string) => void} : Event when the selected album is changed.import ImagePicker from "react-native-cameraroll-image-picker";
return (
<ImagePicker
initialNumToRender={50}
album={"All"}
maximum={5}
onChangePhotosEvent={(e) => setSelected(e?.selected)}
isMultiSelect={true}
/>
);
getAlbums()
import ImagePicker, { getAlbums } from "react-native-cameraroll-image-picker";
await getAlbums();
Returns a Promise with a list of albums
Returns:
Array of Album
object
import React, { useEffect, useState } from "react";
import { SafeAreaView, View } from "react-native";
import ImagePicker, { getAlbums } from "react-native-cameraroll-image-picker";
import styled from "styled-components/native";
import ImagePickerHeader from "@/styles/ui/Header/ImagePickerHeader";
const ImagePickerView = ({ navigation: { goBack }, route }) => {
const [albums, setAlbums] = useState([{ label: "All", value: "All" }]);
const [currentAlbum, setCurrentAlbum] = useState("All");
const [selected, setSelected] = useState < any > [];
const handleSelectAlbum = (album) => {
setCurrentAlbum(album);
};
const handleCompleteSelect = async () => {
if (!selected?.[0]?.uri) return;
console.log(selected);
};
useEffect(() => {
(async function handleGetAlbums() {
const result = await getAlbums();
setAlbums(result);
})();
}, []);
return (
<SafeAreaView style={{ flex: 1 }}>
<Container>
<ImagePickerHeader
onSelectAlbum={handleSelectAlbum}
onCompleteSelect={handleCompleteSelect}
albums={albums}
currentAlbum={currentAlbum}
goBack={goBack}
/>
<View style={{ flex: 1 }}>
<ImagePicker
initialNumToRender={50}
album={currentAlbum}
maximum={1}
onChangePhotosEvent={(e) => setSelected(e?.selected)}
/>
</View>
</Container>
</SafeAreaView>
);
};
const Container = styled.View`
flex: 1;
background-color: white;
`;
export default ImagePickerView;
FAQs
camera roll image picker
The npm package react-native-cameraroll-image-picker receives a total of 24 weekly downloads. As such, react-native-cameraroll-image-picker popularity was classified as not popular.
We found that react-native-cameraroll-image-picker demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
GitHub is susceptible to a CDN flaw that allows attackers to host malware on any public repository.
Security News
At Node Congress, Socket CEO Feross Aboukhadijeh uncovers the darker aspects of open source, where applications that rely heavily on third-party dependencies can be exploited in supply chain attacks.
Research
Security News
The Socket Research team found this npm package includes code for collecting sensitive developer information, including your operating system username, Git username, and Git email.