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
Summary: This change drops the year from the copyright headers and the LICENSE file.
Reviewed By: yungsters
Differential Revision: D9727774
fbshipit-source-id: df4fc1e4390733fe774b1a160dd41b4a3d83302a
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
Summary:
Issue [#2088](https://github.com/facebook/react-native/issues/2088).
The basic desire is to have a declarative mechanism to transform text content to uppercase or lowercase or titlecase ("capitalized").
My test plan involves having added a test-case to the RNTester app within the `<Text>` component area. I then manually verified that the rendered content met my expectation.
Here is the markup that exercises my enhancement:
```
<View>
<Text style={{ textTransform: 'uppercase'}}>
This text should be uppercased.
</Text>
<Text style={{ textTransform: 'lowercase'}}>
This TEXT SHOULD be lowercased.
</Text>
<Text style={{ textTransform: 'capitalize'}}>
This text should be CAPITALIZED.
</Text>
<Text style={{ textTransform: 'capitalize'}}>
Mixed:{' '}
<Text style={{ textTransform: 'uppercase'}}>
uppercase{' '}
</Text>
<Text style={{ textTransform: 'lowercase'}}>
LoWeRcAsE{' '}
</Text>
<Text style={{ textTransform: 'capitalize'}}>
capitalize each word
</Text>
</Text>
</View>
```
And here is a screenshot of the result:
[Website Documentation PR](https://github.com/facebook/react-native-website/pull/254)
https://github.com/facebook/react-native-website/pull/254
[IOS] [ENHANCEMENT] [Text] - added textTransform style property enabling declarative casing transformations
Closes https://github.com/facebook/react-native/pull/18387
Differential Revision: D7583315
Pulled By: shergin
fbshipit-source-id: a5d22aea2aa4f494b7b25a055abe64799ccbaa79
Summary:
Includes React Native and its dependencies Fresco, Metro, and Yoga. Excludes samples/examples/docs.
find: ^(?:( *)|( *(?:[\*~#]|::))( )? *)?Copyright (?:\(c\) )?(\d{4})\b.+Facebook[\s\S]+?BSD[\s\S]+?(?:this source tree|the same directory)\.$
replace: $1$2$3Copyright (c) $4-present, Facebook, Inc.\n$2\n$1$2$3This source code is licensed under the MIT license found in the\n$1$2$3LICENSE file in the root directory of this source tree.
Reviewed By: TheSavior, yungsters
Differential Revision: D7007050
fbshipit-source-id: 37dd6bf0ffec0923bfc99c260bb330683f35553e
Summary:
This is a complete rewrite of RCTText, the part of React Native which manages Text and TextInput components.
Key points:
* It's understandable now. It follows a simple architectural pattern, and it's easy to debug and iterate. Text flow layout is a first-class citizen in React Native layout system now, not just a wired special case. It also brings entirely new possibilities such as nested interleaving <Text> and <View> components.
* All <Text>-specific APIs were removed from UIManager and co (it's about ~16 public methods which were used exclusively only by <Text>).
* It relies on new Yoga measurement/cloning API and on-dirty handler. So, it removes built-in dirty propagation subsystem from RN completely.
* It caches string fragments properly and granularly on a per-node basis which makes updating text-containing components more performant.
* It does not instantiate UIView for virtual components which reduces memory utilization.
* It drastically improves <TextInput> capabilities (e.g. rich text inside single line <TextInput> is now supported).
Screenshots:
https://cl.ly/2j3r1V0L0324https://cl.ly/3N2V3C3d3q3R
Reviewed By: mmmulani
Differential Revision: D6617326
fbshipit-source-id: 35d4d81b35c9870e9557d0211c0e934e6072a41e
