Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[iOS only] Feat: Add the way to customize iOS cropper toolbar #1923

Conversation

anton-patrushev
Copy link
Contributor

What's new

This PR adds a way to customize iOS cropper toolbar using custom (HEX only) colors for the toolbar buttons (Choose and Cancel).

Demo

If I would pass custom colors to openCropper or openPicker it would apply provided colors
openCropper example:

async function launchCropper() {
  const imageUri: string = await SomeImageUtils.openPicker();

  return await ImageCropper.openCropper({
    path: imageUri,
    mediaType: 'photo',
    cropperChooseColor: '#00E78A',
    cropperCancelColor: '#FFFFFF',
  });
}

or openPicker example:

async function launchPicker() {
  return await ImageCropper.openPicker({
    cropperChooseColor: '#00E78A',
    cropperCancelColor: '#FFFFFF',
  });
}

Simulator Screenshot - iPhone 14 Pro Max - 2023-05-12 at 10 56 53

And if I would not pass any custom colors it would fallback to default values
openCropper example:

async function launchCropper() {
  const imageUri: string = await SomeImageUtils.openPicker();

  return await ImageCropper.openCropper({
    path: imageUri,
    mediaType: 'photo'
  });
}

or openPicker example:

async function launchPicker() {
  return await ImageCropper.openPicker();
}

Simulator Screenshot - iPhone 14 Pro Max - 2023-05-12 at 10 55 09

How it was tested

It was manually QA in iOS Simulator (iOS 15 and iOS 16)

@anton-patrushev
Copy link
Contributor Author

@ivpusic can you take a look please?

@ivpusic
Copy link
Owner

ivpusic commented May 13, 2023

tnx for PR! could you update readme file with new options?

@anton-patrushev
Copy link
Contributor Author

sure! no problems @ivpusic

@anton-patrushev
Copy link
Contributor Author

@ivpusic
README file was updated here 2dca3e3

Can you approve this PR and release a new version, please?

@ivpusic ivpusic merged commit 5a4a5f9 into ivpusic:master May 16, 2023
@ivpusic
Copy link
Owner

ivpusic commented May 16, 2023

tnx!

@anton-patrushev
Copy link
Contributor Author

Would you make a new release cut (0.40.0 or 0.39.1 or even 1.0.0)? @ivpusic

@Blackfaded
Copy link

I would also love a new version on npm.
Was a little bit confused why the colors did not apply in my app, because the docs are updated to 0.40.0, but the package on npm is still 0.39.

Btw: Thanks for this awesome lib!

@ivpusic
Copy link
Owner

ivpusic commented May 25, 2023

0.40.0 released to npm

fmcruz pushed a commit to fmcruz/react-native-image-crop-picker that referenced this pull request Oct 9, 2023
…c#1923)

* feat: update `index.d.ts` definitions to include new params for colors customization

* feat: add the way to customize iOS toolbar buttons with HEX colors
renovate bot referenced this pull request in valora-inc/wallet Nov 21, 2023
#4513)

