react-native icon indicating copy to clipboard operation
react-native copied to clipboard
verified publisher icon facebook

feat: add overlayColor prop to modal component for customisable background overlay

Open shubhamguptadream11 opened this issue 1 year ago • 3 comments

Summary:

Solves these issues:

  • https://github.com/facebook/react-native/issues/18398
  • https://github.com/facebook/react-native/issues/12478

Solves this proposal: https://github.com/react-native-community/discussions-and-proposals/discussions/774

Changelog:

[GENERAL] [ADDED] - added overlayColor prop to modal component for customisable background overlay

Motivation: Currently, the React Native Modal component only allows the background to be set to either transparent or white. This limits the ability to dim the background or apply custom colors, which is essential for creating a more polished and user-friendly interface.

Change Log:

Modal Component Enhancements:

  • Introduced a new optional prop overlayColor to the Modal component.
  • Updated the background color logic to prioritize overlayColor when transparent is false.
  • Ensured backward compatibility by defaulting to white when overlayColor is not provided.

Test Plan:

  • Test the changes on both iOS and Android devices/emulators to ensure consistent behavior.
  • Added example in rn-tester app

Sample screenshot with custom overlayColor passed as 'red'.

simulator_screenshot_4F112217-7AD5-4030-8A18-6260AD32988A

shubhamguptadream11 avatar Sep 04 '24 10:09 shubhamguptadream11

@shubhamguptadream11 Thanks for submitting the PR. Let me try to review this next week.

alanleedev avatar Sep 04 '24 19:09 alanleedev

@alanleedev has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator.

facebook-github-bot avatar Sep 04 '24 19:09 facebook-github-bot

@shubhamguptadream11 Everything looks good but could you change the name overlayColor to backdropColor ? We are not overlaying anything over the modal so backdrop seems to be a better term here. (Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/::backdrop)

alanleedev avatar Sep 12 '24 17:09 alanleedev

@alanleedev Renamed the prop. Please check whenever you feel free. Thanks for feedback!

shubhamguptadream11 avatar Sep 12 '24 18:09 shubhamguptadream11

@alanleedev has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator.

facebook-github-bot avatar Sep 12 '24 20:09 facebook-github-bot

@alanleedev merged this pull request in facebook/react-native@4e1d7015c1d4e2703133b1347ed97a0cc93b1318.

facebook-github-bot avatar Sep 16 '24 16:09 facebook-github-bot

This pull request was successfully merged by @shubhamguptadream11 in 4e1d7015c1d4e2703133b1347ed97a0cc93b1318

When will my fix make it into a release? | How to file a pick request?

react-native-bot avatar Sep 16 '24 16:09 react-native-bot

@shubhamguptadream11 hm... the merged commit did not have your name change for some reason. I'll do the name change again.

This pull request was successfully merged by @shubhamguptadream11 in 4e1d701

When will my fix make it into a release? | How to file a pick request?

alanleedev avatar Sep 16 '24 16:09 alanleedev