React Native Image Select

Overview

React Native Image Select component that allow to select photos from the device's library, similar to the component from current Facebook App.

• Smooth and fast cross platform image picker component for react-native
• Tested on IOS and Android
• Simple API
• Dependencies are @react-native-camera-roll/camera-roll and react-native-permissions

Features 🔥

Current v0.1

• 🌄 Choose multiple images/videos
• 0️⃣ Selected order index.
• 🎨 Header customization
• 🔑 Built-in support for permissions

Planned functionnality

• Limitations on the number of selected photos
• Ability to change view between grid and preview
• More modification options
• Ability to change the current album
• Preview image/video.

Getting Started 🔧

yarn add react-native-image-select

Required additional steps

Add @react-native-camera-roll/camera-roll

https://github.com/react-native-cameraroll/react-native-cameraroll#getting-started

and react-native-permissions

https://github.com/zoontek/react-native-permissions#setup

Required IOS Permissionss:

 "reactNativePermissionsIOS": [
    "PhotoLibrary",
  ],

Info.plist

...
  <key>NSPhotoLibraryUsageDescription</key>
  <string>YOUR TEXT</string>
...

Required Android Permissions:

android/app/src/main/AndroidManifest.xml file:

<manifest xmlns:android="http://schemas.android.com/apk/res/android">
  <!-- ... -->
  <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
  <uses-permission android:name="android.permission.READ_MEDIA_IMAGES" />
<uses-permission android:name="android.permission.READ_MEDIA_VIDEO"/>
  <!-- ... -->
</manifest>

Add the android:requestLegacyExternalStorage="true" attribute to the <application> tag for Android 10 support.

Usage 🚀

import * as React from "react";
import {
  StyleSheet,
  View,
  Text,
  Button,
  Image,
  ScrollView,
  SafeAreaView,
  Dimensions,
} from "react-native";
import ImageSelect, { useImageSelect } from "../src";

export default function App() {
  const {
    callback,
    imageSelectRef,
    isImageSelectVisible,
    openImageSelect,
    onCancel,
    selectedImages,
    clearSelectedImages,
    onRemoveSelectedImage,
    onDone,
  } = useImageSelect();

  return (
    <SafeAreaView>
      <ScrollView>
        <View style={styles.container}>
          <Text style={styles.title}>react-native-image-select</Text>
          <View style={styles.button}>
            <Button title="Open ImagePicker" onPress={openImageSelect} />
          </View>

          <View>
            {selectedImages?.map((i) => (
              <View key={i.uri}>
                <Image source={{ uri: i.uri }} style={styles.image} />
                <Button
                  title="Remove image"
                  onPress={() => onRemoveSelectedImage(i.uri)}
                />
              </View>
            ))}
          </View>
          <Button title="Clear selected images" onPress={clearSelectedImages} />
          <ImageSelect
            ref={imageSelectRef}
            isVisible={isImageSelectVisible}
            onCancel={onCancel}
            onDone={onDone}
            callback={callback}
          />
        </View>
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
    paddingTop: 24,
  },
  title: {
    fontSize: 18,
    fontWeight: "bold",
  },
  button: {
    marginTop: 20,
  },
  image: {
    width: Dimensions.get("screen").width,
    height: 600,
    marginBottom: 48,
  },
});

useImageSelect

Built-in hook to handle image select. You can use it or build your own, customized for your project.

 const {
    isImageSelectVisible,
    openImageSelect,
    onCancel,
    onRemoveSelectedImage,
    selectedImages,
    clearSelectedImages,
    onDone,
  } = useImageSelect()

Props

property	type	description
onCancel	() => void	Callback to be fired when the user closes the image select
onDone	() => void	Callback to be fired when the user approves the selected images
isVisible	boolean	Show/hide image select
startIndex (optional)	number	Initial position index of the selected images
callback	(a:SelectedImages) => void	Callback triggered when selected images change.
header	ImageSelectHeaderCustomizationProps	Props used to customize the header

Methods

• handleRemoveSelectedImage(id:string): void - Remove image from selected images by id (uri).

const imageSelectRef = useRef < ImageSelect > null;

imageSelectRef.current?.handleClearSelectedImages();

• handleCreateBackupSelectedImages(): void - Create backup of current selected images. E.g. if you want to provide a function to cancel selected images and restore them to their previous version.

• handleRestoreSelectedImages(): void - Restore saved list of selected images. For example, if you want to provide a function to cancel selected images and restore them to their previous version.

• handleClearSelectedImages(): void - Clear the list of selected photos.

• handleRecalculateIndexOfSelectedImages(): void - Recalculate index of selected images.

SelectedImage Object

key	IOS	Android	type
uri	Yes	Yes	string
filename	Yes	Yes	string / null
extension	Yes	Yes	string / null
height	Yes	Yes	number / null
width	Yes	Yes	number / null
fileSize	Yes	Yes	number / null
orientation	---	Yes	number / null
playableDuration	Yes	Yes	number / null
selectedPosition	Yes	Yes	number / null

Contributing

Contributions are always welcome!

See contributing.md for ways to get started.

Please adhere to this project's code of conduct.

License

MIT

---

Made with create-react-native-library