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
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/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
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
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
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
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
Summary: Changelog: [iOS][Changed] - Give precedence to `textContentType` property for backwards compat as mentioned in https://github.com/facebook/react-native/issues/36229#issuecomment-1470468374
Reviewed By: necolas
Differential Revision: D44106291
fbshipit-source-id: 5702d7f171735d1abe6cfbc9ca1ad8f21751d51e
Summary:
iOS did not support the implementation of Korean word-wrap(line-break) before iOS14.
If the attribute applied, the word-wrap of Korean will works.
## Changelog
<!-- Help reviewers and the release process by writing your own changelog entry. For an example, see:
https://github.com/facebook/react-native/wiki/Changelog
-->
[iOS] [Added] - Line break strategy for Text and TextInput components
Pull Request resolved: https://github.com/facebook/react-native/pull/31272
Test Plan:
1. Test build and run on above iOS 14.
2. Test it does not affect existing text components when set default(none) strategy.
3. Test whether word-wrap works with Korean when set hangul-word strategy.
<img src="https://user-images.githubusercontent.com/26326015/112963967-d7f70c00-9182-11eb-9a34-8c758b80c219.png" width="300" height="" style="max-width:100%;">
Reviewed By: javache
Differential Revision: D39824809
Pulled By: lunaleaps
fbshipit-source-id: 42cb0385221a38c84e80d3494d1bfc1934ecf32b
Summary:
This unifies the Android only `autoComplete` and the iOS only `textContentType` TextInput props with the web `autoComplete` values as requested on https://github.com/facebook/react-native/issues/34424. I left the `textContentType` prop and the current supported `autoComplete` values untouched in order to avoid having a breaking change. This also updates RNTester to include test cases using the new `autoComplete` values
## Changelog
<!-- Help reviewers and the release process by writing your own changelog entry. For an example, see:
https://reactnative.dev/contributing/changelogs-in-pull-requests
-->
[General] [Changed] - Unify TextInput autoComplete and textContentType props
Pull Request resolved: https://github.com/facebook/react-native/pull/34523
Test Plan:
1. Open the RNTester app and navigate to the TextInput page
2. Test the `TextInput` component through the `Text Auto Complete` section
https://user-images.githubusercontent.com/11707729/187118267-3b509631-7b84-47b7-a580-567a7f5b483f.mov
Reviewed By: NickGerleman
Differential Revision: D39104545
Pulled By: cipolleschi
fbshipit-source-id: a0d4b1b9ab336854a741a9efe4a62c3da0b5c0f4
Summary:
This adds the `readOnly` prop to TextInput as requested on https://github.com/facebook/react-native/issues/34424 mapping the existing `editable` prop to `readOnly` so that `readOnly={false}` maps to `editable={true}` and `readOnly={true}` represents ` editable={false}`. This PR also updates the TextInputExample on the RNTest in order to facilitate the manual QA of this.
## Changelog
[General] [Added] - Add readOnly prop to TextInput component
Pull Request resolved: https://github.com/facebook/react-native/pull/34444
Test Plan:
1. Open the RNTester app and navigate to the TextInput page
2. Test the `TextInput` component through the `Editable and Read only` section
https://user-images.githubusercontent.com/11707729/185295132-036443c8-1d5e-4567-a15e-5f1173cb0526.mov
Reviewed By: lunaleaps
Differential Revision: D38912786
Pulled By: necolas
fbshipit-source-id: faeb59ed8695732be682ec55406a2de0cb7e619a
Summary: Add annotations to function parameters required for Flow's Local Type Inference project. This codemod prepares the codebase to match Flow's new typechecking algorithm. The new algorithm will make Flow more reliable and predicatable.
Reviewed By: evanyeung
Differential Revision: D37353648
fbshipit-source-id: e5a0c685ced85a8ff353d578b373f836b376bb28
Summary:
Changelog:
[Internal] - Rename some types and components in RNTester to support work for tertiary levels of navigation.
module = component | api
moduleExample = an example of a certain feature a module
Reviewed By: kacieb
Differential Revision: D29381875
fbshipit-source-id: c348bcbb73aaf95e85928bb14080a097e685cc78
Summary:
## Changelog
<!-- Help reviewers and the release process by writing your own changelog entry. For an example, see:
https://github.com/facebook/react-native/wiki/Changelog
-->
This PR aims to migrate the RNTester App to `packages` directory. But is currently, open to inspect the CI issues and resolve the merge conflicts.
Currently done
- Working on iOS
- Working on Android
- Detox Tests working on iOS
Need to work on
- Errors generated by the CI builds
[General] [Changed] - Migrated the RNTester App to the packages directory.
Pull Request resolved: https://github.com/facebook/react-native/pull/29567
Test Plan: It runs on both ios and android for now and the detox iOS builds are working.
Reviewed By: cpojer
Differential Revision: D23034761
Pulled By: rickhanlonii
fbshipit-source-id: e04bb06e1c7ef15d340206090d1575a871b9e6f5
Nicola Corti
dominictb
Mateo Guzmán
Riccardo Cipolleschi
shubhamguptadream11
Nick Gerleman
Pieter Vanderwerff
Oskar Kwaśniewski
Moti Zilberman
Sam Zhou
Rob Walker
Fábio Henriques
Luna Wei
Ruslan Lesiutin
bang9
Gabriel Donadel Dall'Agnol
Pieter Vanderwerff
Sam Zhou
Andres Suarez
Tim Yung
Evan Yeung
Luna Wei
Paige Sun
Ankit Tiwari
stealthanthrax
