feat(iOS): added lineBreakStrategy attribute to Text/TextInput (#31272)

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
This commit is contained in:
bang9
2022-10-17 13:14:17 -07:00
committed by Facebook GitHub Bot
parent a0ee6fae5e
commit 048194849b
19 changed files with 242 additions and 1 deletions
@@ -862,4 +862,43 @@ exports.examples = ([
);
},
},
{
title: 'Line Break Strategy',
render: function (): React.Node {
const lineBreakStrategy = ['none', 'standard', 'hangul-word', 'push-out'];
const textByCode = {
en: 'lineBreakStrategy lineBreakStrategy lineBreakStrategy lineBreakStrategy',
ko: '한글개행한글개행 한글개행한글개행 한글개행한글개행 한글개행한글개행 한글개행한글개행 한글개행한글개행',
ja: 'かいぎょう かいぎょう かいぎょう かいぎょう かいぎょう かいぎょう',
cn: '改行 改行 改行 改行 改行 改行 改行 改行 改行 改行 改行 改行',
};
return (
<View>
{lineBreakStrategy.map(strategy => {
return (
<View key={strategy} style={{marginBottom: 12}}>
<Text
style={{
backgroundColor: 'lightgrey',
}}>{`Strategy: ${strategy}`}</Text>
{Object.keys(textByCode).map(code => {
return (
<View key={code}>
<Text style={{fontWeight: 'bold'}}>{`[${code}]`}</Text>
<TextInput
multiline
lineBreakStrategyIOS={strategy}
style={styles.default}
defaultValue={textByCode[code]}
/>
</View>
);
})}
</View>
);
})}
</View>
);
},
},
]: Array<RNTesterModuleExample>);