npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@monceeef/expo-images-picker

v2.0.1

Published

Expo images picker, Selecting Multiple images and videos from user device

Downloads

3

Readme

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.

Sample Sample

Usage

  1. Install with
    $ npm install expo-images-picker
    or
    $ yarn add expo-images-picker
  2. import to the top of your file like
    import { AssetsSelector } from 'expo-images-picker'
  3. install @expo-vectors package and send icons as props to the widget
    import { Ionicons } from '@expo/vector-icons'
  4. Use the imported as Following =>
    <AssetsSelector
       Settings={widgetSettings}
       Errors={widgetErrors}
       Styles={widgetStyles}
       Resize={widgetResize}       // optional
       Navigator={widgetNavigator} // optional
       CustomNavigator={{          // optional
            Component: CustomNavigator,
            props: {
                backFunction: true,
                onSuccess,
                text: T.ACTIONS.SELECT,
           },
        }}
     />

##[📚 Params]

Settings :

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

   const widgetSettings = useMemo(
       () => ({
           getImageMetaData: false,
           initialLoad: 100,
           assetsType: [MediaType.photo, MediaType.video],
           minSelection: 1,
           maxSelection: 3,
           portraitCols: 4,
           landscapeCols: 4,
       }),
       []
   )
  • 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 :

    const widgetErrors = useMemo(
        () => ({
            errorTextColor: polar_text_2,
            errorMessages: {
                hasErrorWithPermissions: translator(
                    T.ERROR.HAS_PERMISSIONS_ERROR
                ),
                hasErrorWithLoading: translator(T.ERROR.HAS_INTERNAL_ERROR),
                hasErrorWithResizing: translator(T.ERROR.HAS_INTERNAL_ERROR),
                hasNoAssets: translator(T.ERROR.HAS_NO_ASSETS),
            },
        }),
        []
    )
  • 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 :

    const widgetStyles = useMemo(
        () => ({
            margin: 2,
            bgColor: bg,
            spinnerColor: main,
            widgetWidth: 99,
            videoIcon: {
                Component: Ionicons,
                iconName: 'ios-videocam',
                color: polar_text_1,
                size: 20,
            },
            selectedIcon: {
                Component: Ionicons,
                iconName: 'ios-checkmark-circle-outline',
                color: 'white',
                bg: mainWithOpacity,
                size: 26,
            },
        }),
        [polar_text_1, mainWithOpacity]
    )
  • 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 :

    const widgetNavigator = useMemo(
        () => ({
            Texts: {
                finish: 'finish',
                back: 'back',
                selected: 'selected',
            },
            midTextColor: polar_text_2,
            minSelection: 3,
            buttonTextStyle: _textStyle,
            buttonStyle: _buttonStyle,
            onBack: () => navigation.goBack(),
            onSuccess: (data: Asset[]) => onSuccess(data),
        }),
        []
    )
  • 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 :

    const widgetResize = useMemo(
        () => ({
            width: 512,
            compress: 0.7,
            base64: false,
            saveTo: SaveType.JPG,
        }),
        []
    )

**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.

<AssetsSelector
  options={{
    ...otherProps,
    CustomTopNavigator: {
      Component: CustomNavImageSelection,
      props: {
        onSuccess: (data: Asset[]) => onDone(data),
        backFunction: true,
        text: T.ACTIONS.SELECT
      },
    },
  }}
/>