repository·master·Indexed 27 days ago
https://github.com/ivpusic/react-native-image-crop-pickerA React Native library for iOS and Android that provides access to the device's camera and photo gallery. It allows users to select single or multiple images and videos, with support for configurable compression, image cropping, and EXIF data extraction. Key functions include openPicker, openCamera, and openCropper, with utilities to clean up temporary files.
To run the iOS application, you must first ensure CocoaPods dependencies are installed.
If this is your first time setting up the project, install CocoaPods using Ruby bundler:
bundle install
Every time you update native dependencies, run:
bundle exec pod install
Once dependencies are installed, run the app using:
# Using npm
npm run ios
# OR using Yarn
yarn iosTo install the package, run the following npm command in your project root:
npm i react-native-image-crop-picker --saveAfter installing the package, follow these steps for iOS:
ios directory and run pod install.Info.plist in Xcode and add the following keys with descriptive values explaining why your app requires access:NSPhotoLibraryUsageDescription: Required for accessing the photo library.NSCameraUsageDescription: Required if you use the camera feature.NSMicrophoneUsageDescription: Required if you use the microphone feature.Optional: Localize UI text To localize the camera, gallery, or cropper text buttons:
+ button to add the desired language.cd ios
pod installIf you need to perform a full reload to reset the app state, use the following methods:
With the Metro server running, use one of the following commands to build and launch your application on an Android emulator or connected device.
# Using npm
npm run android
# OR using Yarn
yarn androidTo use the library, import the default export as ImagePicker.
import ImagePicker from "react-native-image-crop-picker";For Android, you may need to add permissions to app/src/main/AndroidManifest.xml:
Camera Access (Optional): If you want to use the camera picker, add:
<uses-permission android:name="android.permission.CAMERA"/>
Front Camera Support (Optional): If you want to use the front camera, add:
<uses-feature android:name="android.hardware.camera" android:required="false" />
<uses-feature android:name="android.hardware.camera.front" android:required="false" />
<uses-permission android:name="android.permission.CAMERA"/>
<uses-feature android:name="android.hardware.camera" android:required="false" />
<uses-feature android:name="android.hardware.camera.front" android:required="false" />Before running your application, you must start the Metro JavaScript build tool. Run the following command from the root of your project:
# Using npm
npm start
# OR using Yarn
yarn startreact-native-image-crop-picker version 0.50.0 or higher.Use ImagePicker.openCropper(options) to open the cropping interface for an image already stored on the device. You must provide the path to the image.
ImagePicker.openCropper({
path: "my-file-path.jpg",
width: 300,
height: 400,
}).then((image) => {
console.log(image);
});The module creates temporary images. To manually force cleanup of these files, use ImagePicker.clean() to remove all temporary files or ImagePicker.cleanSingle(path) to remove a specific file.
ImagePicker.clean()
.then(() => {
console.log("removed all tmp images from tmp directory");
})
.catch((e) => {
alert(e);
});