react-native-image-select v0.1.1

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

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

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