Summary:
**iOS** does offer a native property for **UITextField** called `inputAssistantItem`. According to the [documentation](https://developer.apple.com/documentation/uikit/uitextinputassistantitem), we can hide the **"shortcuts"** by setting the `leadingBarButtonGroups` and `trailingBarButtonGroups` properties to empty arrays.
I propose adding a new property for **TextInput** in **React Native**, which would set these native properties to empty arrays. This new property could be called `disableInputAssistant` or `disableKeyboardShortcuts` and would be a `boolean`.
Developers can manage this behavior (the redo & undo buttons and suggestions pop-up hiding) after applying these native props.
https://github.com/react-native-community/discussions-and-proposals/discussions/830
## Changelog:
<!-- Help reviewers and the release process by writing your own changelog entry.
Pick one each for the category and type tags:
[IOS] [ADDED] - [TextInput] Integrate a new property - `disableKeyboardShortcuts`. It can disable the keyboard shortcuts on iPads.
For more details, see:
https://reactnative.dev/contributing/changelogs-in-pull-requests
-->
[IOS] [ADDED] - [TextInput] Integrate a new property - `disableKeyboardShortcuts`. It can disable the keyboard shortcuts on iPads.
Pull Request resolved: https://github.com/facebook/react-native/pull/47671
Test Plan:
Manual
1. Open TextInput examples.
2. Scroll down and reach the "Keyboard shortcuts" section.
3. Test each case.
Note: **TextInput** behaves the same as now when the new prop is not passed or is `false`.
https://github.com/user-attachments/assets/5e814516-9e6c-4495-9d46-8175425c4456
Reviewed By: javache
Differential Revision: D67451609
Pulled By: cipolleschi
fbshipit-source-id: 59ba3a5cc1644ed176420f82dc98232d88341c6e
Summary:
If 3rd party libs are using `inputAccessoryView` - the current code can easily break it. Whenever props gets changed we call `setDefaultInputAccessoryView` which will simply overwrite the current `inputAccessoryView` (which is highly undesirable).
The same fix on paper was made ~7 years ago: https://github.com/facebook/react-native/commit/bf3698323d81508fc77174df2b1ffe5fb03224e7
## Changelog:
<!-- Help reviewers and the release process by writing your own changelog entry.
Pick one each for the category and type tags:
[IOS] [FIXED] - Fixed problem with accessory view & 3rd party libs
For more details, see:
https://reactnative.dev/contributing/changelogs-in-pull-requests
Pull Request resolved: https://github.com/facebook/react-native/pull/48339
Test Plan: Make sure `inputAccessoryView` functionality works as before
Reviewed By: javache
Differential Revision: D67451188
Pulled By: cipolleschi
fbshipit-source-id: bc3fa82ae15f8acedfd0b4e17bdea69cbd8c8a8d
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/48225
Fixes https://github.com/facebook/react-native/issues/47762
The weak event emitter in AttributedString attributes is causing a serialization error when typing into a TextInput in a Mac Catalyst build. We can resolve this by not putting the event emitters in the attributed string, but this is likely to cause other issues with event handling for nested <Text> components.
## Changelog
[iOS][Fixed] - Workaround for Mac Catalyst TextInput crash due to serialization attempt of WeakEventEmitter
Reviewed By: NickGerleman
Differential Revision: D66664583
fbshipit-source-id: efdfbcb0db4d5e6b9bf7c14f9bbb221faae2d724
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/47737
We may see an NSRangeException when setting new AttributedString content, where setting the AttributedString itself changes selection (before we mutate it later).
It seems like the selection here is not in a good state yet in regards to the AttributedString backing exposed (since we are reading it while modifying it). So let's fold the logic for updating typing attributes into the collection of ignored work from non-user-selection updates, since programatically setting an AttributedString will already trigger updating typing attributes.
I also added a nil check here, which is unrelated to the crash, but it seems like we should have it for safety...
Changelog:
[iOS][Fixed] - Fix possible NSRangeException when updating typing attributes in response to new text content
Reviewed By: cipolleschi
Differential Revision: D66202986
fbshipit-source-id: fded492b5022c5fef5b9563f93a57549d06a7020
Summary:
Currently in iOS, when focusing the multiline text input, the cursor is not automatically scrolled into view if it is out of view. This PR adds the small util to scroll the cursor into view when the text input focuses. This doesn't happen in Android due to [this](https://github.com/facebook/react-native/blob/defb0bd137711d3e76514d9202005a221a345871/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactEditText.java#L360)
Original issue: https://github.com/Expensify/App/issues/48122
Original proposal: https://github.com/Expensify/App/issues/48122#issuecomment-2320769418
## Changelog:
<!-- Help reviewers and the release process by writing your own changelog entry.
Pick one each for the category and type tags:
[ANDROID|GENERAL|IOS|INTERNAL] [BREAKING|ADDED|CHANGED|DEPRECATED|REMOVED|FIXED|SECURITY] - Message
For more details, see:
https://reactnative.dev/contributing/changelogs-in-pull-requests
-->
[IOS] [ADDED] - Scroll the cursor into view when text input is focused
Pull Request resolved: https://github.com/facebook/react-native/pull/46411
Test Plan:
Code to reproduce in rn-tester
```
const TextInputWithFocusButton = () => {
const inputToFocusRef = React.useRef<React.ElementRef<typeof TextInput> | null>(null);
return (
<View>
<ExampleTextInput
ref={inputToFocusRef}
placeholder="height increases with content"
defaultValue="React Native enables you to build world-class application experiences on native platforms using a consistent developer experience based on JavaScript and React. The focus of React Native is on developer efficiency across all the platforms you care about - learn once, write anywhere. Facebook uses React Native in multiple production apps and will continue investing in React Native."
multiline={true}
enablesReturnKeyAutomatically={true}
returnKeyType="go"
style={[styles.multiline, styles.multilineExpandable]}
/>
<Button title="Focus" onPress={() => {
inputToFocusRef.current?.focus();
}} />
</View>
);
};
```
Steps:
- Move the cursor of the input to end of the input text
- Scroll up the input
- Blur the input
- Click on `Focus` button to re-focus the input
Note that before this fix, the cursor is not scrolled into view
- In iOS
<table>
<tr>
<th>Before</th>
<th>After</th>
</tr>
<tr>
<td>
https://github.com/user-attachments/assets/de589cbf-158c-4e28-81d6-8412bf05ab23
</td>
<td>
https://github.com/user-attachments/assets/81c571f9-653b-49a5-9ecb-6eeaa2c54ec7
</td>
</tr>
</table>
Reviewed By: sammy-SC
Differential Revision: D62847985
Pulled By: cipolleschi
fbshipit-source-id: c0367a7fc0a7a16b30c4538e59f42d971d959357
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/47018
This change makes it so that newly typed text in a TextInput will include the existing attributes present based on cursor position. E.g. if you type after an inner fragment with blue text, the next character will be blue (or, an event emitter specific to an inner fragment will also be expanded). This is a behavior change for the (admittedly rare) case of uncontrolled TextInput with initially present children AttributedText, but more often effect controlled components, before state update (we are after, less likely to need to reset AttributedString because of mismatch).
Originally included this in D64121570, but it's not needed to fix the common case since we include paragraph-level event emitter as part of default attributes, and has some of its own risk, so I decided it is better separate.
Changelog:
[iOS][Changed] - Include existing attributes in newly typed text
Reviewed By: cipolleschi
Differential Revision: D64352310
fbshipit-source-id: 90ef8c49f50186eadf777e81cf6af57e1aada207
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/46970
Fixes https://github.com/facebook/react-native/issues/44157
This one is a bit of a doozy...
During auto-correct in UITextField (used for single line TextInput) iOS will mutate the buffer in two parts, non-atomically. After the first part, after iOS triggers `textFieldDidChange`, selection is in the wrong position. If we set full new AttributedText at this point, we propagate the incorrect cursor position, and it is never restored.
In the common case, where we are not mutating text in the controlled component, we shouldn't need to be setting AttributedString in the first place, and we do have an equality comparison there currently. But it is defeated because attributes are not identical. There are a few sources of that:
1. NSParagraphStyle is present in backing input, but not the AttributedString we are setting.
2. Backing text has an NSShadow with no color (does not render) not in the AttributedText
3. Event emitter attributes change on each update, and new text does not inherit the attributes.
The first two are part of the backing input `typingAttributes`, even if we set a dictionary without them. To solve for them, we make attribute comparison insensitive to the attribute values in a default initialized control. There is code around here fully falling back to attribute insensitive comparison, which we would ideally fix to instead role into this "effective" attribute comparison.
The event emitter attributes being misaligned is a real problem. We fix in a couple ways.
1. We treat the attribute values as equal if the backing event emitter is the same
2. We set paragraph level event emitter as a default attribute so the first typed character receives it
After these fixes, scenario in https://github.com/facebook/react-native-website/pull/4247 no longer repros in new arch. Typing in debug build also subjectively seems faster? (we are not doing second invalidation of the control on every keypress).
Changes which do mutate content may be susceptible to the same style of issue, though on web/`react-dom` in Chrome, this seems to not try to preserve selection at all if the selection is uncontrolled, so this seems like less of an issue.
I haven't yet looked at old arch, but my guess is we have similar issues there, and could be fixed in similar ways (though, we've been trying to avoid changing it as much as possible, and 0.76+ has new arch as default, so not sure if worth fixing in old impl as well if this is very long running issue).
Changelog:
[iOS][Fixed] - Fix cursor moving in iOS controlled single line TextInput on Autocorrection (New Arch)
Reviewed By: javache, philIip
Differential Revision: D64121570
fbshipit-source-id: 2b3bd8a3002c33b68af60ffabeffe01e25c7ccfe
Summary:
Removed UIReturnKeyDefault as it caused bug when there wasn't any type.
## Changelog:
[IOS] [REMOVED]: UIReturnKeyDefault
<!-- Help reviewers and the release process by writing your own changelog entry.
Pick one each for the category and type tags:
[ANDROID|GENERAL|IOS|INTERNAL] [BREAKING|ADDED|CHANGED|DEPRECATED|REMOVED|FIXED|SECURITY] - Message
For more details, see:
https://reactnative.dev/contributing/changelogs-in-pull-requests
Pull Request resolved: https://github.com/facebook/react-native/pull/46020
Reviewed By: christophpurrer
Differential Revision: D61277058
Pulled By: cipolleschi
fbshipit-source-id: 18349c49b05d492a2c2ed5713af3ceb6d3728e70
Summary:
This PR implements the missing `automicallyAdjustsKeyboardInsets` for new architecture. It's a fixed version of reverted: https://github.com/facebook/react-native/issues/45819
We now check if the view intersects with the keyboard's end frame and if it doesn't we just do nothing.
Here is the app running on new arch:
https://github.com/user-attachments/assets/673f0587-6a67-47e3-8050-d6ee33a45724
## Changelog:
[IOS] [FIXED] - implement automicallyAdjustsKeyboardInsets for new arch
Pull Request resolved: https://github.com/facebook/react-native/pull/45939
Test Plan:
1. Test out ScrollViewKeyboardInsets example
2. See if it works the same with old and new arch
Reviewed By: cortinico
Differential Revision: D60958475
Pulled By: cipolleschi
fbshipit-source-id: 8650064af84bc79b6b89e07293640e5d010154c2
Summary:
This PR implements the missing `automicallyAdjustsKeyboardInsets` for new architecture.
After fixing this I've noticed there is an open issue (https://github.com/facebook/react-native/issues/45647) with somebody assigned (sorry shubhamguptadream11 for taking your task)
Here is the app running on new arch:
https://github.com/user-attachments/assets/673f0587-6a67-47e3-8050-d6ee33a45724
## Changelog:
[IOS] [FIXED] - implement automicallyAdjustsKeyboardInsets for new arch
Pull Request resolved: https://github.com/facebook/react-native/pull/45819
Test Plan:
1. Test out ScrollViewKeyboardInsets example
2. See if it works the same with old and new arch
Reviewed By: sammy-SC
Differential Revision: D60453404
Pulled By: cipolleschi
fbshipit-source-id: bd7ce5bac8facffc527106b50c54112acf687bc3
Summary:
Fixes https://github.com/facebook/react-native/issues/41988
Hopefully even if this isn't the right way to go about solving this, it at least points in the right direction for a different fix!
Currently - both on Paper and Fabric - the `selectTextOnFocus` prop does not work as expected on a single line text input. It seems that if the `UITextField` has not yet become the first responder, the text will be briefly selected but then deselected immediately afterward.
This can be seen in the tester when running for either Fabric or Paper (video using Fabric)
https://github.com/facebook/react-native/assets/153161762/aa9c609e-6eb8-4177-a41f-32aae53c06ac
Instead, we can move the `selectAll` call to `reactFocus` in `RCTBaseTextInputView` or `focus` `RCTTextInputComponentView` - both of which first call `becomeFirstResponder` - to get the expected result.
## Changelog:
[IOS] [FIXED] - fix selectTextOnFocus in Fabric and non-Fabric by calling selectAll after becomeFirstResponder
Pull Request resolved: https://github.com/facebook/react-native/pull/44307
Test Plan:
* Test changes on RN Tester (iOS)
https://pxl.cl/55kDc
Reviewed By: cipolleschi
Differential Revision: D56699773
Pulled By: fabriziocucci
fbshipit-source-id: ed092835f3c602e2c50a4198357653a9cef942d9
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/44098
This sets `QualiferAlignment` so that code is automatically formatted to west const.
I did a pass at this before, but now that we are on new Clang Format, we can enforce it automatically, and I think a couple more cases not previously changed now are.
Changelog: [Internal]
Reviewed By: christophpurrer
Differential Revision: D56143678
fbshipit-source-id: 8f12b288476ea6019fd7d7a93a39b4fe2e75af14
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/43429
changelog: [internal]
these experimental props have served their purpose and can be deleted.
Reviewed By: rubennorte
Differential Revision: D54682805
fbshipit-source-id: aee5072e2aa056c862f369426617d0d51c98997f
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/41623
`static` fields require additional code to ensure the field is only ever initialized once. We already have a static "default props" field in the shadow node, so let's reuse that as much as possible.
Changelog: [Internal]
Reviewed By: rshest
Differential Revision: D51547638
fbshipit-source-id: e4957ffb0f9352847b8cd8dc3a010dcfac8be699
Summary:
(reland of D48761722)
Pull Request resolved: https://github.com/facebook/react-native/pull/39217
React Native uses an inconsistent mix of "west const" and "east const". E.g. `const auto &` in 74 files, but `auto const &` in 60. Sometimes they are mixed from one line to the next: {F1079102436}
Clang format 14 adds a QualifierAlignment option, but fbsource is still on 12, so we cannot use it in our config until the [world is updated]()https://fb.workplace.com/groups/toolchain.fndn/posts/24006558685624673/?comment_id=24009214565359085&reply_comment_id=24009455088668366. This diff just runs a local version of Clang format locally first to fix QualifierAlignment, then reformats with the fbsource version, to fix any other output differences unrelated to that. This will not continually enforce a style, but will make the world more consistent, and hopefully encourage a consistent style until we can set it.
West const seems more popular in `//xplat` so I just picked left alignment somewhat arbitrarily, but we could also maybe take a poll on this.
Changelog: [Internal]
bypass-github-export-checks
Reviewed By: shwanton
Differential Revision: D48852450
fbshipit-source-id: 1789aa0db43948169f482188cb8b5e8f0f0246b8
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/37932
`static_cast<Derived &>(*sharedBase)` is preferred over `*std::static_pointer_cast<Derived>(sharedBase)`, since we don't need to copy the underlying shared_ptr to do so. The same applies for `std::const_pointer_cast`.
Changelog: [Internal]
Reviewed By: rshest
Differential Revision: D46766558
fbshipit-source-id: 5d0b660107b2a60340952e2b5ec2792e3ed1832a
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/36795
This change bump the min iOS version for React Native to 13.4, to align with company guidelines.
## Changelog:
[iOS][Changed] - Moved the min iOS version to 13.4
Reviewed By: cortinico
Differential Revision: D44634663
fbshipit-source-id: 035e8fcbb395f7394f8253e3ec485ad9937531c2
Summary:
## Changelog:
[Internal] -
While merging a Contributor PR in D43816768, I got curious whether such things as detecting/fixing typos could be automated.
There is a tool called [typos](https://github.com/crate-ci/typos), which, as it turns out, works very well on source code files.
The amount of false positives was minimal, most of the suggestions were valid ones.
And the total amount of typos found and fixed was **more than 300**, which is... quite a bit :)
### Methodology
* Run `typos` separately on `ReactCommon`, `Libraries`, `React`, `ReactAndroid` and `scripts` folders inside `packages/react-native`, e.g.:
```
$ typos -w --config ~/tmp/_typos.toml ~/fbsource/xplat/js/react-native-github/packages/react-native/ReactAndroid
```
Contents of the `_typos.toml` config file:
```
[default.extend-words]
collapsable = "collapsable"
NDK = "NDK"
inout = "inout"
```
(yeah, it really didn't like the "collapsable" word, for some reason ;))
* Inspect all the changes manually and revert false positives (as mentioned, their amount was minimal)
Note that most of the changes are inside things like comments and error messages, however there are a few among identifier name fixes (`typos` is actually quite smart at understanding naming conventions in code) - I kept the suggestions in cases that are local and not part of a public API. There are also misspelled file name changes in a couple of cases.
Reviewed By: NickGerleman
Differential Revision: D44172494
fbshipit-source-id: 86e27edbbb99e09135e3cdd5d7cea8ffeb8307f4
zhongwuzw
Mykhailo Kravchenko
kirillzyusko
Eric Rozell
Nick Gerleman
dominictb
Mateo Guzmán
Zeya Peng
Elene Botchoradze
Oskar Kwaśniewski
Omar Manjarrez Osornio
shubhamguptadream11
Hailey
Fabrizio Bertoglio
Samuel Susla
Pieter De Baets
Ken Tominaga
Fábio Henriques
Riccardo Cipolleschi
Ruslan Shestopalyuk
Ruslan Lesiutin