# react-native-in-app-gallery > A react-native in-app gallery component Latest version **0.0.7** (published 2020-08-06) · MIT license · 0 weekly downloads ## Install ```sh npm install react-native-in-app-gallery pnpm add react-native-in-app-gallery yarn add react-native-in-app-gallery bun add react-native-in-app-gallery ``` ## Health **Score 20/100 (F)** — status: abandoned. Positive: has types; no vulnerabilities. Warnings: low downloads; no esm support; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.0.7 | | Published | 2020-08-06 | | First published | 2020-07-23 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | CommonJS | | Dependencies | 4 | | Unpacked size | 109.3 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Author | Alberto Di Gioacchino | | Maintainers | albedigio, xtreamsrl | | Keywords | react-native, gallery, camera, in-app-gallery | ## Links - npm: https://www.npmjs.com/package/react-native-in-app-gallery - Repository: https://github.com/xtreamsrl/react-native-in-app-gallery - Homepage: https://github.com/xtreamsrl/react-native-in-app-gallery#readme - Issues: https://github.com/xtreamsrl/react-native-in-app-gallery/issues - npm.io page: https://npm.io/package/react-native-in-app-gallery ## Dependencies (4) - [react-native-camera](https://npm.io/package/react-native-camera.md) ^3.30.0 - [react-native-permissions](https://npm.io/package/react-native-permissions.md) ^2.1.5 - [react-native-image-picker](https://npm.io/package/react-native-image-picker.md) ^2.3.1 - [@react-native-community/cameraroll](https://npm.io/package/@react-native-community/cameraroll.md) ^2.0.0 ## Recent versions - 0.0.7 (latest) — 2020-08-06 - 0.0.6 — 2020-07-30 - 0.0.5 — 2020-07-27 - 0.0.4 — 2020-07-27 - 0.0.3 — 2020-07-23 - 0.0.2 — 2020-07-23 - 0.0.1 — 2020-07-23 ## README # react-native-in-app-gallery A react-native in-app gallery component which allows to pick an image from both gallery and camera, optionally without exiting the current screen. It's **Android** and **iOS** compatible. ![](example.gif) ## Getting started ### Installation guide This package depends on some common react-native packages: * [@react-native-community/cameraroll](https://github.com/react-native-community/react-native-cameraroll) * [react-native-permissions](https://github.com/react-native-community/react-native-permissions) * [react-native-camera](https://github.com/react-native-community/react-native-camera) * [react-native-image-picker](https://github.com/react-native-community/react-native-image-picker) ``` npm i --save @react-native-community/cameraroll react-native-permissions react-native-camera react-native-image-picker react-native-in-app-gallery ``` #### Android Add required permissions inside the manifest ```xml ... ... ``` Add the following lines in `android/app/build.gradle` ``` android { ... defaultConfig { ... missingDimensionStrategy 'react-native-camera', 'general' // <--- insert this line } } ``` #### iOS Add required keys in your `Info.plist` ```xml NSCameraUsageDescription $(PRODUCT_NAME) would like to use your camera NSMicrophoneUsageDescription $(PRODUCT_NAME) would like to use your microphone to let you take and send videos NSPhotoLibraryAddUsageDescription $(PRODUCT_NAME) would like to save photos to your photo gallery NSPhotoLibraryUsageDescription $(PRODUCT_NAME) would like access to your photo gallery ``` Add permission handlers in your `Podfile` ``` permissions_path = '../node_modules/react-native-permissions/ios' pod 'Permission-Camera', :path => "#{permissions_path}/Camera.podspec" pod 'Permission-PhotoLibrary', :path => "#{permissions_path}/PhotoLibrary.podspec" ``` Run ``` cd ios pod install ``` If any problems, please refer to the mentioned above packages installation guides before opening an issue. ## Usage The usage should be straightforward: simply import the component and consume it. ``` import InAppGallery from 'react-native-in-app-gallery'; ... { console.log(image); }} /> ``` ## Try it out You can check a simple example [here](https://github.com/xtreamsrl/react-native-in-app-gallery/tree/master/Example). ### Props | Property | Type | Description | | --------------------------------------- | :--------------------------------------: | :--------------------------------------- | | onImagePicked | (image: ImageFile) => void | Callback which triggers when an image is picked (press on image, take a photo from the camera or from gallery) | | pageSize | number (default 100) | (Optional) The page size dimension to paginate images fetching | | initialNumToRender | number (default 9) | (Optional) The initial number of items to render for the FlatList | | imageHeight | number (default 120) | (Optional) The height of the image item | | withCamera | bool (default true) | (Optional) If true, shows camera preview and allow to take picture from the camera | | withFullGallery | bool (default true) | (Optional) If true, a FAB button allows you to open the gallery | | onPermissionGranted | (permission: Permission) => void | (Optional) Callback on permission granted | | onPermissionDenied | (permission: Permission) => void | (Optional) Callback on permission denied | | onPermissionBlocked | (permission: Permission) => void | (Optional) Callback on permission blocked | | imagePickerOptions | ImagePickerOptions (default ```{storageOptions: {skipBackup: true, path: 'images'}}```) | (Optional) Options for ImagePicker | | enableSelection | bool (default false) | (Optional) It enables selection (with long press) | | onImageSelected | (image: ImageFile, selected: boolean) | (Optional) Callback on image selection. It's triggered whenever an image is selected or deselected | | onSelectionEnd | (images: ImageFile[]) => void | (Optional) Callback on images selection end | | cancelSelectionText | string (default `Cancel`) | (Optional) Text to cancel selection | | doneSelectionText | string (default `DONE`) | (Optional) Text to end selection | | selectionColor | string (default `#0284ff`) | (Optional) It's the tint color for selection icon | ### Methods | Method | Description | | --------------------------------------- | :--------------------------------------: | | clearSelection | It clears selected images | # Who we are A proudly 🇮🇹 software development and data science startup.
We consider ourselves a family of talented and passionate people building their own products and powerful solutions for our clients. Get to know us more on xtreamers.io or follow us on LinkedIn. --- _Source: https://npm.io/package/react-native-in-app-gallery · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._