Use with header from StackNavigator

[shanedaugherty]

We would like to use this with the default header from @react-navigation/native, is there a way to do that already that maybe we are missing?

From the looks of things to make that possible we would either need to:

• add an onChange prop that can be used to hoist the state which contains the selected items outside of the component
• perform a refactoring that moves all of the settings into a hook, for example:

  
  import { AssetsSelector } from 'expo-images-picker'
  import { useNavigation } from '@react-navigation/native'
  import { Button } from 'react-native'

const MyView = () => { const t = useTranslation() const navigator = useNavigator()

const assetsSelectorContext = useAssetsSelector({ Settings={widgetSettings} Errors={widgetErrors} Styles={widgetStyles} Resize={widgetResize}
Navigator={widgetNavigator} CustomNavigator={customNavigator} })

const onSuccess = (data: Asset[]) => { //... here we now have access to the assetSelectorContext which can contain the selected item state }

// making this all up for the sake of time, but you get the idea ;) // when the selected items state changes, update the built in header useEffect(() => { navigator.setOptions({ title: selected: ${assetSelectorContext?.selected?.length ?? 0}, headerRight: () => ( <Button disabled={assetSelectorContext?.selected?.length < 1} onPress={onSuccess}> Continue ) }) }, [assetSelectorContext?.selected])

return (<AssetsSelector {...assetsSelectorContext} />) }

[natysoz]

this useEffect might kill performances , did you try fork and do those changes ?

[shanedaugherty]

Hey @natysoz!

I did not try the example posted above because it requires a bit more work. It would require us to refactor the codebase to expose a hook that can be used to access all of the state / functions.

If we do go ahead with that approach, I would not worry about the performance of the useEffect in the example. It is a pretty lightweight effect that will only run when the selected items change. Keep in mind, this useEffect is in the application which is using the library -- not in the library itself.

I did go ahead and open a PR that adds an onChange prop. This was an easy change that allows a consumer of this library to access the state of which items are selected outside of the component. I have forked it and am using it in my project!

[natysoz]

we can create a custom hook , like useSelectedImages() where this hook return the selected items,but yhea it require to expose this function and bind it inside and along the code

[shanedaugherty]

Yep yep. I personally will not have the time to add this hook for a couple of months.

This pull request adds an onChange prop which also solves the same problem but in a different way: https://github.com/natysoz/expo-images-picker/pull/37

I suggest we do a minor release with the onChange prop and save the hook refactor for the next major version. What are your thoughts?

[natysoz]

i read the pr i dont understand what ur trying to return there on the onChange function ?

[shanedaugherty]

@natysoz the onChange function allows the component state to be hoisted outside of the component. For example

const MyView = ()=> {
  const [selectedImages, setSelectedImages] = useState<Asset>([])

  // I have access to the `selectedImages` state here now, outside of the component 

  return (
    <>
      {selectedImages?.length} selcted
      <ImagePicker onChange={setSelectedImages} />
    </>
  )
}

[iammh93]

Seem like a good enhancement and provide much more flexibility. Looking forward to use it after PR merged

[natysoz]

ill work on such hook soon as im busy with new kid :) if someone wanna contribute in the meanwhile its not so hard to make

just need to test the performances

[natysoz]

added to the feature list