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

[shubhamguptadream11]

Summary:

Solves these issues:

• Custom Background Colour for Modal Display #18398
• Dim Background on Modal Display #12478

Solves this proposal: react-native-community/discussions-and-proposals#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'.

[alanleedev]

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

[facebook-github-bot]

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

[alanleedev]

@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)

[shubhamguptadream11]

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

[facebook-github-bot]

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

[facebook-github-bot]

@alanleedev merged this pull request in 4e1d701.

[react-native-bot]

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]

@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?