expo-images-picker

Multiple Asset Photos | Videos selecting package for Expo SDK 42+. For users who use React native and managed workflow + Styled Components.

MediaLibrary.

Image-manipulator.

styled-components

Best Practice just watch the video or Copy the snack :)

How to Video => https://youtu.be/xcMcVZTw6xA

Copy & Paste => https://snack.expo.dev/@natysoz/expo-images-picker

Features

• expo multiple image selector
• Allow selecting multiple Photos or Videos.
• Allow getting extra metadata.
• Allow resizing and get base64 images.
• Permission requests built in.
• Support Both landscape and portrait.
• Simple Indicator for the selected Assets.
• Custom Indicator for the selected Assets.
• Allow using custom navbar component.
• Optimized for speed.

Usage

1. Install with

   1$ npm install expo-images-picker

   or

   1$ yarn add expo-images-picker

2. import to the top of your file like

   1import { AssetsSelector } from 'expo-images-picker'

3. install @expo-vectors package and send icons as props to the widget

   1import { Ionicons } from '@expo/vector-icons'

4. Use the imported as Following =>

   1<AssetsSelector
   2   Settings={widgetSettings}
   3   Errors={widgetErrors}
   4   Styles={widgetStyles}
   5   Resize={widgetResize}       // optional
   6   Navigator={widgetNavigator} // optional
   7   CustomNavigator={{          // optional
   8        Component: CustomNavigator,
   9        props: {
   10            backFunction: true,
   11            onSuccess,
   12            text: T.ACTIONS.SELECT,
   13       },
   14    }}
   15 />

##[📚 Params]

Settings :

you better create this const out of your component , if you do need it inside your component , use useMemo from react.

1   const widgetSettings = useMemo(
2       () => ({
3           getImageMetaData: false,
4           initialLoad: 100,
5           assetsType: [MediaType.photo, MediaType.video],
6           minSelection: 1,
7           maxSelection: 3,
8           portraitCols: 4,
9           landscapeCols: 4,
10       }),
11       []
12   )

• getImageMetaData - return an asset with extra metadata fields * may cause slower results .

but on some ios versions its a must , because u need the absolute file path file:// and not asset-library://

• initialLoad - initial amount of assets to load first time.

• assetsType - array that includes [MediaType.photo, MediaType.video]. [photo , video ].

• minSelection - min amount of images user need to select.

• maxSelection - max amount of images user need to select.

• portraitCols - Number of columns in portrait Mode.

• landscapeCols - Number of columns in landscape Mode.

Errors :

1    const widgetErrors = useMemo(
2        () => ({
3            errorTextColor: polar_text_2,
4            errorMessages: {
5                hasErrorWithPermissions: translator(
6                    T.ERROR.HAS_PERMISSIONS_ERROR
7                ),
8                hasErrorWithLoading: translator(T.ERROR.HAS_INTERNAL_ERROR),
9                hasErrorWithResizing: translator(T.ERROR.HAS_INTERNAL_ERROR),
10                hasNoAssets: translator(T.ERROR.HAS_NO_ASSETS),
11            },
12        }),
13        []
14    )

• onError - callback function that you can pass and will fire whenever there is an error.

• errorTextColor - set the text color of an error message.

• errorMessages

  `hasErrorWithPermissions`- error text when there are no permissions.
  `hasErrorWithLoading` - error text for issue with loading assets.
  `hasErrorWithResizing` - error text for issue with resizing.
  `hasNoAssets` - text shows when there are no assets to show.
  

Styles :

1    const widgetStyles = useMemo(
2        () => ({
3            margin: 2,
4            bgColor: bg,
5            spinnerColor: main,
6            widgetWidth: 99,
7            videoIcon: {
8                Component: Ionicons,
9                iconName: 'ios-videocam',
10                color: polar_text_1,
11                size: 20,
12            },
13            selectedIcon: {
14                Component: Ionicons,
15                iconName: 'ios-checkmark-circle-outline',
16                color: 'white',
17                bg: mainWithOpacity,
18                size: 26,
19            },
20        }),
21        [polar_text_1, mainWithOpacity]
22    )

• margin - set margin between the images.

• bgColor - set the widget background color.

• spinnerColor - set the color of the spinner (loading indicator).

• widgetWidth - the widget width in percentages .

• videoIcon

  Component - the icon component.(from @expo/vector-icons). iconName - the icon name. Component - the icon color. Component - the icon size.

• selectedIcon - the widget width in percentages .

  Component - the icon component.(from @expo/vector-icons). iconName - the icon name. color - the icon color. bg - set the cover color when an asset is select. size - the icon size.

Navigator :

1    const widgetNavigator = useMemo(
2        () => ({
3            Texts: {
4                finish: 'finish',
5                back: 'back',
6                selected: 'selected',
7            },
8            midTextColor: polar_text_2,
9            minSelection: 3,
10            buttonTextStyle: _textStyle,
11            buttonStyle: _buttonStyle,
12            onBack: () => navigation.goBack(),
13            onSuccess: (data: Asset[]) => onSuccess(data),
14        }),
15        []
16    )

• Texts - send in finish back selected texts.

• midTextColor - set the color of the middle text aka "selected" .

• minSelection - set the min selection , continue button will be unavailable until user select this amount of images.

• buttonTextStyle - Text Style Object , design the text inside the buttons.

• buttonStyle - View Style Object, design the button itself.

• onBack - Send in a function to go back to your screen.

• onSuccess - Send in a function to go back and send the returned data.

Resize :

1    const widgetResize = useMemo(
2        () => ({
3            width: 512,
4            compress: 0.7,
5            base64: false,
6            saveTo: SaveType.JPG,
7        }),
8        []
9    )

**Note that using manipulate might result with crash or slow loading times on older phones.

• All fields are optional , in order to resize and keep images Ratio its recommend sending only width or height, and it will resize using this axis only.

• width - Manipulate image width optional

• height - Manipulate image width optional

• compress - compress 0.1 Super low quality 1.0 leave as is (high quality).

• base64 - will add extra result , image as a base64 string.

• saveTo - can be png or jpeg .

CustomNavigator :

Make sure your CustomTopNavigator can receive onSuccess function. And bind this onFinish function on the correct button.

• Component - Send in your Custom nav bar.

• props Send any props your Custom Component needs.

1<AssetsSelector
2  options={{
3    ...otherProps,
4    CustomTopNavigator: {
5      Component: CustomNavImageSelection,
6      props: {
7        onSuccess: (data: Asset[]) => onDone(data),
8        backFunction: true,
9        text: T.ACTIONS.SELECT
10      },
11    },
12  }}
13/>