Custom UI component

[giautm]

Hi, Thank you for build great library :+1:

I also want to replace expo-image-editor component's with others from my UI kit: Icon/Text, or BackIcon/BackTitle. For example:

      <ImageEditor
        visible={editorVisible}
        ControlComponent={MyControlComponentFromUIKit} // <----- allow custom
        onCloseEditor={() => setEditorVisible(false)}
        imageUri={imageUri}
        fixedCropAspectRatio={16 / 9}
        lockAspectRatio={aspectLock}
        minimumCropDimensions={{
          width: 100,
          height: 100,
        }}
        onEditingComplete={(result) => {
          setImageData(result);
        }}
      />

It also allow me to disable any function that I don't need, for example: adjust with blue effect.

[thomas-coldwell]

Thanks dude! 😁 I think the best option here would be to introduce 2 different customisation options:

• Firstly a prop that let's you specify the localisation for any of icon labels and also customise the icons for whatever UI kit or icon library you like
• Secondly a prop that let's you specify the allowed editing operations e.g. blur and crop only

It would probably look something like:

<ImageEditor
    visible={editorVisible}
    iconCustomisation={{back: {text: 'Retour', icon: <MyCustomIcon />}}}  // <-- Icon customisation / localisation
    allowedOperations={["blur", "crop"]} // <-- Specify what operations should be allowed
    onCloseEditor={() => setEditorVisible(false)}
    imageUri={imageUri}
    fixedCropAspectRatio={16 / 9}
    lockAspectRatio={aspectLock}
    minimumCropDimensions={{
        width: 100,
        height: 100,
     }}
     onEditingComplete={(result) => {
        setImageData(result);
     }}
    />

I think that level of customisation should be sufficient for most use cases without having to replace the whole control bar component entirely. Let me know what you think and feel free to open a PR to add these options in!