Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
erfan-image-picker
Advanced tools
Readme
Multiple Asset Photos | Videos selecting package for Expo SDK 42+. For users who use React native and managed workflow + Styled Components.
$ npm install expo-images-picker
or
$ yarn add expo-images-picker
import { AssetsSelector } from 'expo-images-picker'
import { Ionicons } from '@expo/vector-icons'
<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]
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 .
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.
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.
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.
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.
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.
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
.
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
},
},
}}
/>
FAQs
Expo images picker, Selecting Multiple images and videos from user device
The npm package erfan-image-picker receives a total of 0 weekly downloads. As such, erfan-image-picker popularity was classified as not popular.
We found that erfan-image-picker demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.