Commit Graph

452 Commits

Author SHA1 Message Date
ericlewis
bbf715685e Fix semi-transparent backgrounds on Text components (#23872)
Summary:
Fix #23849. When setting a semi-transparent background on text, it becomes obvious that we are drawing the background color twice. Since background color is handled by the view, we should not need to draw the glyph background color too.

| Before        | After   |
| ------------- |-------------|
|<img src="https://i.imgur.com/8JGpKTC.png" width="300">     | <img src="https://imgur.com/qjKU9Ze.png" width="300">

[iOS] [Fixed] - Semi-transparent backgrounds on text
Pull Request resolved: https://github.com/facebook/react-native/pull/23872

Differential Revision: D14430501

Pulled By: shergin

fbshipit-source-id: 19743415b2d20a3b941b1c80bd7b47144e929458
2019-03-14 10:23:19 -07:00
zhongwuzw
17415938c7 Fix TextInput maxLength when insert characters at begin (#23472)
Summary:
Fixes #21639 , seems we tried to fix this before, please see related `PR` like [D10392176](36507e4a3c), #18627, but they don't solve it totally.

[iOS] [Fixed] - Fix TextInput maxLength when insert characters at begin
Pull Request resolved: https://github.com/facebook/react-native/pull/23472

Reviewed By: mmmulani

Differential Revision: D14366406

Pulled By: ejanzer

fbshipit-source-id: fc983810703997b48824f84f2f9198984afba9cd
2019-03-12 11:16:44 -07:00
zhongwuzw
af52693e9c Keep placeholder paragraph style same with single line text input (#23765)
Summary:
Keep placeholder paragraph style same with text input.

[iOS] [Fixed] - Keep placeholder paragraph style same with single line text input
Pull Request resolved: https://github.com/facebook/react-native/pull/23765

Differential Revision: D14321255

Pulled By: cpojer

fbshipit-source-id: 2b8cbb7f2c7ceb40a9a2b142065dd6f5eb3d62eb
2019-03-05 00:10:44 -08:00
zhongwuzw
debd4462e0 Keep placeholder paragraph style same with text input (#23763)
Summary:
Keep placeholder paragraph style same with text input.

[iOS] [Fixed] - Keep placeholder paragraph style same with text input
Pull Request resolved: https://github.com/facebook/react-native/pull/23763

Differential Revision: D14320996

Pulled By: cpojer

fbshipit-source-id: 07c20722809395a74a48300fbb7cadebb8707b03
2019-03-04 23:09:55 -08:00
zhongwuzw
ba6f818d7d Fixed singleline text input placeholder size (#23745)
Summary:
After #23738 , we can add more text attributes to placeholder, so now, let's update the calculation of placeholder size based on placeholder attributes.

[iOS] [Fixed] - Fixed singleline text input placeholder size
Pull Request resolved: https://github.com/facebook/react-native/pull/23745

Differential Revision: D14320630

Pulled By: cpojer

fbshipit-source-id: 2d9e8b59ba70228202add762cfc9c6cbc77e5e95
2019-03-04 21:56:53 -08:00
zhongwuzw
fd954cda55 Add lineHeight support of placeholder for multiline text input (#23760)
Summary:
After some refactor of text input attributes, we can now add style attributes  the same as text input's attributes, from https://github.com/facebook/react-native/issues/19002#issuecomment-467171589, user wants placeholder to support line-height , I think we can add it now for multiline text input.

[iOS] [Added] - Added lineHeight support of placeholder for multiline text input
Pull Request resolved: https://github.com/facebook/react-native/pull/23760

Differential Revision: D14320600

Pulled By: cpojer

fbshipit-source-id: ededeaa11560af089ca15ffc188e2e70db2ad7d4
2019-03-04 21:50:09 -08:00
zhongwuzw
aa3b0d99f4 Fixed multiline text input placeholder size (#23742)
Summary:
After #23738 , we can add more text attributes to placeholder, so now, let's update the calculation of placeholder size based on placeholder attributes.

[iOS] [Fixed] - Fixed multiline text input placeholder size
Pull Request resolved: https://github.com/facebook/react-native/pull/23742

Differential Revision: D14320489

Pulled By: cpojer

fbshipit-source-id: 6b0f07fe7406d5c99c7280d584f8b8e51fc84c00
2019-03-04 21:30:05 -08:00
zhongwuzw
65c014d19f Keep placeholder attributes sync with text input text's attributes (#23738)
Summary:
We need to keep placeholder attributes sync with text input's text attributes, like `font`,`kern` ....., to keep style the same.

Also fixes #19002 .

[iOS] [Fixed] - Keep placeholder attributes sync with text input text's attributes
Pull Request resolved: https://github.com/facebook/react-native/pull/23738

Differential Revision: D14298482

Pulled By: cpojer

fbshipit-source-id: 3555091bf3bc01e4b026d5a4cdbe93b4122106e8
2019-03-03 19:59:57 -08:00
zhongwuzw
5b98adf629 Fixed wrong placeholder size calculation in multiline text input mode (#23682)
Summary:
We have the wrong calculation of placeholder size currently, leads `contentSize` or some things inaccuracy.

[iOS] [Fixed] - Fixed wrong placeholder size calculation in multiline text input mode
Pull Request resolved: https://github.com/facebook/react-native/pull/23682

Differential Revision: D14255932

Pulled By: cpojer

fbshipit-source-id: a1f40e90fc2c848579694965da8316fae9e5c4c5
2019-02-27 22:00:14 -08:00
zhongwuzw
c2071c216e Fixed wrong contentSize calculation when placeholder is hidden in multiline text input (#23683)
Summary:
Currently, we pick the max size of text view's contentSize and placeholder's size, actually, if placeholder is be hidden, we should only return text view's contentSize.

[iOS] [Fixed] - Fixed wrong contentSize calculation when placeholder is hidden in multiline text input
Pull Request resolved: https://github.com/facebook/react-native/pull/23683

Differential Revision: D14255915

Pulled By: cpojer

fbshipit-source-id: 198faa7e1c5657371eb920973345194aedf72e41
2019-02-27 21:55:24 -08:00
zhongwuzw
3b3e6a0eb3 Fixed onScroll prop in mulitline TextInput (#23668)
Summary:
We lose the support of `onScroll` prop for multiline TextInput, let's add it again.

[iOS] [Fixed] - Fixed onScroll prop in mulitline TextInput
Pull Request resolved: https://github.com/facebook/react-native/pull/23668

Differential Revision: D14253996

Pulled By: cpojer

fbshipit-source-id: 43ed191e18fdb716f6c53be3bf0f59f917b34b59
2019-02-27 18:26:27 -08:00
zhongwuzw
f3ad49be67 Fixed placeholder font not consistent with text's font when in multiline mode (#23654)
Summary:
Placeholder's font not consistent with text's font, it leads to cursor dislocation. We need to keep consistent between placeholder and text.

[iOS] [Fixed] - Fixed placeholder font not consistent with text's font when in multiline mode
Pull Request resolved: https://github.com/facebook/react-native/pull/23654

Differential Revision: D14226174

Pulled By: hramos

fbshipit-source-id: 7cfb3b73d8799d22d5cbbfe557df8de3f5fcf034
2019-02-26 09:36:45 -08:00
zhongwuzw
06c6c7c673 Remove compatible system code for iOS8 and before (#23656)
Summary:
We already only support `iOS9+`, so we can remove all compatible codes now.

[iOS] [Fixed] - Remove compatible system code for iOS8 and before
Pull Request resolved: https://github.com/facebook/react-native/pull/23656

Differential Revision: D14224986

Pulled By: hramos

fbshipit-source-id: cac9ffe6788dd3eaf4f4f5f2b219f325ba78e85f
2019-02-26 07:58:52 -08:00
zhongwuzw
7a7eb11965 Fix textAttributes not applied when typing text (#23585)
Summary:
Currently, if we has `defaultValue`, textAttributes like `letterSpacing` can works, but if textinput has not default text, when we typing the text, some attributes not applied.

[iOS] [Fixed] - Fix textAttributes not applied when typing text
Pull Request resolved: https://github.com/facebook/react-native/pull/23585

Differential Revision: D14206568

Pulled By: cpojer

fbshipit-source-id: 7db276d811684bf6e01f8d30287cca80095db87c
2019-02-24 23:37:41 -08:00
Peter Argany
e38be82dfa Revert of [D13948951]Apply the fix for CJK languages on single-line test fields.
Summary:
This PR (https://github.com/facebook/react-native/pull/22546) broke single line text inputs. After inputting some text and tapping away, the text input reverts back to default text.

Revert solved the issue.

Reviewed By: cpojer

Differential Revision: D14185897

fbshipit-source-id: cc7f0f2ebfb0494062afbc628c4fe27ad27fb1c6
2019-02-22 11:00:07 -08:00
Eric Lewis
8ce3c1b43e Toggle secureTextEntry cursor spacing (#23524)
Summary:
This is a fix for #5859, based on the feedback in #18587. Instead of using `didSetProps` it uses a setter. I will also note that setting to `nil` no longer works (crashes) so setting it to a blank string then back to the original works fine.

[iOS] [Fixed] - Toggling secureTextEntry correctly places cursor.
Pull Request resolved: https://github.com/facebook/react-native/pull/23524

Differential Revision: D14143028

Pulled By: cpojer

fbshipit-source-id: 5f3203d56b1329eb7359465f8ab50eb4f4fa5507
2019-02-21 23:51:16 -08:00
zhongwuzw
d834197746 Fix build error warning of Text module (#23586)
Summary:
Throw error warning when build Text module, we can add tvOS available check to remove error.

[iOS] [Fixed] - Fix build error warning of Text module
Pull Request resolved: https://github.com/facebook/react-native/pull/23586

Differential Revision: D14181198

Pulled By: cpojer

fbshipit-source-id: 6a62c831ba119ddcbc6effa0b24f22bd4588b982
2019-02-21 23:12:39 -08:00
Ville Immonen
2321b3fd7f Split React.podspec into separate podspecs for each Xcode project (#23559)
Summary:
This PR implements the first part of [RFC0004: CocoaPods Support Improvements](353d44f649/proposals/0004-cocoapods-support-improvements.md), splitting the `React.podspec` into separate podspecs to more closely match the structure of Xcode projects.

The new structure aims to have one to one mapping between Xcode projects and podspecs. The only places where we differ from this mapping are:
* `React/React-DevSupport.podspec`: `DevSupport` is a part of `React.xcodeproj`, which corresponds to the `React-Core` pod. However, we can't include it in the `React-Core` pod because `DevSupport` depends on `React-RCTWebSocket`, which depends on `React-Core`. Pods may not have circular dependencies.
* The new pods under `ReactCommon/` don't have a corresponding `xcodeproj` because there are no `xcodproj` files in `ReactCommon/`. Those C++ modules are included in `React.xcodeproj`.

*Next steps (not in scope of this PR):*
- Start submitting the Podspecs to CocoaPods on a deploy (or turn the React Native repo into a spec repo): this is important in order to make the experience nicer for library consumers, so that it's not necessary to specify the local path of each Podspec in `Podfile`, you can just add `pod 'React', <version>`.
- Add `Podfile` to the default project template (I have a PR ready for this, but because of bugs related to subspecs, it's blocked on this PR)

[iOS] [Changed] - Split React.podspec into separate podspecs for each Xcode project
Pull Request resolved: https://github.com/facebook/react-native/pull/23559

Differential Revision: D14179326

Pulled By: cpojer

fbshipit-source-id: 397a9c30b6b5d24f86c790057c71f0d403f56c3d
2019-02-21 18:35:44 -08:00
Levi Buzolic
a89fe4165c Map TextInput textContentType strings to Objective-C constants (#22611)
Summary:
This is an updated version of #22579 which uses compile conditionals to prevent `use of undeclared identifier` errors when compiling on older versions of Xcode.

--------

Currently the only `textContentType` values that work are: `username`, `password`, `location`, `name` and `nickname`. This is due to the strings provided by React Native not matching up with the underlying string constants used in iOS (with the exception of the aforementioned types). Issue #22578 has more detail examples/explanation.
Pull Request resolved: https://github.com/facebook/react-native/pull/22611

Differential Revision: D13460949

Pulled By: cpojer

fbshipit-source-id: e6d1108422b850ebc3aea05693ed05118b77b5de
2019-02-19 23:52:40 -08:00
zhongwuzw
f8b52151eb Fixed textInput appearance not update when text attributes changed (#23533)
Summary:
If we change the text attributes dynamically, for example, change the textColor, it not works in iOS, Android works fine.

[iOS] [fixed] - Fixed textInput appearance not update when text attributes changed
Pull Request resolved: https://github.com/facebook/react-native/pull/23533

Differential Revision: D14146700

Pulled By: cpojer

fbshipit-source-id: 4a7c84d6e7f818acb712242bea6484b177a775c6
2019-02-19 22:02:20 -08:00
jsfu
f08c94bd36 fix the TextInput can't control input length when value's length > maxLength (#23545)
Summary:
I found the TextInput can't control input length when default value's length > maxLength.
for example:
1.Set the value in special cases
```
<TextInput value={'12345678'} maxLength={6}/>
```
2.Quickly press the keyboard with multiple fingers

```
// RCTBaseTextInputView.m
……
if (_maxLength) {
    NSUInteger allowedLength = _maxLength.integerValue - backedTextInputView.attributedText.string.length + range.length;
    if (text.length > allowedLength) {
……
```
when value's length > maxLength,the allowedLength not a negative number.it was transformed into a big number,because it is type NSUInteger.so the `text.length > allowedLength` always false.

[iOS][Fixed] - fix the TextInput can't control input length when value's length > maxLength
Pull Request resolved: https://github.com/facebook/react-native/pull/23545

Differential Revision: D14146581

Pulled By: cpojer

fbshipit-source-id: f53b1312ae55fad9fc10430ab94784c1a9ad4723
2019-02-19 21:41:07 -08:00
zhongwuzw
bd67254af1 fix typo in comments (#23478)
Summary:
Nit, just fix typo.

[iOS] [Fixed] - Fix typo in comments
Pull Request resolved: https://github.com/facebook/react-native/pull/23478

Differential Revision: D14101659

Pulled By: cpojer

fbshipit-source-id: b3d2bf25971c31a5fa3c411fbdfe761075dc4cfa
2019-02-15 07:18:30 -08:00
zhongwuzw
9ff43abe65 Prevent crash when scrollEnabled used in singleline textinput (#23361)
Summary:
Fixes #22949 , #21339. Currently, multiline textInput uses `UITextView` but singleline textInput uses `UITextField`, so singleline textinput may crash when use `scrollEnabled` property.

[iOS] [Fixed] - Prevent crash when scrollEnabled used in singleline textinput
Pull Request resolved: https://github.com/facebook/react-native/pull/23361

Differential Revision: D14030586

Pulled By: cpojer

fbshipit-source-id: a8ae1b4e168469e65745c4d5e9329df8b6faa2aa
2019-02-11 14:52:59 -08:00
dchersey
f307ac7c5e Fixes capitalized I's when emojiis are present after the text being edited. (#21951)
Summary:
Fixes #21243.
Fixes #20908.

Credit goes to superandrew213 who provided the patch based on 0.56; this commit merges and resolved the conflict introduced in 0.57.
Pull Request resolved: https://github.com/facebook/react-native/pull/21951

Differential Revision: D13980799

Pulled By: cpojer

fbshipit-source-id: 6b9f1a1ae54ad9dba043005d683d6a221472c729
2019-02-07 02:15:58 -08:00
Spencer Ahrens
10c8352141 Fix flow typing of Text
Summary:
Make Text prop types exact to catch tons of errors, including typos like in https://fb.workplace.com/groups/rn.support/permalink/2306953619353240/.

I tried to fix things when it was totally obvious what the intent was, but otherwise tried to keep the existing behavior the same, even if it meant that usage of some props was getting ignored, like `hitSlop`.

Reviewed By: TheSavior

Differential Revision: D13892999

fbshipit-source-id: 5003508a648287e4eca8055fb59da5f03bd066cc
2019-02-05 15:26:53 -08:00
Igor Mandrigin
05ebf77175 Apply the fix for CJK languages on single-line text fields. (#22546)
Summary:
Follow-up to https://github.com/facebook/react-native/pull/19809

This fix generalizes the `setAttributedString:` fix to single-line text fields.

Fixes #19339

_Pull requests that expand test coverage are more likely to get reviewed. Add a test case whenever possible!_
Pull Request resolved: https://github.com/facebook/react-native/pull/22546

Differential Revision: D13948951

Pulled By: shergin

fbshipit-source-id: 67992c02b32f33f6d61fac4554e4f46b973262c1
2019-02-04 15:09:46 -08:00
Rick Hanlon
44a289cf26 Switch Text style to TextStyleProp
Summary: This diff switches `Text.style` from `DangerouslyImpreciseStyle` to `TextStyleProps` and fixes/ignores the related flow issues

Reviewed By: TheSavior

Differential Revision: D13568053

fbshipit-source-id: b4b6f8c22323faf9592ef13697043bb181c77423
2019-01-03 03:43:26 -08:00
glevi@fb.com
24f8d4d3db Deploy v0.89
Reviewed By: jbrown215

Differential Revision: D13457087

fbshipit-source-id: 9f01371ae3515990c5595f1eb2361174050066b8
2018-12-14 13:57:50 -08:00
Ben Holcomb
6cc6f8f488 Revert D13402177: [react-native][PR] Map textContentType strings to Objective-C constants
Differential Revision:
D13402177

Original commit changeset: 55f4a2029cd3

fbshipit-source-id: b4871d10a9622f3312845a6682c482760e7e79e0
2018-12-10 13:05:12 -08:00
Levi Buzolic
077386a233 Map textContentType strings to Objective-C constants (#22579)
Summary:
Fixes #22578

Currently the only `textContentType` values that work are: `username`, `password`, `location`, `name` and `nickname`. This is due to the strings provided by React Native not matching up with the underlying string constants used in iOS (with the exception of the aforementioned types). Issue #22578 has more detail examples/explanation.
Pull Request resolved: https://github.com/facebook/react-native/pull/22579

Differential Revision: D13402177

Pulled By: shergin

fbshipit-source-id: 55f4a2029cd3ea1fb4834e9f56d2df5a05b31b4e
2018-12-10 12:11:51 -08:00
Igor Mandrigin
f77aa4eb45 Avoid using -[UITextView setAttributedString:] while user is typing (#19809)
Summary:
iOS-specific.
For languages with complex input (such as Japanese or Chinese), a user has to type multiple characters that are then merged into a single one.
If `-[UITextView setAttributedString:]` is used while the user is still typing, it resets the input and characters are not being treated as typed together.

This PR avoids calling this method if possible, replacing it by just copying the attributes if the string has not been changed. That preserves the state and user can continue to type Korean or Chinese characters.

Fixes #19339

<!--
  Required: Write your motivation here.
  If this PR fixes an issue, type "Fixes #issueNumber" to automatically close the issue when the PR is merged.
-->

<!--
  Required: Write your test plan here. If you changed any code, please provide us with
  clear instructions on how you verified your changes work. Bonus points for screenshots and videos!
-->

Essentially, the steps to reproduce are described in [the issue](https://github.com/facebook/react-native/issues/19339):

1. Type some Korean characters in TextInput, such as "하늘" (buttons `ㅎ`,`ㅏ`,`ㄴ`,`ㅡ`,`ㄹ`).
2. Then move the cursor to the beginning of the text, type "파란" (buttons `ㅍ`,`ㅏ`,`ㄹ`,`ㅏ`,`ㄴ`) this time.

**Behaviour before this fix (broken)**
Actual text: `ㅍㅏㄹㅏㄴ하늘`.
Expected text: `파란하늘`.
Characters aren't combined properly.

![ezgif com-resize](https://user-images.githubusercontent.com/466427/41613572-4256dda8-73f6-11e8-99a9-0ab833202b95.gif)

**Behaviour after this fix (correct)**
Actual text: `파란하늘`.
Expected text: `파란하늘`.
Characters are combined, the same behaviour is in vanilla iOS `UITextView`.

![input-with-fix](https://user-images.githubusercontent.com/466427/41613526-1aae2284-73f6-11e8-87f2-c1cef51cd83a.gif)

<!--
  Does this PR require a documentation change?
  Create a PR at https://github.com/facebook/react-native-website and add a link to it here.
-->

<!--
  Required.
  Help reviewers and the release process by writing your own release notes. See below for an example.
-->

[IOS] [BUGFIX] [TextView] - Fix Korean/Chinese/Japanese input for multiline TextView on iOS.

<!--
  **INTERNAL and MINOR tagged notes will not be included in the next version's final release notes.**

    CATEGORY
  [----------]      TYPE
  [ CLI      ] [-------------]    LOCATION
  [ DOCS     ] [ BREAKING    ] [-------------]
  [ GENERAL  ] [ BUGFIX      ] [ {Component} ]
  [ INTERNAL ] [ ENHANCEMENT ] [ {Filename}  ]
  [ IOS      ] [ FEATURE     ] [ {Directory} ]   |-----------|
  [ ANDROID  ] [ MINOR       ] [ {Framework} ] - | {Message} |
  [----------] [-------------] [-------------]   |-----------|

 EXAMPLES:

 [IOS] [BREAKING] [FlatList] - Change a thing that breaks other things
 [ANDROID] [BUGFIX] [TextInput] - Did a thing to TextInput
 [CLI] [FEATURE] [local-cli/info/info.js] - CLI easier to do things with
 [DOCS] [BUGFIX] [GettingStarted.md] - Accidentally a thing/word
 [GENERAL] [ENHANCEMENT] [Yoga] - Added new yoga thing/position
 [INTERNAL] [FEATURE] [./scripts] - Added thing to script that nobody will see
-->
Pull Request resolved: https://github.com/facebook/react-native/pull/19809

Differential Revision: D13326614

Pulled By: shergin

fbshipit-source-id: 6a5cab3f7290f0f623a6f4c29353a573eb321b0b
2018-12-04 13:23:43 -08:00
Thomas BARRAS
79274979b7 Flow strict TextProps (#22122)
Summary:
Related to #22100

Turn on Flow strict mode for TextProps.
I used ResponseHandlers type definition defined in Text.js.

I wanted to move ResponseHandlers type to TextProps and reuse it inside the file.
I know I could use $Shape<> to maybe keys but how do I elegantly maybe every values ?
Unless having a straightforward solution, I found it clearer to copy paste these types.

- All flow tests succeed.

[GENERAL] [ENHANCEMENT] [TextProps.js] - Flow strict mode
Pull Request resolved: https://github.com/facebook/react-native/pull/22122

Reviewed By: TheSavior

Differential Revision: D13055759

Pulled By: RSNara

fbshipit-source-id: 230b43c7c94d7f82f5727ad11541b0cb98bc5e3a
2018-11-21 14:27:25 -08:00
Adam Comella
70826dbafc iOS: Support inline view truncation (#21456)
Summary:
If text is truncated and an inline view appears after the truncation point, the user should not see the inline view. Instead, we have a bug such that the inline view is always visible at the end of the visible text.

This commit fixes this by marking the inline view as hidden if it appears after the truncation point.

This appears to be a regression. React Native used to have logic similar to what this commit is adding: 1e2a924ba6/Libraries/Text/RCTShadowText.m (L186-L192)

**Before fix**

Inline view (blue square) is visible even though it appears after the truncation point:

![image](https://user-images.githubusercontent.com/199935/46382038-d3a71200-c65d-11e8-8179-2ce4aad8d010.png)

The full text being rendered was:

```
<Text numberOfLines={1}>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit,
  sed do eiusmod tempor incididunt ut labore et dolore magna
  <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
</Text>
```

**After fix**

Inline view is properly truncated:

![image](https://user-images.githubusercontent.com/199935/46382067-fdf8cf80-c65d-11e8-84ea-e2b71c229dae.png)

**Test Plan**

Tested that the inline view is hidden if it appears after the truncation point when `numberOfLines` is 1 and 2. Similarly, verified that the inline view is visible if it appears before the truncation point.

**Release Notes**

[IOS] [BUGFIX] [Text] - Fix case where inline view is visible even though it should have been truncated

Adam Comella
Microsoft Corp.
Pull Request resolved: https://github.com/facebook/react-native/pull/21456

Differential Revision: D10182991

Pulled By: shergin

fbshipit-source-id: a5bddddb1bb8672b61d4feaa04013a92c8224155
2018-11-20 00:11:56 -08:00
ifsnow
0d4f627f42 Removed unnecessary code in Libraries/Text/Text.js (#22132)
Summary:
I don't think it's necessary to use spread properties (prevState) in `getDerivedStateFromProps`
Pull Request resolved: https://github.com/facebook/react-native/pull/22132

Differential Revision: D12929838

Pulled By: TheSavior

fbshipit-source-id: cdc4f9df8e2f0b2878aec605478144b3e08cea89
2018-11-05 14:22:38 -08:00
Sam Goldman
adc8a33fcf Deploy Flow v0.85 to xplat/js
Reviewed By: fishythefish

Differential Revision: D12898653

fbshipit-source-id: 2ed11ce569600fe4c12528939a350dd827c9a29a
2018-11-02 00:28:28 -07:00
Adam Comella
798517a267 Fix relayout of inline views (#21968)
Summary:
If a view inside of an inline view became dirty (e.g. its top/left prop changed), its position would not update on screen. This is because Yoga didn't know the view needed to be relaid out because Yoga's dirty signal didn't propagate all the way up to the root.

The problem is that inline views don't have a parent in the Yoga tree causing Yoga's dirtiness signal propagation to get cut off early. The fix is, when an inline views gets dirty, mark the parent Text's Yoga node as dirty. This will cause Yoga's dirtiness signal to propagate all the way up to the root node.

Yoga has a hook to inform you when your node is marked as dirty: `YGNodeSetDirtiedFunc`. We leverage this to find out when an inline view's Yoga node gets dirtied.

React Native almost handled this case. Everything worked fine as long as the inline view was nested inside of a virtual text node like this:

```
<Text>
  <Text>
    <InlineView />
  </Text>
</Text>
```

However, the bug repros when the inline view is nested in a non-virtual text node:

```
<Text>
  <InlineView />
</Text>
```

The fix is to move the special dirtiness propagation logic from `RCTVirtualTextShadowView` to `RCTBaseTextShadowView`.

**Test Plan**

Created an inline view. Tested the following kinds of updates on the inline view's content:
  - Moved the content
  - Removed the content
  - Added the content

Tested this for an inline view that is directly inside of a text node as well as one that is nested under a virtual text node.

Here's the code I used for the inline view that moved its content after 2 seconds:

```
const RN = require('react-native');
const React = require('react');

export default class InlineView extends React.Component {
  constructor(props, context) {
    super(props, context);
    this.state = { posBottom: false };
  }

  componentDidMount() {
    super.componentDidMount && super.componentDidMount();
    setTimeout(() => { this.setState({ posBottom: true }); }, 2000);
  }

  render() {
    const pos = this.state.posBottom ? 25 : 0;
    const color = this.state.posBottom ? 'pink' : 'green';
    return (
      <RN.View style={{ width: 50, height: 50, backgroundColor: 'steelblue'}}>
        <RN.View style={{ width: 25, height: 25, top: pos, left: pos, backgroundColor: color }} />
      </RN.View>
    );
  }
}
```

**Release Notes**

[IOS] [BUGFIX] [Text] - Fix case where content of inline views didn't get relaid out

Adam Comella
Microsoft Corp.
Pull Request resolved: https://github.com/facebook/react-native/pull/21968

Differential Revision: D12873795

Pulled By: shergin

fbshipit-source-id: bbc9f5d3ef25063b0015cec8c4aaf2e41ecd60a8
2018-10-31 16:13:01 -07:00
Rajiv Shah
7a914fcef4 Fix View/Text displayName (#21950)
Summary:
Adds the displayName prop to `View` and `Text` components. Because these now use `React.forwardRef`, they were showing as `Component` instead of their actual names.

Thanks to ljharb for helping to pinpoint the source of the issue!

Fixes #21937
Pull Request resolved: https://github.com/facebook/react-native/pull/21950

Differential Revision: D12827060

Pulled By: TheSavior

fbshipit-source-id: d812cae14d53ad821ab5873e737db63ad1a989e3
2018-10-29 12:42:10 -07:00
Emily Janzer
36507e4a3c Fix issue when inserting text at 0 when maxLength is set
Summary:
1. The user inserts a character ('0') at index 0. Because the range matches 0, 0, predictedText is set to that character that was inserted.
2. In textInputDidChange, it discovers a mismatch between the rendered text ('1234') and predicted text ('0')
3. This triggers textInputShouldChangeTextInRange to be called again with the 'new' text that it thinks was just added ('1234')
4. It goes to insert this text, but runs into the maxLength limit, so it gets truncated and then inserted.

(I'm not totally sure why only happens if maxLength is set - I need to look into that.)

One fix for this is to just get rid of the range check, but that'll regress #18374. I decided to just check and see if the rendered text is empty instead of checking the range where text could be inserted, since that seems like it should properly handle both cases.

Reviewed By: shergin

Differential Revision: D10392176

fbshipit-source-id: 84fb3b6cac9b0aa25b3c1a127d43f9cdc5a1c6a8
2018-10-16 19:44:28 -07:00
BingBing
c1561ab441 iOS: fix the baseline issue when displaying a mixture of different-language characters (#19653)
Summary:
This fixes #19193

Characters of different languages may have different height and different baseline, even with a same font and same font-size. When they mixed together, iOS will adjust their baselines automatically, to display a suitable view of text.

The problem is the behavior of dealing with the text-style property 'lineHeight'.

It once to be a right way at version 0.52.3, to setting a base-line-offset attribute for the whole range of the string. However, in current version, it enumerated the string, and set a different  base-line-offset for different font-height characters.

And this behavior broke the baseline adjustment made by the iOS. It just make every character's baseline aligned to a same line. But it is not supposed to displaying characters of different languages like that. Chinese characters' baseline is the bottom of each, however, it is not for English characters.

So maybe it is the better way to give a same value of base-line-offset attribute for the whole string. And this PR just did that: found the biggest value of font-height in the text, and calculate the offset with that biggest value, then set to the whole string. This will keep the origin baseline adjustment for different languages' chars made by iOS.

Since I always got an error when running the snapshot test locally, I can't even pass the them with the unmodified code in master branch.

The error is "Nesting of \<View\> within \<Text\> is not currently supported."

After I comment all of the check of that error from the source code, I got a different snapshot from the reference ones. It seems that all components which will cause that error are not rendered in the reference images.

Since this PR changed the behavior of 'lineHeight' property, it's better to add a new snapshot case for the situation of different-language-characters' mixture. So maybe somebody could help me with that or maybe it should be a issue?

[IOS] [BUGFIX] [Text] - fix the baseline issue when displaying a mixture of different-language characters
Pull Request resolved: https://github.com/facebook/react-native/pull/19653

Differential Revision: D10140131

Pulled By: shergin

fbshipit-source-id: 646a9c4046d497b78a980d82a015168cf940646b
2018-10-01 21:19:40 -07:00
Thomas Carlson
d6f3d37802 Rename and move ViewStylePropTypes (#21415)
Summary:
Related to #21342
* Renamed ViewStyleProps to DeprecatedViewStyleProps.
* Moved propType declaration to `react-native/Libraries/DeprecatedPropTypes`
*  ImageProps.js: moved propType declarations to DeprecatedImageProps.js.
Pull Request resolved: https://github.com/facebook/react-native/pull/21415

Reviewed By: TheSavior

Differential Revision: D10119599

Pulled By: RSNara

fbshipit-source-id: 67674039a88dcd570973c7062f86ebdbd6987d28
2018-10-01 12:19:15 -07:00
nd-02110114
84f18341aa Move ImageSourcePropType.js, ImageStylePropTypes.js, TextPropTypes.js (#21387)
Summary:
related #21342

TODO
* move ImageSourcePropType.js, ImageStylePropTypes.js, TextPropTypes.js
* fix flow error

CheckList
 - [x] `yarn prettier`
 - [x] `yarn flow-check-android`
 - [x] `yarn flow-check-ios`

All flow checks pass.

[GENERAL] [ENHANCEMENT] [DeprecatedImageSourcePropType.js] - Created.
[GENERAL] [ENHANCEMENT] [DeprecatedImageStylePropTypes.js] - Created.
[GENERAL] [ENHANCEMENT] [DeprecatedTextPropTypes.js] - Created.
Pull Request resolved: https://github.com/facebook/react-native/pull/21387

Reviewed By: TheSavior

Differential Revision: D10099753

Pulled By: RSNara

fbshipit-source-id: c907af6d1549ee42de1a2e17f278998e8422110f
2018-09-28 23:21:38 -07:00
Dani
d8b40cc541 Move and rename StyleSheetPropType to DeprecatedStyleSheetPropType (#21380)
Summary:
This PR moves and renames all references of StyleSheetPropType  to DeprecatedStyleSheetPropType
Related to #21342
Pull Request resolved: https://github.com/facebook/react-native/pull/21380

Differential Revision: D10098216

Pulled By: TheSavior

fbshipit-source-id: da8d927f87bd37cdabc315e0aa17b6ae208f7124
2018-09-27 23:04:20 -07:00
nd-02110114
c18458b394 Move and Rename custom propType definitions in ColorPropTypes (#21371)
Summary:
related #21342

TODO
* move ColorPropType.js
* fix flow error

CheckList
 - [x] `yarn prettier`
 - [x] `yarn flow-check-android`
 - [x] `yarn flow-check-ios`

All flow checks pass.

[GENERAL] [ENHANCEMENT] [DeprecatedColorPropType.js] - Created.
Pull Request resolved: https://github.com/facebook/react-native/pull/21371

Reviewed By: RSNara

Differential Revision: D10087818

Pulled By: TheSavior

fbshipit-source-id: 48088b441699886eef1fff3aafc2ca6015455006
2018-09-27 17:33:40 -07:00
Andrew Chen (Eng)
aac7c4d5d2 Refactor UIManager view manager accesses
Summary: Replaced each view manager access with a getViewManager() function call. This will later be used to lazily load view manager classes by allowing java to avoid sending the entire list of view managers to JS.

Reviewed By: QueryConnectionException

Differential Revision: D9695788

fbshipit-source-id: 949858aa2f0b0b00b68e260461ba8f1d085cf07f
2018-09-27 16:03:22 -07:00
danibonilha
f68b0c9d79 Split EdgeInsets in DeprecatedPropTypes and flow types (#21351)
Summary:
This PR splits EdgeInsetsPropTypes into EdgeInsetsPropTypes with only flow types and DeprecatedEdgeInsetsPropTypes inside DeprecatedProptypes with only PropTypes.

Related to #21342
Pull Request resolved: https://github.com/facebook/react-native/pull/21351

Reviewed By: RSNara

Differential Revision: D10081512

Pulled By: TheSavior

fbshipit-source-id: 267a6fbb455e02dd7f2b0f3b59790e96387eaa09
2018-09-27 11:02:13 -07:00
Janic Duplessis
2191eecf54 Fix InputAccessoryView safe area when not attached to a TextInput (#21179)
Summary:
When using an InputAccessoryView attached to a TextInput the safe area insets are not applied properly. This uses different autolayout constraints that works in all cases I tested, roughly based on the technique used here https://github.com/stockx/SafeAreaInputAccessoryViewWrapperView/blob/master/SafeAreaInputAccessoryViewWrapperView/Classes/SafeAreaInputAccessoryViewWrapperView.swift#L38.
Pull Request resolved: https://github.com/facebook/react-native/pull/21179

Differential Revision: D9928503

Pulled By: hramos

fbshipit-source-id: b1b623334558093042fd94ac85e1b52dd16aa1a0
2018-09-18 18:31:51 -07:00
Héctor Ramos
1151c096da Update copyright headers to yearless format
Summary: This change drops the year from the copyright headers and the LICENSE file.

Reviewed By: yungsters

Differential Revision: D9727774

fbshipit-source-id: df4fc1e4390733fe774b1a160dd41b4a3d83302a
2018-09-11 15:33:07 -07:00
magicien
2307ea60d0 Fix #18272 TextInput.setNativeProps({text: ''}) to work (#18278)
Summary:
Fix #18272. Calling textInputRef.setNativeProps({text: ''}) or textInputRef.clear() should clear the text input.

- All tests of `yarn run test` are passed
- Test with [the sample app](https://github.com/magicien/react-native-textinput-clear).
    - TextInput.clear() and TextInput.setNativeProps({ text: '***' }) worked
    - When clear() or setNativeProps() called, onChange/onChangeText wasn't called
        - Same behavior as react 0.53.0
    - When non-string values are given to `setNativeProps({text: ___})`, its behavior is the same as react 0.53.0.
        - Value Type | Result
          ---------- | ------------
          null       | same as empty string ''
          undefined  | nothing changes
          number     | throw error
          function   | throw error
          object     | throw error
    - When clear() or setNativeProps() called, attributed text keeps the attributes
    - When `value` prop is set, the text can't be changed

- `clear()` doesn't work from the second time
- `setNativeProps({text '***'})` doesn't work from the second time
- Even when `value` prop is set, you can change the text

![ScreenShot_0.54.0](https://raw.githubusercontent.com/magicien/react-native-textinput-clear/master/screenshot/0.54.0_test.gif)

- `clear()` works every time
- `setNativeProps({text '****'})` works every time

![ScreenShot_Clear_1](https://raw.githubusercontent.com/magicien/react-native-textinput-clear/master/screenshot/clear_test_1.gif)

![ScreenShot_Clear_2](https://raw.githubusercontent.com/magicien/react-native-textinput-clear/master/screenshot/clear_test_2.gif)

- The text keeps the attributes (font family, size, color, text align)

![ScreenShot_Slider](https://raw.githubusercontent.com/magicien/react-native-textinput-clear/master/screenshot/attributed_text_test.gif)

- If `value` prop is set, the text should not be changed

![ScreenShot_Value](https://raw.githubusercontent.com/magicien/react-native-textinput-clear/master/screenshot/value_test.gif)

[IOS] [BUGFIX] [TextInput] - Fix TextInput.clear() and TextInput.setNativeProps({text: ''}) to work
Pull Request resolved: https://github.com/facebook/react-native/pull/18278

Reviewed By: shergin

Differential Revision: D9692561

Pulled By: hramos

fbshipit-source-id: b7ce8f6740fdf666e71d6a85743331ca4805edcb
2018-09-10 17:49:27 -07:00
Tim Yung
5023b105e4 JS: Switch to nullthrows Package [1/4]
Summary:
Switches to the `nullthrows` package instead of using `fbjs/lib/nullthrows`.

The version of `nullthrows` in `fbjs` is outdated and already missing features that exist in the standalone `nullthrows` package.

Also, this mitigates the inevitable collision between `nullthrows` (as a Haste module) and `nullthrows` (as a `node_modules` dependency).

Reviewed By: zertosh

Differential Revision: D9733178

fbshipit-source-id: 1b589d48c1ed57cebf2088b796ad72e212534c0a
2018-09-10 01:46:48 -07:00
Adam Comella
01d5eff425 iOS: Add a maxFontSizeMultiplier prop to <Text> and <TextInput> (#20915)
Summary:
**Motivation**

Whenever a user changes the system font size to its maximum allowable setting, React Native apps that allow font scaling can become unusable because the text gets too big. Experimenting with a native app like iMessage on iOS, the font size used for non-body text (e.g. header, navigational elements) is capped while the body text (e.g. text in the message bubbles) is allowed to grow.

This PR introduces a new prop on `<Text>` and `<TextInput>` called `maxFontSizeMultiplier`. This enables devs to set the maximum allowed text scale factor on a Text/TextInput. The default is 0 which means no limit.

Another PR will add this feature to Android.

**Test Plan**

I created a test app which utilizes all categories of values of `maxFontSizeMultiplier`:
  - `undefined`: inherit from parent
  - `0`: no limit
  - `1`, `1.2`: fixed limits

I tried this with `Text`, `TextInput` with `value`, and `TextInput` with children. For `Text`, I also verified that nesting works properly (if a child `Text` doesn't specify `maxFontSizeMultiplier`, it inherits it from its parent).

Lastly, we've been using a version of this in Skype for several months.

**Release Notes**

[GENERAL] [ENHANCEMENT] [Text/TextInput] - Added maxFontSizeMultiplier prop to prevent some text from getting unusably large as user increases OS's font scale setting (iOS)

Adam Comella
Microsoft Corp.
Pull Request resolved: https://github.com/facebook/react-native/pull/20915

Differential Revision: D9646739

Pulled By: shergin

fbshipit-source-id: c823f59c1e342c22d6297b88b2cb11c5a1f10310
2018-09-04 17:50:42 -07:00