[RN][iOS] Adjust InputAccessoryView width to match device width within Safe Area constraints

[mauriciomeirelles]

Summary:

This PR updates the InputAccessoryView component to improve its width handling during device orientation changes for both Fabric and the old renderer. With this update, the component will always occupy the full width of the screen and adjust its size when the device orientation changes.

It also updates the component to stick to the safe area in React Native instead of iOS native. This tweak opens up possibilities for better customizations down the line.

Resolves: https://github.com/facebook/react-native/issues/27887

Changelog:

[IOS] [FIXED] - Fix InputAccessoryView width on device orientation change

Test Plan:

https://github.com/facebook/react-native/assets/5813840/cd3cc7bf-21c2-42a7-9f59-53bb613b9ef1

Difference between horizontal list with horizontal safe area inset in the component or on the content

component constraint	content inset

[facebook-github-bot]

Hi @mauriciomeirelles!

Thank you for your pull request and welcome to our community.

Action Required

In order to merge any pull request (code, docs, etc.), we require contributors to sign our Contributor License Agreement, and we don't seem to have one on file for you.

Process

In order for us to review and merge your suggested changes, please sign at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need to sign the corporate CLA.

Once the CLA is signed, our tooling will perform checks and validations. Afterwards, the pull request will be tagged with CLA signed. The tagging process may take up to 1 hour after signing. Please give it that time before contacting us about it.

If you have received this in error or have any questions, please contact us at [email protected]. Thanks!

[analysis-bot]

Platform	Engine	Arch	Size (bytes)	Diff
android	hermes	arm64-v8a	19,461,555	-16,998
android	hermes	armeabi-v7a	n/a	--
android	hermes	x86	n/a	--
android	hermes	x86_64	n/a	--
android	jsc	arm64-v8a	22,834,304	-16,756
android	jsc	armeabi-v7a	n/a	--
android	jsc	x86	n/a	--
android	jsc	x86_64	n/a	--

Base commit: 90663081de872243203da99116d2cab0fbec95ff Branch: main

[cipolleschi]

Thanks for the contribution @mauriciomeirelles and sorry for the late reply: I have been out for some weeks and I missed this. I'm finishing up some work on some other areas, but I promise to have a look at it as soon as I can!

[cipolleschi]

Hi @mauriciomeirelles, can you please split the contribution in two parts? One for the Safe Area and one for the width?

I'm a bit reluctant with the change as it might break a lot of internal tests and product, unfortunately... But we can try. To set expectation, this means that we might not be able to land this.

[mauriciomeirelles]

Hi @mauriciomeirelles, can you please split the contribution in two parts? One for the Safe Area and one for the width?

I'm a bit reluctant with the change as it might break a lot of internal tests and product, unfortunately... But we can try.

To set expectation, this means that we might not be able to land this.

Sure! I am out this week but I can do it next week.

[mauriciomeirelles]

Hey @cipolleschi, I've just updated the PR to remove the breaking change! Let me know what you think.

[mauriciomeirelles]

hey @cipolleschi, I've updated the PR! Let me know what you think!

[cipolleschi]

Code looks good. I'll try to import this and see how it works, but we might have internal tests failing here... 🙈

[facebook-github-bot]

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

[facebook-github-bot]

@cipolleschi merged this pull request in facebook/react-native@8597727c28d9cb77012f3f4ebb032c335246d589.

[github-actions[bot]]

This pull request was successfully merged by @mauriciomeirelles in 8597727c28d9cb77012f3f4ebb032c335246d589.

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