[![Mend Renovate logo
banner](https://app.renovatebot.com/images/banner.svg)](https://renovatebot.com)

This PR contains the following updates:

| Package | Change | Age | Adoption | Passing | Confidence |
|---|---|---|---|---|---|
|
[react-native-image-crop-picker](https://togithub.com/ivpusic/react-native-image-crop-picker)
| [`^0.35.1` ->
`^0.40.2`](https://renovatebot.com/diffs/npm/react-native-image-crop-picker/0.35.2/0.40.2)
|
[![age](https://developer.mend.io/api/mc/badges/age/npm/react-native-image-crop-picker/0.40.2?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![adoption](https://developer.mend.io/api/mc/badges/adoption/npm/react-native-image-crop-picker/0.40.2?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![passing](https://developer.mend.io/api/mc/badges/compatibility/npm/react-native-image-crop-picker/0.35.2/0.40.2?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/react-native-image-crop-picker/0.35.2/0.40.2?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|

---

### Release Notes

<details>
<summary>ivpusic/react-native-image-crop-picker
(react-native-image-crop-picker)</summary>

###
[`v0.40.2`](https://togithub.com/ivpusic/react-native-image-crop-picker/releases/tag/v0.40.2)

[Compare
Source](https://togithub.com/ivpusic/react-native-image-crop-picker/compare/v0.40.1...v0.40.2)

#### What's Changed

- Update README about Android SDK version by
[@&#8203;pnthach95](https://togithub.com/pnthach95) in
[https://github.com/ivpusic/react-native-image-crop-picker/pull/1887](https://togithub.com/ivpusic/react-native-image-crop-picker/pull/1887)
- Fix handling of deleted photos on iOS by
[@&#8203;brsaylor2](https://togithub.com/brsaylor2) in
[https://github.com/ivpusic/react-native-image-crop-picker/pull/1556](https://togithub.com/ivpusic/react-native-image-crop-picker/pull/1556)

#### New Contributors

- [@&#8203;brsaylor2](https://togithub.com/brsaylor2) made their first
contribution in
[https://github.com/ivpusic/react-native-image-crop-picker/pull/1556](https://togithub.com/ivpusic/react-native-image-crop-picker/pull/1556)

**Full Changelog**:
ivpusic/react-native-image-crop-picker@v0.40.1...v0.40.2

###
[`v0.40.1`](https://togithub.com/ivpusic/react-native-image-crop-picker/releases/tag/v0.40.1)

[Compare
Source](https://togithub.com/ivpusic/react-native-image-crop-picker/compare/v0.40.0...v0.40.1)

#### What's Changed

- fix spelling error in readme.md by
[@&#8203;therealrinku](https://togithub.com/therealrinku) in
[https://github.com/ivpusic/react-native-image-crop-picker/pull/1953](https://togithub.com/ivpusic/react-native-image-crop-picker/pull/1953)
- Property 'Latitude' does not exist on type 'object' in exif by
[@&#8203;dipanjanpanja6](https://togithub.com/dipanjanpanja6) in
[https://github.com/ivpusic/react-native-image-crop-picker/pull/1964](https://togithub.com/ivpusic/react-native-image-crop-picker/pull/1964)
- docs: readme typo fix by
[@&#8203;therealrinku](https://togithub.com/therealrinku) in
[https://github.com/ivpusic/react-native-image-crop-picker/pull/1979](https://togithub.com/ivpusic/react-native-image-crop-picker/pull/1979)
- \[revert] Fix for openPicker not working when app targets Android 13
by [@&#8203;RodolfoGS](https://togithub.com/RodolfoGS) in
[https://github.com/ivpusic/react-native-image-crop-picker/pull/1973](https://togithub.com/ivpusic/react-native-image-crop-picker/pull/1973)

#### New Contributors

- [@&#8203;therealrinku](https://togithub.com/therealrinku) made their
first contribution in
[https://github.com/ivpusic/react-native-image-crop-picker/pull/1953](https://togithub.com/ivpusic/react-native-image-crop-picker/pull/1953)
- [@&#8203;dipanjanpanja6](https://togithub.com/dipanjanpanja6) made
their first contribution in
[https://github.com/ivpusic/react-native-image-crop-picker/pull/1964](https://togithub.com/ivpusic/react-native-image-crop-picker/pull/1964)
- [@&#8203;RodolfoGS](https://togithub.com/RodolfoGS) made their first
contribution in
[https://github.com/ivpusic/react-native-image-crop-picker/pull/1973](https://togithub.com/ivpusic/react-native-image-crop-picker/pull/1973)

**Full Changelog**:
ivpusic/react-native-image-crop-picker@v0.40.0...v0.40.1

###
[`v0.40.0`](https://togithub.com/ivpusic/react-native-image-crop-picker/releases/tag/v0.40.0)

[Compare
Source](https://togithub.com/ivpusic/react-native-image-crop-picker/compare/v0.39.0...v0.40.0)

##### ios

- Fix iPad crash
([https://github.com/ivpusic/react-native-image-crop-picker/pull/1753](https://togithub.com/ivpusic/react-native-image-crop-picker/pull/1753))
- Add the way to customize iOS cropper toolbar
([https://github.com/ivpusic/react-native-image-crop-picker/pull/1923](https://togithub.com/ivpusic/react-native-image-crop-picker/pull/1923))

###
[`v0.39.0`](https://togithub.com/ivpusic/react-native-image-crop-picker/releases/tag/v0.39.0)

[Compare
Source](https://togithub.com/ivpusic/react-native-image-crop-picker/compare/v0.38.1...v0.39.0)

### ios

- Add Finish Language
([https://github.com/ivpusic/react-native-image-crop-picker/pull/1872](https://togithub.com/ivpusic/react-native-image-crop-picker/pull/1872))
- Add Danish Language
([https://github.com/ivpusic/react-native-image-crop-picker/pull/1871](https://togithub.com/ivpusic/react-native-image-crop-picker/pull/1871))

### android

- Fix for openPicker not working when app targets Android 13
[#&#8203;1852](https://togithub.com/ivpusic/react-native-image-crop-picker/issues/1852)

###
[`v0.38.1`](https://togithub.com/ivpusic/react-native-image-crop-picker/releases/tag/v0.38.1)

[Compare
Source](https://togithub.com/ivpusic/react-native-image-crop-picker/compare/v0.38.0...v0.38.1)

### ios

- Add Vietnamese language
([https://github.com/ivpusic/react-native-image-crop-picker/pull/1835](https://togithub.com/ivpusic/react-native-image-crop-picker/pull/1835))
- fix: added PhotosUi That requeired for iOS
([https://github.com/ivpusic/react-native-image-crop-picker/pull/1853](https://togithub.com/ivpusic/react-native-image-crop-picker/pull/1853))

###
[`v0.38.0`](https://togithub.com/ivpusic/react-native-image-crop-picker/releases/tag/v0.38.0)

[Compare
Source](https://togithub.com/ivpusic/react-native-image-crop-picker/compare/v0.37.3...v0.38.0)

#### ios

- Add Norwegian strings
ivpusic/react-native-image-crop-picker@a857dcb

### android

- Add custom FileProvider implementation to avoid merging collision
ivpusic/react-native-image-crop-picker@1870e4d
- Fix android "Invalid image selected" issue
ivpusic/react-native-image-crop-picker@248331c

###
[`v0.37.3`](https://togithub.com/ivpusic/react-native-image-crop-picker/releases/tag/v0.37.3)

[Compare
Source](https://togithub.com/ivpusic/react-native-image-crop-picker/compare/v0.37.2...v0.37.3)

#### ios

- fix view blinks on ios15 if enable cropping flag
([https://github.com/ivpusic/react-native-image-crop-picker/pull/1739](https://togithub.com/ivpusic/react-native-image-crop-picker/pull/1739))
ivpusic/react-native-image-crop-picker@356985a

###
[`v0.37.2`](https://togithub.com/ivpusic/react-native-image-crop-picker/releases/tag/v0.37.2)

[Compare
Source](https://togithub.com/ivpusic/react-native-image-crop-picker/compare/v0.37.1...v0.37.2)

### ios

- Adding support for dark mode in limited permission help
([#&#8203;1680](https://togithub.com/ivpusic/react-native-image-crop-picker/issues/1680))
ivpusic/react-native-image-crop-picker@4a1bdbc

###
[`v0.37.1`](https://togithub.com/ivpusic/react-native-image-crop-picker/releases/tag/v0.37.1)

[Compare
Source](https://togithub.com/ivpusic/react-native-image-crop-picker/compare/v0.36.4...v0.37.1)

#### ios

- Adding messenger inspired iOS 14 limited permission info help in album
controller
ivpusic/react-native-image-crop-picker@cd26484

###
[`v0.36.4`](https://togithub.com/ivpusic/react-native-image-crop-picker/compare/v0.36.3...v0.36.4)

[Compare
Source](https://togithub.com/ivpusic/react-native-image-crop-picker/compare/v0.36.3...v0.36.4)

###
[`v0.36.3`](https://togithub.com/ivpusic/react-native-image-crop-picker/releases/tag/v0.36.3)

[Compare
Source](https://togithub.com/ivpusic/react-native-image-crop-picker/compare/v0.36.2...v0.36.3)

#### ios

- Added romanian language (ios)
([#&#8203;1597](https://togithub.com/ivpusic/react-native-image-crop-picker/issues/1597))
ivpusic/react-native-image-crop-picker@cbe7f87
- fix(export): export named functions to match definitions
([#&#8203;1646](https://togithub.com/ivpusic/react-native-image-crop-picker/issues/1646))
ivpusic/react-native-image-crop-picker@540ecea

#### android

- started android 11 support
ivpusic/react-native-image-crop-picker@2437d99
- remove write external storage permission only on android 11
ivpusic/react-native-image-crop-picker@f63a954
- Sometimes the length of the video cannot be retrieved.
ivpusic/react-native-image-crop-picker@bbd8730
- Fix image compression OOM exception
([#&#8203;1627](https://togithub.com/ivpusic/react-native-image-crop-picker/issues/1627))
ivpusic/react-native-image-crop-picker@5333954

###
[`v0.36.2`](https://togithub.com/ivpusic/react-native-image-crop-picker/releases/tag/v0.36.2)

[Compare
Source](https://togithub.com/ivpusic/react-native-image-crop-picker/compare/v0.36.1...v0.36.2)

- (android) safer exif parsing
ivpusic/react-native-image-crop-picker@16eb5e8

###
[`v0.36.1`](https://togithub.com/ivpusic/react-native-image-crop-picker/releases/tag/v0.36.1)

[Compare
Source](https://togithub.com/ivpusic/react-native-image-crop-picker/compare/v0.36.0...v0.36.1)

- (ios) Add heic format for determining MIME type
ivpusic/react-native-image-crop-picker@a24af4c
- (ios) turkish language strings added
ivpusic/react-native-image-crop-picker@e311caa
- (android) float variant of latitude/longitude exif data
ivpusic/react-native-image-crop-picker@9d86ade

###
[`v0.36.0`](https://togithub.com/ivpusic/react-native-image-crop-picker/releases/tag/v0.36.0)

[Compare
Source](https://togithub.com/ivpusic/react-native-image-crop-picker/compare/v0.35.3...v0.36.0)

#### Breaking changes

- (ios/android) Make sure to return precise + platform-consistent
permission error code
[https://github.com/ivpusic/react-native-image-crop-picker/pull/1506](https://togithub.com/ivpusic/react-native-image-crop-picker/pull/1506)

###
[`v0.35.3`](https://togithub.com/ivpusic/react-native-image-crop-picker/releases/tag/v0.35.3)

[Compare
Source](https://togithub.com/ivpusic/react-native-image-crop-picker/compare/v0.35.2...v0.35.3)

- ios Fix video not loading from iCloud
([#&#8203;1515](https://togithub.com/ivpusic/react-native-image-crop-picker/issues/1515))
ivpusic/react-native-image-crop-picker@e3b12e9

</details>

---

### Configuration

📅 **Schedule**: Branch creation - "after 5pm,every weekend" in timezone
America/Los_Angeles, Automerge - "after 5pm,every weekend" in timezone
America/Los_Angeles.

🚦 **Automerge**: Enabled.

♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the
rebase/retry checkbox.

🔕 **Ignore**: Close this PR and you won't be reminded about this update
again.

---

- [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check
this box

---

This PR has been generated by [Mend
Renovate](https://www.mend.io/free-developer-tools/renovate/). View
repository job log
[here](https://developer.mend.io/github/valora-inc/wallet).

<!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzNy41OS44IiwidXBkYXRlZEluVmVyIjoiMzcuNTkuOCIsInRhcmdldEJyYW5jaCI6Im1haW4ifQ==-->

---------

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: valora-bot <valorabot@valoraapp.com>
Co-authored-by: Satish Ravi <satish.ravi@valoraapp.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants