Commit Graph

88 Commits

Author SHA1 Message Date
Sam Zhou cf664c65e2 Standardize subtyping error code into incompatible-type in react native and metro (#53312)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/53312

Changelog: [Internal]

Reviewed By: jbrown215

Differential Revision: D80400976

fbshipit-source-id: 196af69c0b9621b2a2675b232406639773e04933
2025-08-18 09:04:31 -07:00
Maciej Jastrzębski 6965d57e75 fix(a11y): TextInput aria-label handling (#53051)
Summary:
The `aria-label` prop was ignored on `TextInput` component. Which resulted in screen reader not able to read it.

This PR forwards `aria-label` to `accessibilityLabel` in a manner similar to e.g. `View` and `Text`

## 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
-->

[GENERAL] [FIXED] - a11y: fix `aria-label` on `TextInput`

Pull Request resolved: https://github.com/facebook/react-native/pull/53051

Test Plan:
Run RNTester => TextInput => Accessibility section under Accessibility Inspector or screen reader.

iOS fixed:
https://github.com/user-attachments/assets/68c3a2ef-7dfe-479c-97fc-cbe72108c45c

iOS baseline:
https://github.com/user-attachments/assets/2e8372ba-10dc-47d2-b6b1-9f664000de7d

Reviewed By: andrewdacenko

Differential Revision: D79635413

Pulled By: rshest

fbshipit-source-id: dd2f583d67c6c6c6393e02c5fe534308e1e2f921
2025-08-06 09:36:35 -07:00
Sam Zhou 6b354155ed Replace $FlowFixMe(Props|State|Empty) with just $FlowFixMe (#53002)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/53002

Changelog: [Internal]

Reviewed By: marcoww6

Differential Revision: D79524515

fbshipit-source-id: 18b96538a62c7ae5912b1e89d2b50c1420c7eaf5
2025-08-04 11:43:00 -07:00
Sam Zhou 23c8787fe2 Add annotations to fix future errors after fix for unsound array types (#52691)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/52691

Unannotated array literals are unsound in Flow right now. This diff adds in annotations and makes a few things readonly, to reduce future errors.

Changelog: [Internal]

Reviewed By: marcoww6

Differential Revision: D78519638

fbshipit-source-id: d98a7668ecf97bcc87dcb3fad25ade736d885d9a
2025-07-17 17:30:43 -07:00
Tim Yung 1977dd6596 RN: Sort Pragmas in Headers (#51554)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/51554

Sorts pragma directives file headers in React Native.

Changelog:
[Internal]

Reviewed By: SamChou19815

Differential Revision: D75264593

fbshipit-source-id: 9e4b253dd0fc94dc2fc469d7114b93a8aae305f4
2025-05-22 21:18:53 -07:00
Panos Vekris 50ca7e5730 manual annotations in preparation of natural inference rollout in react-native, tools, etc.
Summary:
The Flow team is improving the way Flow infers type for primitive literals. This diff prepares the codebase for the new behavior by adding type annotations, or annotations of the form `'abc' as const`.

Changelog: [internal]

Reviewed By: marcoww6

Differential Revision: D75188179

fbshipit-source-id: be50990f23f79cf2d8dae7576af5190218adcafe
2025-05-21 20:06:46 -07:00
Tim Yung 84de8a075e RN: Delete @oncall Annotations (#51416)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/51416

Deletes `oncall` annotations from the `facebook/react-native` repository.

Changelog:
[Internal]

Reviewed By: javache

Differential Revision: D74902524

fbshipit-source-id: 32a6a5b2ff27281792d572f151e2b094d9a79029
2025-05-17 16:18:05 -07:00
Tim Yung 1bf167ce97 RN: Prefer Destructured Import for useRef (#51404)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/51404

Prefers using this as a destructured import instead of as a member expression of `React`.

Changelog:
[Internal]

Reviewed By: SamChou19815

Differential Revision: D74893440

fbshipit-source-id: 9032f1e867a34b9cfa808f920a38f2630046eed7
2025-05-16 16:33:18 -07:00
Tim Yung 00108a1ac3 RN: Prefer Destructured Import for useState (#51403)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/51403

Prefers using this as a destructured import instead of as a member expression of `React`.

Changelog:
[Internal]

Reviewed By: SamChou19815

Differential Revision: D74891875

fbshipit-source-id: 981e85b5da84950c9e66e8d6b6496019e536711d
2025-05-16 16:33:18 -07:00
Tim Yung 7af10f7a1a RN: Prefer Destructured Import for memo (#51401)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/51401

Prefers using this as a destructured import instead of as a member expression of `React`.

Changelog:
[Internal]

Reviewed By: javache

Differential Revision: D74889277

fbshipit-source-id: 0d42921758c5d6e108a4c82dbd52b7de89fbef00
2025-05-16 16:33:18 -07:00
Tim Yung 255c197baf RN: Prefer Destructured Import for createRef (#51399)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/51399

Prefers using this as a destructured import instead of as a member expression of `React`.

Changelog:
[Internal]

Reviewed By: rubennorte

Differential Revision: D74888097

fbshipit-source-id: a22ca4b791153ff0c2f4ab34ff8e3ce5e9280e0d
2025-05-16 16:33:18 -07:00
Sam Zhou 797705c00d Make use of ref-as-prop support in examples (#51358)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/51358

Make use of the React 19 feature so that we can remove the remaining `forwardRef` in react native.

Changelog: [Internal]

Reviewed By: yungsters

Differential Revision: D74812747

fbshipit-source-id: 7ded547ff62ca59d28abfc46a2f57466e2486acd
2025-05-15 09:55:32 -07:00
Dawid Małecki ddcab831b1 Migrate already root exported deep imports in rn-tester. (#50958)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/50958

In rn-tester package there are many react-native deep imports which will be deprecated in the future. It is a starter for migrating rn-tester to using root imports instead. Only deep imports that are already root exported are changed. This diff avoids using `CodegenTypes` as it causes build errors and will be resolved in next stages.

Besides import changes, `PointerEvent` type is now also exported from the root.

Changelog:
[Internal]

Reviewed By: huntie

Differential Revision: D73656526

fbshipit-source-id: 5814a3d9c6a04b1236581dbbe291cd109e2c71c0
2025-04-28 07:24:46 -07:00
Peter Abbondanzo 93f12eb71d Add prop to filter drag and drop pasting on iOS (#50533)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/50533

Builds upon https://github.com/facebook/react-native/pull/49446

On iOS, by default, every EditText accepts DragEvent and will automatically focus themselves to accept these data. In some rare cases, it might not be desirable to allow data from arbitrary drag and drop events to be pasted into a text input.

This change adds a new prop `acceptDragAndDropTypes` to do exactly that: reject drag and drop events by telling the system to ignore certain types of drag data and, by proxy, disabling behavior that automatically focuses the text input.

The prop accepts a list of [Uniform Type Identifiers](https://developer.apple.com/documentation/uniformtypeidentifiers) that iOS supports. It's important to note that these are *not* MIME types. A MIME type would be something like `text/plain` but the equivalent for iOS is `public.plain-text`.

It's important to note that this is an experimental prop, as is evident by the `experimental_` prefix on the JS side. Its signature could change before the prop has fully matured, use at your own risk

Changelog: [iOS][Added] - Add new prop for filtering drag and drop targeting to text inputs

Reviewed By: javache

Differential Revision: D70992749

fbshipit-source-id: 22b5aa1b4ced14147bf16a844361acf6f99c5a40
2025-04-23 13:13:17 -07:00
Peter Abbondanzo d10dd7130c Add prop to filter drag and drop pasting on Android (#49446)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/49446

On Android, by default, every EditText accepts `DragEvent` and will automatically focus themselves to accept these data. In some rare cases, it might not be desirable to allow data from arbitrary drag and drop events to be pasted into a text input.

This change adds a new prop `acceptDragAndDropTypes`  to do exactly that: reject drag and drop events by telling the system to ignore certain types of drag data and, by proxy, disabling behavior that automatically focuses the text input.

The prop accepts a subset of MIME types supported by Android as documented [here](https://developer.android.com/reference/android/content/ClipDescription#MIMETYPE_TEXT_HTML).

It's important to note that this is an experimental prop, as is evident by the `experimental_` prefix on the JS side. Its signature could change before the prop has fully matured, use at your own risk

Changelog: [Android][Added] - Add new prop for filtering drag and drop targeting to text inputs

Reviewed By: javache

Differential Revision: D69674225

fbshipit-source-id: 4dbbdd81bb0f394b6206da5a377c75ea71671626
2025-04-23 13:13:17 -07:00
Nick Gerleman f9aed5a747 Enable TextInput-textStyles E2E Test against RNTester
Summary:
We fixed the previous layout issue when it wasn't in a ScrollView (I think text caching problem?) Let's enable for more than just Catalyst, and re-enable this test for iOS!

Changelog: [Internal]

Reviewed By: GijsWeterings

Differential Revision: D72683455

fbshipit-source-id: 538f8e23226c07510d382e45eb29f1710822849e
2025-04-11 21:08:16 -07:00
Nick Gerleman 5e7c0d2096 Add Jest E2E Tests for S462299 (#50000)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/50000

This adds some tests that verify that controlled textinput, via text prop, or children creating attributedstring, does not jumble text, so long as JS side does not mutate underlying text content.

The rewriting/max length example does still run into problems here.

Changelog: [Internal]

Reviewed By: joevilches

Differential Revision: D71076703

fbshipit-source-id: 85995e8cc087533b1115f158ba5dad67ed008289
2025-03-12 19:45:29 -07:00
Rubén Norte cd072dca99 Migrate HostInstance to an interface (#49633)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/49633

Changelog: [internal]

This replaces the definition of `HostInstance` to use an interface instead of an object, to better represent the underlying type (an instance of `ReactFabricHostComponent`) and simplify the migration to the new DOM API.

Reviewed By: huntie

Differential Revision: D70023947

fbshipit-source-id: bf312abf02fec48b2b5afb41053593ce542f7324
2025-02-26 05:13:08 -08:00
Jakub Piasecki dcaa33e6d9 Add support for numberOfLines for TextInput on iOS (#49549)
Summary:
`TextInput` component has been missing support for `numberOfLines` prop on iOS, this PR adds it.

## Changelog:

[IOS] [ADDED] - Add support for `numberOfLines` prop on `TextInput`

Pull Request resolved: https://github.com/facebook/react-native/pull/49549

Test Plan: Tested on RNTester and added a new case utilizing the prop

Reviewed By: cipolleschi

Differential Revision: D69915133

Pulled By: j-piasecki

fbshipit-source-id: b6a86bc64bd3c2129a64e99c9bcec9cf5bfde3bc
2025-02-24 04:23:58 -08:00
Jakub Piasecki c3ea606660 Align TextInput types with TypeScript (#48972)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/48972

Changelog: [Internal]

Align TextInput types with TypeScript definitions.

Reviewed By: huntie

Differential Revision: D68713179

fbshipit-source-id: bb36d9333e45f2a30db91a17b8698b34cd792eb6
2025-01-31 04:54:42 -08:00
Rickard Zrinski 97cf42f979 Fix maxFontSizeMultiplier prop on Text and TextInput components in new architecture (#47614)
Summary:
The `maxFontSizeMultiplier` prop for `Text` and `TextInput` was not handled in Fabric / New Architecture as documented in https://github.com/facebook/react-native/issues/47499.

bypass-github-export-checks

## Changelog:

[GENERAL] [FIXED] - Fix `maxFontSizeMultiplier` prop on `Text` and `TextInput` components in Fabric / New Architecture

Pull Request resolved: https://github.com/facebook/react-native/pull/47614

Test Plan:
I have not added any automated tests for this change but try to do so if requested. I have however added examples to RN Tester for both the Text and TextInput components, as well as compared the behaviour with Paper / Old Architecture. Both on version 0.76.

Noticed now I didn't do exactly the same steps in both videos, oops! Be aware that reapplying changes made in the Settings are currently half-broken on the new architecture, thus I'm restarting the app on Android and iOS. But this issue is unrelated to my changes. I've tested on main branch and it has the same issue.

Here are comparison videos between Paper and Fabric on iOS *after* I've made my fix.

### Text
| Paper  | Fabric |
| ------------- | ------------- |
| <video src="https://github.com/user-attachments/assets/f4fd009f-aa6d-41ab-92fa-8dcf1e351ba1" /> | <video src="https://github.com/user-attachments/assets/fda42cc6-34c2-42a7-a6e2-028e7c866075" /> |

### TextInput
| Paper  | Fabric |
| ------------- | ------------- |
| <video src="https://github.com/user-attachments/assets/59b59f7b-25d2-4b5b-a8e2-d2054cc6390b" /> | <video src="https://github.com/user-attachments/assets/72068566-8f2a-4463-874c-45a6f5b63b0d" /> |

Reviewed By: Abbondanzo

Differential Revision: D65953019

Pulled By: cipolleschi

fbshipit-source-id: 90c3c7e236229e9ad9bd346941fafe4af8a9d9fc
2025-01-29 09:27:44 -08:00
VidocqH 2ae45ec3ce fix TextInput dataDetectorTypes (#48952)
Summary:
Setting `dataDetectorTypes` has no effect. As I am new to the react native codebase, it seems like `dataDetectorTypes` has not implemented on new arch yet.

issue: https://github.com/facebook/react-native/issues/48951

## Changelog:

[IOS] [FIXED] - implement `dataDetectorTypes` in the same way as the old architecture

Pull Request resolved: https://github.com/facebook/react-native/pull/48952

Test Plan: <img width="356" alt="image" src="https://github.com/user-attachments/assets/192a683c-f7b7-48ac-98cd-76866901f008" />

Reviewed By: javache

Differential Revision: D68715166

Pulled By: cipolleschi

fbshipit-source-id: 612119e7453da012e6f75e1fc3a22ddedcb569a4
2025-01-28 05:07:26 -08:00
Dawid Małecki f36bfe5dfa Remove redundant {||} syntax (#48686)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/48686

Changelog:
[Internal] - Removed redundant `{||}` syntax

Reviewed By: javache

Differential Revision: D68205038

fbshipit-source-id: f7d3271142b6443a5859c3b668b7aebd3ce3ef3f
2025-01-15 07:07:01 -08:00
Mateo Guzmán d4407d6f77 Fix RNTester strict mode warnings (#48619)
Summary:
While investigating https://github.com/facebook/react-native/issues/22186, some false positives showed up as some of the examples also have non-strict mode compatible code.

In this PR:

- Converting from class to functional components some TextInput and Image examples that were using `UNSAFE_` lifecycles.
- Unifying the auto-expanding example as it was exactly the same for iOS and Android.

## Changelog:

[INTERNAL] - Fix RNTester strict mode warnings for TextInput and Image examples

Pull Request resolved: https://github.com/facebook/react-native/pull/48619

Test Plan:
- Wrapped the the entry app component in `RNTesterAppShared.js` with `StrictMode` and verified that no warnings are shown anymore for the updated components.
- Checked the examples are still working as they were.

Reviewed By: fabriziocucci

Differential Revision: D68094402

Pulled By: rshest

fbshipit-source-id: e13878cb290735095afaef3d0377fd6dab33c380
2025-01-13 05:11:13 -08:00
Mykhailo Kravchenko 0154372b93 feat: Manage keyboard shortcuts visibility of TextInput (#47671)
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
2025-01-06 09:54:29 -08:00
Mateo Guzmán 79ed11f8f4 fix(rn-tester): text input and xml http request dark mode adjustments (#48207)
Summary:
Was troubleshooting in these modules recently and noticed a few texts off in dark mode. Replacing a few instances of the Text component in all I could see in the two screens.

## Changelog:

[INTERNAL] - RN Tester `TextInput` & `XMLHttpRequest` dark mode adjustments

Pull Request resolved: https://github.com/facebook/react-native/pull/48207

Test Plan:
<details>
<summary>View Screenshots (before fixes)</summary>

| Screenshot 1 | Screenshot 2 | Screenshot 3 | Screenshot 4 | Screenshot 5 | Screenshot 6 |
|--------------|--------------|--------------|--------------|--------------|--------------|
| ![Simulator Screenshot - iPhone SE (3rd generation) - 2024-12-11 at 00 11 36](https://github.com/user-attachments/assets/c396bc5d-4b3c-4f63-8ac0-68bc808aa9d4) | ![Simulator Screenshot - iPhone SE (3rd generation) - 2024-12-11 at 00 11 21](https://github.com/user-attachments/assets/cd8e5a2f-9066-4bc7-b56b-65dbd6df7dc4) | ![Simulator Screenshot - iPhone SE (3rd generation) - 2024-12-11 at 00 10 30](https://github.com/user-attachments/assets/da451c18-40cd-4421-b8f5-a2462f82fee9) | ![Simulator Screenshot - iPhone SE (3rd generation) - 2024-12-11 at 00 10 23](https://github.com/user-attachments/assets/32925fdb-f983-439f-b898-6986b739895a) | ![Simulator Screenshot - iPhone SE (3rd generation) - 2024-12-11 at 00 10 19](https://github.com/user-attachments/assets/f0db7b49-dfef-4abc-aef0-2d55b016c0f8) | ![Simulator Screenshot - iPhone SE (3rd generation) - 2024-12-11 at 00 10 16](https://github.com/user-attachments/assets/bad6dc45-3679-4bb6-aadd-6743053cd90f) |
| ![Simulator Screenshot - iPhone SE (3rd generation) - 2024-12-11 at 00 10 10](https://github.com/user-attachments/assets/43028f51-c6e2-4b26-b20d-a3639606d6d5) | ![Simulator Screenshot - iPhone SE (3rd generation) - 2024-12-11 at 00 10 07](https://github.com/user-attachments/assets/f8e2196e-bc64-4507-b330-d1d85730ddff) | ![Simulator Screenshot - iPhone SE (3rd generation) - 2024-12-11 at 00 09 59](https://github.com/user-attachments/assets/a7100770-4b38-421f-9b73-09e4fff9e012) | ![Simulator Screenshot - iPhone SE (3rd generation) - 2024-12-11 at 00 09 53](https://github.com/user-attachments/assets/27759c8c-0e56-4b92-8173-ba031b994e5c) | | | |

</details>

<details>
<summary>View Screenshots (after fixes)</summary>

| Screenshot 1 | Screenshot 2 | Screenshot 3 | Screenshot 4 | Screenshot 5 | Screenshot 6 |
|--------------|--------------|--------------|--------------|--------------|--------------|
| ![Simulator Screenshot - iPhone SE (3rd generation) - 2024-12-11 at 00 05 30](https://github.com/user-attachments/assets/71c0287d-d98a-4bfe-85dc-1e08da12ce43) | ![Simulator Screenshot - iPhone SE (3rd generation) - 2024-12-11 at 00 05 26](https://github.com/user-attachments/assets/45eac165-f42a-4193-98cc-3ee85d963382) | ![Simulator Screenshot - iPhone SE (3rd generation) - 2024-12-11 at 00 05 23](https://github.com/user-attachments/assets/c0e4432d-2d1d-487f-8965-3829c3257364) | ![Simulator Screenshot - iPhone SE (3rd generation) - 2024-12-11 at 00 05 19](https://github.com/user-attachments/assets/ab81500c-66c1-4b90-b2b1-f7c490e0029b) | ![Simulator Screenshot - iPhone SE (3rd generation) - 2024-12-11 at 00 05 16](https://github.com/user-attachments/assets/aafcad74-e851-49a8-9db0-df06f81f0b30) | ![Simulator Screenshot - iPhone SE (3rd generation) - 2024-12-11 at 00 05 11](https://github.com/user-attachments/assets/29a2a6c8-e448-4c90-844d-29a248f9ab69) |
| ![Simulator Screenshot - iPhone SE (3rd generation) - 2024-12-11 at 00 05 07](https://github.com/user-attachments/assets/54e505c4-c554-4000-aac1-61b97e034f55) | ![Simulator Screenshot - iPhone SE (3rd generation) - 2024-12-11 at 00 04 39](https://github.com/user-attachments/assets/0e91dc29-199d-424e-b36a-6b0f7a317cd2) | ![Simulator Screenshot - iPhone SE (3rd generation) - 2024-12-11 at 00 04 22](https://github.com/user-attachments/assets/e965b01d-0b03-4d01-a971-57c3bd550146) | ![Simulator Screenshot - iPhone SE (3rd generation) - 2024-12-11 at 00 04 15](https://github.com/user-attachments/assets/50ef03a6-bf1a-4db3-845b-e98373369574) |  |  |

</details>

Reviewed By: cipolleschi

Differential Revision: D67087492

Pulled By: javache

fbshipit-source-id: c9c64377d8c10d965bc5db7783aa80f099ce858a
2024-12-12 04:07:10 -08:00
Nicola Corti 88c9a42fca Fix eslint warnings in react-native (#48016)
Summary:
There are currently 2 warnings firing for every PR (e.g. look here https://github.com/facebook/react-native/pull/48013/files).

Those are annoying so I'm fixing them here.

## Changelog:

[INTERNAL] - Fix eslint warnings in react-native

Pull Request resolved: https://github.com/facebook/react-native/pull/48016

Test Plan: CI

Reviewed By: NickGerleman

Differential Revision: D66595842

Pulled By: cortinico

fbshipit-source-id: 0fd39629a97dbbe5d75a78c8eaa50241faf6bf1e
2024-12-02 04:11:22 -08:00
dominictb e021e50d53 fix: scroll the cursor into view when focus (#46411)
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
2024-11-18 03:38:49 -08:00
Mateo Guzmán 32931466ed feat(text-input): [iOS] inputAccessoryViewButtonLabel prop (#47441)
Summary:
Fixes https://github.com/facebook/react-native/issues/29244, also mentioned in https://github.com/facebook/react-native/issues/25009

As mentioned in the linked issues, the current return key label in the input accessory view is not localized. In the code, right now the texts are hardcoded (see: [RCTTextInputComponentView.mm](https://github.com/facebook/react-native/blob/main/packages/react-native/React/Fabric/Mounting/ComponentViews/TextInput/RCTTextInputComponentView.mm#L552) and [RCTBaseTextInputView.mm](https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/Text/TextInput/RCTBaseTextInputView.mm#L694)). I could not find the historical reason for this, but doing some investigation there doesn't seem to be a way of getting the translated text into the code by using the existing props. (Ref: https://stackoverflow.com/a/58190342/5415299)

The solution: adding a new property `inputAccessoryViewButtonLabel` which can be used to overwrite these defaults non-translated values. The property is optional to avoid breaking changes.

The implementation works for both Fabric and Paper.

## Changelog:

[IOS] [ADDED] - TextInput `inputAccessoryViewButtonLabel` prop

Pull Request resolved: https://github.com/facebook/react-native/pull/47441

Test Plan:
A new example has been added under the `TextInput` examples in the RNTester. See below:

<details>
<summary>Video demonstrating how the new prop behaves</summary>

https://github.com/user-attachments/assets/b15cb8b8-494a-4f41-b434-e33eeef5d267

</details>

Reviewed By: cipolleschi

Differential Revision: D65533493

Pulled By: javache

fbshipit-source-id: d80bf501ba3e38bf3b09833170780df45a26bb61
2024-11-13 06:44:23 -08:00
Hanno J. Gödecke 0fc2e954be add example for dynamic sized text input (#46976)
Summary:
This PR adds an example showcasing a TextInput whose width gets resized dynamically based on the text content width.
This example was added for this PR, which tries to address a flickering bug with dynamic sized TextInputs:

- https://github.com/facebook/react-native/pull/46973

## 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
-->

[INTERNAL] [ADDED] Added dynamic content width TextInput example

Pull Request resolved: https://github.com/facebook/react-native/pull/46976

Test Plan:
Test in RNTester app:

https://github.com/user-attachments/assets/7571b80b-7035-47df-b840-4218ab0802b5

Reviewed By: NickGerleman

Differential Revision: D64271454

Pulled By: arushikesarwani94

fbshipit-source-id: 28fe7bd93891ffe5284340d73e9ee947654f1788
2024-10-29 12:40:09 -07:00
Fabrizio Cucci 5f058018dc Replace React.AbstractComponent with component type in various examples (#46919)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/46919

Prepare for the ref-as-prop typing change in flow.

Changelog: [Internal]

Reviewed By: SamChou19815

Differential Revision: D64105531

fbshipit-source-id: 5729862a95f544a3c1e1a88484d145ba92e192a6
2024-10-10 07:01:29 -07:00
Riccardo Cipolleschi d3d48cb357 feat(JS): Expose text content types to JS (#46170)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/46170

This PR expose to JS a few missing text content types on iOS (available from iOS 15)

- dateTime
- flightNumber
- shipmentTrackingNumber

## Changelog
[General][Added] - Expose missing text content type to JS

Reviewed By: blakef

Differential Revision: D61657788

fbshipit-source-id: 1a0ea0e76efaf715d88bcbf249f7cb20b5f3607b
2024-09-10 05:00:00 -07:00
shubhamguptadream11 ce2d34f194 feat(iOS): line break mode implement JS APIs for the new mode (#46128)
Summary:
Solves this issue: https://github.com/facebook/react-native/issues/44107

## 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] - Line break mode for TextInput components. **This includes JS APIs for the new mode.**

This PR is a breakdown of [this](https://github.com/facebook/react-native/pull/45968) PR.

Pull Request resolved: https://github.com/facebook/react-native/pull/46128

Test Plan:
- Added unit tests to cover the new JS APIs.
- Verified that the new mode functions as expected through manual testing.

Reviewed By: andrewdacenko

Differential Revision: D61657004

Pulled By: cipolleschi

fbshipit-source-id: 9fc5c40fc077bee8e1abc51b6eae2e0f0fcd9b8f
2024-09-10 04:52:22 -07:00
Sam Zhou 5b96e90f77 Replace React.Element<any> and unnecessarily specific React.Element with React.MixedElement (#45923)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/45923

Changelog: [Internal]

Reviewed By: gkz

Differential Revision: D60872182

fbshipit-source-id: b81fb43968c52cbfdb4a9fa57f1175aabc2a3939
2024-08-06 21:33:08 -07:00
kunal.chavhan 18d6028ff9 fix: select text on auto focus for TextInput (#45004)
Summary:
Fixes: https://github.com/facebook/react-native/issues/43413

This pull request addresses an issue on Android where the text selection was not working when both `selectTextOnFocus` and `autoFocus` were set to true on TextInput.
`ReactTextInputManager` was calling `setSelectAllOnFocus` on `ReactEditText` before its onLayout is called causing text selection to not work on auto focus.

Changes Made

- Added logic to wait for the ReactEditText view's layout to be drawn before attempting to select the text.
On the first layout pass, the code now explicitly calls selectAll() to select the text.
- Implemented a check to ensure selectAll() is only called during the first layout pass, avoiding unnecessary calls on subsequent layout passes.

Impact
This change ensures that text selection is properly triggered when selectTextOnFocus and autoFocus are both enabled, improving the user experience and making text input behavior consistent and reliable.

## Changelog:

[ANDROID] [FIXED]: fixed select text on auto focus for TextInput

<!-- 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/45004

Test Plan:
| Before | After |
|--------|--------|
| ![before](https://github.com/facebook/react-native/assets/61144478/02da975a-2c80-41b9-86c1-196d0324f437) | ![after](https://github.com/facebook/react-native/assets/61144478/fbe78758-04ab-460f-8ecb-b267ed07751a) |

Reviewed By: javache

Differential Revision: D59448600

Pulled By: cortinico

fbshipit-source-id: 8a594d3193f227ba2d64b808d905bab8b3d24e9b
2024-07-12 10:49:54 -07:00
Nick Gerleman c046198cc9 Add more clipping examples (#44735)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/44735

Add some more examples of overflow clipping for scrollview, text, textinput.

Changelog: [Internal]

Reviewed By: sammy-SC

Differential Revision: D57999676

fbshipit-source-id: dfede321b2c7c61dda3afaf2aea784f6c295c384
2024-05-31 12:06:33 -07:00
Nick Gerleman 2ad51e53f0 Move showSoftInputOnFocus example to TextInputSharedExamples (#44558)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/44558

Right now this is only exposed to RNTester on iOS, but the prop exists on both platforms.

Changelog: [Internal]

Reviewed By: javache

Differential Revision: D57281892

fbshipit-source-id: 9effc2b9c6421f8c74a2f4b933ab0fa0f15e7d70
2024-05-14 05:26:35 -07:00
Ruslan Shestopalyuk 8c3260f2a4 Make relevant TextInput examples not depend on top window size (#44517)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/44517

# Changelog:
[Internal] -

A follow-up to https://github.com/facebook/react-native/pull/44505, turns out this is also an issue for TextInput examples, which work of assumption of some of the text input fields being of limited width, but in practice growing to occupy the parent window width, which can be quite large on platforms different from the classic mobile ones.

This diff makes the corresponding tests more practical, not expanding to the parent window anymore.

Reviewed By: christophpurrer

Differential Revision: D57196308

fbshipit-source-id: 7018e8c51adb70fe6a03e50d71eff9ba997fd07a
2024-05-10 00:14:33 -07:00
Pieter Vanderwerff 007ca0c376 Deploy 0.236.0 to xplat (#44510)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/44510

Changelog: [Internal]

Reviewed By: SamChou19815

Differential Revision: D57186863

fbshipit-source-id: 389dcb039c7d4c461b3be28f4eba32d5d9781e61
2024-05-09 19:33:12 -07:00
Nick Gerleman 15f27bc299 Handle fontWeight normalization for TextInput component
Summary:
Web props work (somewhere around  D41230978 and D39268920) made it so that numeric font weights can be set instead of just strings. This is implemented by converting number to string before passing to native component within the `Text` component.

We have crash with:
```
2024-04-19 09:38:21.360 16963 17190 E ViewManager: Error while updating prop fontWeight
2024-04-19 09:38:21.360 16963 17190 E ViewManager: java.lang.IllegalArgumentException: method com.facebook.react.views.text.ReactBaseTextShadowNode.setFontWeight argument 1 has type java.lang.String, got java.lang.Double
2024-04-19 09:38:21.360 16963 17190 E ViewManager: 	at java.lang.reflect.Method.invoke(Native Method)
```

`TextStyleProps` can also be passed to `TextInput`, which passes to underlying native component, without going through this logic. And the types for Native props directly derive from JS props, so type system does not catch passing incorrect number type to underlying native component.

This does a quick and dirty replication of the exact logic in `Text.js` to `TextInput.js`. I'd love to potentially fix this up for Fabric in a different way when we rethink CSS parsing.

Changelog:
[General][Fixed] - Handle `fontWeight` normalization for TextInput component

Reviewed By: arushikesarwani94

Differential Revision: D56539571

fbshipit-source-id: 8975886c117d814a624f817bffe408841bb03b88
2024-04-24 16:02:46 -07:00
Nick Gerleman 3f88821167 Avoid TextInput example styles causing non-deterministic rendering on iOS (#43599)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/43599

iOS E2E tests non-deterministic rendering happens around examples with a border set to `StyleSheet.hairlineWidth`. That value has special subpixel math, that doesn't seem to render consistently on iOS (this is its own bug).

To unblock adding some new E2E iOS TextInput tests, this removes usage of `hairlineWidth` in styles, and more generally, tries to unify TextInput styles in the examples.

This will break a whole bunch of RNTester Jest E2E baselines on different apps, which I will update from land-time runs or after continuous builds are available for different endpoints.

Changelog: [Internal]

Reviewed By: fkgozali

Differential Revision: D55213090

fbshipit-source-id: 6d81b9355adc538a3ade6f50ef93c3ca08782ae7
2024-03-29 02:41:26 -07:00
Oskar Kwaśniewski 7d1a98c43b Lint source files, sort imports, remove unused imports (#41829)
Summary:
This PR lints source files using eslint. I've executed `yarn lint --fix` and also manually fixed some of eslint issues.

Before:

![CleanShot 2023-12-07 at 12 07 10@2x](https://github.com/facebook/react-native/assets/52801365/2b00cf23-e5a0-46b8-802f-adcb67224111)

After:

![CleanShot 2023-12-07 at 12 06 24@2x](https://github.com/facebook/react-native/assets/52801365/bb05b2c0-2b27-4f99-b7b4-cb47a51a3885)

## Changelog:

[GENERAL] [FIXED] - Lint source files, sort imports, remove unused ones

Pull Request resolved: https://github.com/facebook/react-native/pull/41829

Test Plan: CI Green

Reviewed By: christophpurrer

Differential Revision: D51979074

Pulled By: dmytrorykun

fbshipit-source-id: e11b90721e33f5e9949a0833e5f39fe7ba3d1067
2023-12-11 08:54:29 -08:00
Jakub Grzywacz 1e68e48534 feat: selectionHandleColor prop on Android (#41092)
Summary:
This PR addresses the problem raised in the https://github.com/facebook/react-native/issues/41004 issue.

The current logic is that `selectionColor` on iOS sets the color of the selection, handles, and cursor. On Android it looks similar, while it doesn't change the color of the handles if the API level is higher than 27. In addition, on Android there was an option to set the color of the cursor by `cursorColor` prop, but it didn't work if the `selectionCursor` was set.

## 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
-->

[GENERAL] [ADDED] - Make same behavior of the `selectionColor` prop on Android as iOS
[ANDROID] [ADDED] - Introduced `selectionHandleColor` as a separate prop
[ANDROID] [CHANGED] - Allowing `cursorColor` and `selectionHandleColor` to override `selectionColor` on Android

Pull Request resolved: https://github.com/facebook/react-native/pull/41092

Test Plan:
Manual tests in rn-tester:

### `selectionColor` same as iOS, sets selection, handles and cursor color

_There is a way to set only "rectangle" color by setting other props as null_

![image](https://github.com/facebook/react-native/assets/39670088/9cba34c2-c9fc-4d84-a9cb-3b28a754671d)

### `selectionHandleColor`

![image](https://github.com/facebook/react-native/assets/39670088/8a7e488e-0e35-4646-9efe-4783420b41fa)

### `cursorColor`

![image](https://github.com/facebook/react-native/assets/39670088/06798b8a-851f-44c7-979e-a4e74681b29a)

Reviewed By: NickGerleman

Differential Revision: D51253298

Pulled By: javache

fbshipit-source-id: 290284aa38c6ba0aa6998b937258788ce6376431
2023-11-23 05:34:24 -08:00
Moti Zilberman d6e0bc714a Enable lint/sort-imports everywhere (#41334)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/41334

TSIA.

Changelog: [Internal]

Reviewed By: robhogan

Differential Revision: D51025812

fbshipit-source-id: e10d437be775a6b80946483aa96460f34927f870
2023-11-06 12:59:38 -08:00
Gijs Weterings 67c1a806e6 Flow strictify xplat/js/react-native-github where possible (#41051)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/41051

Strictifies flow to flow strict-local in files where doing that doesn't cause new flow errors.

Changelog: Internal

Reviewed By: yungsters

Differential Revision: D50369011

fbshipit-source-id: b4a5a26b839b7327a3178e6f5b35246dea365a38
2023-10-18 05:36:33 -07:00
Sam Zhou 4b97484650 Rollout support for multiplatform react-native project (#39131)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/39131

Docs on the new behavior: https://flow.org/en/docs/react/multiplatform

Changelog: [Internal]

Reviewed By: samwgoldman

Differential Revision: D48085422

fbshipit-source-id: daaa5a7d7d04871ab3da1ad47c6b88ef4226bdfd
2023-08-24 09:54:15 -07:00
Sam Zhou 90c0e3be14 Align types for different ios/android implementation files (#38761)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/38761

Changelog: [Internal]

Reviewed By: yungsters

Differential Revision: D48014272

fbshipit-source-id: d70c2b9442cedf87e72be336c7a25372daea8f28
2023-08-02 19:57:12 -07:00
Rob Walker 216865cdb7 feat: Support iOS 17 text content types (#38354)
Summary:
While setting up a credit card form in RN, I discovered that iOS 17 supports a number of new content types ([`UITextContentType` docs](https://developer.apple.com/documentation/uikit/uitextcontenttype?language=objc)). In the docs these are marked with the `Beta` flag.

Setting up the new content types is relatively straightforward, but a change is required in https://github.com/facebook/react-native-deprecated-modules to update the `TextInput` prop types. ~~I will open a PR in that repo shortly.~~ I have [opened a PR](https://github.com/facebook/react-native-deprecated-modules/pull/23) to update the prop types. ~~Once that PR is merged, a version bump for that dependency will need to be added to this PR.~~ The PR is merged and the dependency in this PR has been updated.

## Changelog:

<!-- Help reviewers and the release process by writing your own changelog entry.

Pick one each for the category and type tags:

[IOS] [ADDED] - Added support for iOS 17+ text content types

For more details, see:
https://reactnative.dev/contributing/changelogs-in-pull-requests

Pull Request resolved: https://github.com/facebook/react-native/pull/38354

Test Plan: The `rn-tester` app builds and runs successfully. I have added a few new examples of inputs using the new text content types.

Reviewed By: javache

Differential Revision: D47554161

Pulled By: philIip

fbshipit-source-id: 8d4414dc6229063f81164f2d8727921c8294c92e
2023-07-20 20:31:04 -07:00
Fábio Henriques 6b62f12ce9 Add smartInsertDelete prop to TextInput component (#36111)
Summary:
This PR add support to configure the `smartInsertDeleteType` property in iOS inputs [as described here](https://developer.apple.com/documentation/uikit/uitextinputtraits/2865828-smartinsertdeletetype), making possible toggle this autoformatting behavior.

PR for the docs update: https://github.com/facebook/react-native-website/pull/3560

## Changelog:

[IOS] [ADDED] - Add `smartInsertDelete` prop to `TextInput` component

Pull Request resolved: https://github.com/facebook/react-native/pull/36111

Test Plan:
* Added an example in the RNTester app to test this behavior in iOS.
* If the `smartInsertDelete` prop is `true` or `undefined`, the system will use the default autoformatting behavior.
* If the `smartInsertDelete` prop is `false`, the system will disable the autoformatting behavior.

https://user-images.githubusercontent.com/20051562/217862828-70c20344-d687-4824-8f5d-d591eff856ef.mp4

Reviewed By: javache

Differential Revision: D46546277

Pulled By: NickGerleman

fbshipit-source-id: 3172b14fb196876d9ee0030186540608204b96de
2023-06-08 12:06:15 -07:00
Pranav Yadav 8a49754cda Refactor: JS substr() is deprecated, using slice() instead (#37136)
Summary:
Fixes: https://github.com/facebook/react-native/issues/37135

- `substr()` is not part of the core JS since ~2018
- No wonder why no one noticed this :)
- Though its supported by modern browsers, its deprecated
- Reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/substr

### Why `slice()` and not `substring()`?
> Beacuse I like pizza ;) jk

The reason, that I'm not using the most obvious alternative `substring()` is;
- It _swaps the args_ passed, when; `startIndex > endIndex` —which I think is not a property of _good_ fn
  and also does not reflects the same in it's name.
- It _doesn't support negative args_, which I think reduces flexibility to work with it.
- It could lead to more bugs in most of the cases.

### Refecrences:
- Ref: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/substring#differences_between_substring_and_slice
- Ref. for `slice()`: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/slice
- Ref. for `substring()`: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/substring

## Changelog:

[GENERAL][FIXED] - Refactor: `substr()` is deprecated, using `slice()` instead across RN codebase

Pull Request resolved: https://github.com/facebook/react-native/pull/37136

Test Plan: - `yarn lint && yarn flow && yarn test-ci` --> _should be green_

Reviewed By: christophpurrer

Differential Revision: D45477910

Pulled By: jacdebug

fbshipit-source-id: 96a80893477599b9a549918924157627b9b0c3f4
2023-05-02 11:28:56 -07:00