Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
wants to merge 6 commits into from

Conversation

bang9
Copy link
Contributor

@bang9 bang9 commented Mar 30, 2021

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

[iOS] [Added] - Line break strategy for Text and TextInput components

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.

@facebook-github-bot facebook-github-bot added the CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. label Mar 30, 2021
@bang9 bang9 force-pushed the feature/line-break-strategy-ios branch from 7d77744 to 29dc411 Compare March 30, 2021 09:24
@analysis-bot
Copy link

analysis-bot commented Mar 30, 2021

Platform Engine Arch Size (bytes) Diff
ios - universal n/a --

Base commit: 68f3fb2
Branch: main

@bang9 bang9 force-pushed the feature/line-break-strategy-ios branch 3 times, most recently from 67a0cee to 635d68b Compare March 30, 2021 13:19
@bang9 bang9 changed the title feat: added line break strategy attribute and example feat: added line break strategy attribute and example for Text/TextInput on iOS Apr 4, 2021
@bang9 bang9 changed the title feat: added line break strategy attribute and example for Text/TextInput on iOS feat: added lineBreakStrategy attribute and example for Text/TextInput on iOS Apr 4, 2021
@analysis-bot
Copy link

analysis-bot commented Apr 20, 2021

Platform Engine Arch Size (bytes) Diff
android hermes arm64-v8a 7,777,759 +1,134
android hermes armeabi-v7a 7,179,022 +1,398
android hermes x86 8,090,861 +1,228
android hermes x86_64 8,062,978 +1,654
android jsc arm64-v8a 9,637,715 +1,208
android jsc armeabi-v7a 8,402,284 +1,487
android jsc x86 9,587,009 +1,312
android jsc x86_64 10,180,606 +1,742

Base commit: 7f1729a
Branch: main

@bang9 bang9 changed the title feat: added lineBreakStrategy attribute and example for Text/TextInput on iOS feat(iOS): added lineBreakStrategy attribute to Text/TextInput May 28, 2021
@bang9 bang9 force-pushed the feature/line-break-strategy-ios branch from 1450a82 to 86a6704 Compare June 15, 2021 11:51
@bang9 bang9 force-pushed the feature/line-break-strategy-ios branch from 86a6704 to 4a91858 Compare July 23, 2021 01:47
@sota000 sota000 added this to Needs Triage in React Native Pull Requests via automation Jul 27, 2021
@react-native-bot react-native-bot added Platform: iOS iOS applications. Type: Enhancement A new feature or enhancement of an existing feature. labels Oct 1, 2021
@junhoyeo
Copy link

Any updates on this?

@bang9 bang9 force-pushed the feature/line-break-strategy-ios branch from 66d2ce9 to c725c30 Compare February 9, 2022 13:42
@bang9
Copy link
Contributor Author

bang9 commented Feb 12, 2022

Hi @lunaleaps , Is there anything else I can do help for this PR get merged?

@bang9 bang9 force-pushed the feature/line-break-strategy-ios branch from c725c30 to 7df6975 Compare September 26, 2022 05:31
@github-actions
Copy link

github-actions bot commented Sep 26, 2022

Warnings
⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L60 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 60 – Inline style: { direction: "isRTL ? 'rtl' : 'ltr'" } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L66 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 66 – Inline style: { textAlign: 'left' } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L70 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 70 – Inline style: { textAlign: 'center' } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L74 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 74 – Inline style: { textAlign: 'right' } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L78 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 78 – Inline style: { textAlign: 'justify' } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L95 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 95 – Inline style: { fontWeight: '500', color: '#527fe4' } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L138 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 138 – Inline style: { backgroundColor: '#ffaaaa', marginTop: 5 } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L143 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 143 – Inline style: { backgroundColor: '#aaaaff', marginTop: 5 } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L208 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 208 – Inline style: { fontSize: 36, marginVertical: 6 } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L214 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 214 – Inline style: { fontSize: 40, marginVertical: 6 } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L221 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 221 – Inline style: { fontSize: 30, marginVertical: 6 } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L228 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 228 – Inline style: { fontSize: 20, marginVertical: 6 } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L236 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 236 – Inline style: { fontSize: 20, marginVertical: 6, maxHeight: 50 } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L245 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 245 – Inline style: { marginVertical: 6 } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L246 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 246 – Inline style: { fontSize: 14 } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L249 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 249 – Inline style: { fontSize: 20 } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L255 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 255 – Inline style: {
flexDirection: 'row',
justifyContent: 'space-around',
marginTop: 5,
marginVertical: 6
} (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L261 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 261 – Inline style: { backgroundColor: '#ffaaaa' } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L264 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 264 – Inline style: { backgroundColor: '#aaaaff' } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L267 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 267 – Inline style: { backgroundColor: '#aaffaa' } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L281 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 281 – Inline style: { backgroundColor: '#eee' } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L288 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 288 – Inline style: { width: 20, height: 20, backgroundColor: 'gray' } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L295 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 295 – Inline style: { flexDirection: 'row', alignItems: 'baseline' } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L302 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 302 – Inline style: { flexDirection: 'row', alignItems: 'baseline' } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L312 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 312 – Inline style: { flexDirection: 'row', alignItems: 'baseline' } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L317 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 317 – Inline style: {
flexDirection: 'row',
alignItems: 'baseline',
backgroundColor: '#eee'
} (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L333 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 333 – Inline style: { flexDirection: 'row', alignItems: 'baseline' } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L338 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 338 – Inline style: { backgroundColor: 'yellow' } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L348 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 348 – Inline style: { flexDirection: 'row', alignItems: 'baseline' } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L350 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 350 – Inline style: { margin: 0, padding: 0 } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L355 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 355 – Inline style: { flexDirection: 'row', alignItems: 'baseline' } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L357 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 357 – Inline style: { margin: 0, padding: 0 } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L423 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 423 – Inline style: { position: 'absolute', width: 5, backgroundColor: 'red' } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L436 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 436 – Inline style: { position: 'absolute', width: 5, backgroundColor: 'green' } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L576 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 576 – Inline style: { backgroundColor: '#20', padding: 10 } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L578 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 578 – Inline style: { backgroundColor: 'red' } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L598 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 598 – Inline style: { backgroundColor: 'red' } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L607 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 607 – Inline style: { padding: 10 } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L618 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 618 – Inline style: { fontFamily: "Platform.isTV ? 'Times' : 'Cochin'" } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L622 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 622 – Inline style: {
fontFamily: "Platform.isTV ? 'Times' : 'Cochin'",
fontWeight: 'bold'
} (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L628 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 628 – Inline style: { fontFamily: 'Helvetica' } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L629 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 629 – Inline style: { fontFamily: 'Helvetica', fontWeight: 'bold' } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L632 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 632 – Inline style: { fontFamily: "Platform.isTV ? 'Courier' : 'Verdana'" } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L636 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 636 – Inline style: {
fontFamily: "Platform.isTV ? 'Courier' : 'Verdana'",
fontWeight: 'bold'
} (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L651 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 651 – Inline style: { fontSize: 23 } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L652 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 652 – Inline style: { fontSize: 8 } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L662 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 662 – Inline style: { color: 'red' } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L663 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 663 – Inline style: { color: 'blue' } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L673 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 673 – Inline style: { fontWeight: 'bold' } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L674 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 674 – Inline style: { fontWeight: 'normal' } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L675 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 675 – Inline style: { fontWeight: '900' } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L676 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 676 – Inline style: { fontWeight: '800' } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L677 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 677 – Inline style: { fontWeight: '700' } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L678 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 678 – Inline style: { fontWeight: '600' } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L679 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 679 – Inline style: { fontWeight: '500' } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L680 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 680 – Inline style: { fontWeight: '400' } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L681 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 681 – Inline style: { fontWeight: '300' } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L682 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 682 – Inline style: { fontWeight: '200' } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L683 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 683 – Inline style: { fontWeight: '100' } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L684 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 684 – Inline style: { fontWeight: 900 } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L685 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 685 – Inline style: { fontWeight: 800 } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L686 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 686 – Inline style: { fontWeight: 700 } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L687 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 687 – Inline style: { fontWeight: 600 } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L688 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 688 – Inline style: { fontWeight: 500 } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L689 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 689 – Inline style: { fontWeight: 400 } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L690 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 690 – Inline style: { fontWeight: 300 } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L691 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 691 – Inline style: { fontWeight: 200 } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L692 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 692 – Inline style: { fontWeight: 100 } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L702 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 702 – Inline style: { fontStyle: 'normal' } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L703 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 703 – Inline style: { fontStyle: 'italic' } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L714 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 714 – Inline style: { fontWeight: 'bold' } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L727 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 727 – Inline style: { textDecorationLine: 'underline', textDecorationStyle: 'solid' } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L734 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 734 – Inline style: {
textDecorationLine: 'underline',
textDecorationStyle: 'double',
textDecorationColor: '#ff0000'
} (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L742 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 742 – Inline style: {
textDecorationLine: 'underline',
textDecorationStyle: 'dashed',
textDecorationColor: '#9CDC40'
} (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L750 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 750 – Inline style: {
textDecorationLine: 'underline',
textDecorationStyle: 'dotted',
textDecorationColor: 'blue'
} (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L757 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 757 – Inline style: { textDecorationLine: 'none' } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L759 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 759 – Inline style: { textDecorationLine: 'line-through', textDecorationStyle: 'solid' } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L766 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 766 – Inline style: {
textDecorationLine: 'line-through',
textDecorationStyle: 'double',
textDecorationColor: '#ff0000'
} (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L774 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 774 – Inline style: {
textDecorationLine: 'line-through',
textDecorationStyle: 'dashed',
textDecorationColor: '#9CDC40'
} (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L782 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 782 – Inline style: {
textDecorationLine: 'line-through',
textDecorationStyle: 'dotted',
textDecorationColor: 'blue'
} (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L789 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 789 – Inline style: { textDecorationLine: 'underline line-through' } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L806 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 806 – Inline style: { fontWeight: 'bold' } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L808 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 808 – Inline style: { fontSize: 11, color: '#527fe4' } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L815 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 815 – Inline style: { opacity: 0.7 } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L819 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 819 – Inline style: { opacity: 0.7 } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L821 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 821 – Inline style: { backgroundColor: '#ffaaaa' } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L830 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 830 – Inline style: { fontSize: 12 } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L848 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 848 – Inline style: { textAlign: 'left' } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L852 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 852 – Inline style: { textAlign: 'center' } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L856 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 856 – Inline style: { textAlign: 'right' } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L860 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 860 – Inline style: { textAlign: 'justify' } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L874 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 874 – Inline style: { letterSpacing: 0 } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L875 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 875 – Inline style: { letterSpacing: 2, marginTop: 5 } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L878 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 878 – Inline style: { letterSpacing: 9, marginTop: 5 } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L881 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 881 – Inline style: { flexDirection: 'row' } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L883 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 883 – Inline style: {
fontSize: 12,
letterSpacing: 2,
backgroundColor: 'fuchsia',
marginTop: 5
} (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L892 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 892 – Inline style: { letterSpacing: -1, marginTop: 5 } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L896 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 896 – Inline style: { letterSpacing: 3, backgroundColor: '#dddddd', marginTop: 5 } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L902 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 902 – Inline style: { letterSpacing: 0, backgroundColor: '#bbbbbb' } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L905 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 905 – Inline style: { letterSpacing: 6, backgroundColor: '#eeeeee' } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L928 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 928 – Inline style: { lineHeight: 35 } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L954 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 954 – Inline style: { backgroundColor: 'yellow' } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L956 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 956 – Inline style: { backgroundColor: '#ffaaaa' } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L959 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 959 – Inline style: { backgroundColor: '#aaaaff' } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L965 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 965 – Inline style: { backgroundColor: '#aaffaa' } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L985 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 985 – Inline style: { marginTop: 20 } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L989 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 989 – Inline style: { marginTop: 20 } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L1006 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 1006 – Inline style: {
backgroundColor: 'white',
textDecorationLine: 'underline',
color: 'blue'
} (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L1032 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 1032 – Inline style: { fontWeight: 'bold' } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L1036 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 1036 – Inline style: { marginTop: 10 } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L1040 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 1040 – Inline style: { marginTop: 20, fontSize: 15 } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L1042 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 1042 – Inline style: { fontSize: 15 } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L1077 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 1077 – Inline style: { fontSize: 20, textShadowRadius: 1, textShadowColor: '#00cccc' } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L1117 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 1117 – Inline style: { fontFamily: "Platform.isTV ? 'Times' : 'Hoefler Text'" } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L1124 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 1124 – Inline style: { fontFamily: "Platform.isTV ? 'Times' : 'Hoefler Text'" } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L1153 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 1153 – Inline style: { borderColor: 'red', borderWidth: 1 } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L1154 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 1154 – Inline style: { borderColor: 'blue', borderWidth: 1 } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L1155 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 1155 – Inline style: { borderColor: 'green', borderWidth: 1 } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L1158 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 1158 – Inline style: { borderColor: 'yellow', borderWidth: 1 } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L1160 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 1160 – Inline style: { borderColor: 'red', borderWidth: 1 } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L1161 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 1161 – Inline style: { borderColor: 'blue', borderWidth: 1 } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L1195 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 1195 – Inline style: { textTransform: 'uppercase' } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L1198 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 1198 – Inline style: { textTransform: 'lowercase' } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L1201 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 1201 – Inline style: { textTransform: 'capitalize' } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L1206 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 1206 – Inline style: { textTransform: 'capitalize' } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L1212 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 1212 – Inline style: { textTransform: 'capitalize' } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L1216 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 1216 – Inline style: { textTransform: 'capitalize' } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L1217 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 1217 – Inline style: { textTransform: 'uppercase' } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L1218 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 1218 – Inline style: { textTransform: 'lowercase' } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L1219 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 1219 – Inline style: { textTransform: 'capitalize' } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L1225 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 1225 – Inline style: { textTransform: 'uppercase' } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L1231 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 1231 – Inline style: { textTransform: 'uppercase' } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L1232 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 1232 – Inline style: { textTransform: 'none' } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L1244 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 1244 – Inline style: { userSelect: 'auto' } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L1264 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 1264 – Inline style: { marginBottom: 12 } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L1266 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 1266 – Inline style: { backgroundColor: 'lightgrey' } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/Text/TextExample.ios.js#L1272 - packages/rn-tester/js/examples/Text/TextExample.ios.js line 1272 – Inline style: { fontWeight: 'bold' } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/TextInput/TextInputExample.ios.js#L66 - packages/rn-tester/js/examples/TextInput/TextInputExample.ios.js line 66 – Inline style: { backgroundColor: 'white' } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/TextInput/TextInputExample.ios.js#L110 - packages/rn-tester/js/examples/TextInput/TextInputExample.ios.js line 110 – Inline style: { backgroundColor: 'white' } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/TextInput/TextInputExample.ios.js#L185 - packages/rn-tester/js/examples/TextInput/TextInputExample.ios.js line 185 – Inline style: { flex: 1, flexDirection: 'row' } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/TextInput/TextInputExample.ios.js#L200 - packages/rn-tester/js/examples/TextInput/TextInputExample.ios.js line 200 – Inline style: { marginLeft: 4 } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/TextInput/TextInputExample.ios.js#L381 - packages/rn-tester/js/examples/TextInput/TextInputExample.ios.js line 381 – Inline style: { color: 'red' } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/TextInput/TextInputExample.ios.js#L391 - packages/rn-tester/js/examples/TextInput/TextInputExample.ios.js line 391 – Inline style: { color: 'red' } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/TextInput/TextInputExample.ios.js#L466 - packages/rn-tester/js/examples/TextInput/TextInputExample.ios.js line 466 – Inline style: { color: 'blue' } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/TextInput/TextInputExample.ios.js#L470 - packages/rn-tester/js/examples/TextInput/TextInputExample.ios.js line 470 – Inline style: { color: 'green' } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/TextInput/TextInputExample.ios.js#L659 - packages/rn-tester/js/examples/TextInput/TextInputExample.ios.js line 659 – Inline style: { height: 80 } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/TextInput/TextInputExample.ios.js#L661 - packages/rn-tester/js/examples/TextInput/TextInputExample.ios.js line 661 – Inline style: {
position: 'absolute',
fontSize: 16,
backgroundColor: '#eeeeee',
borderColor: '#666666',
borderWidth: 5,
borderTopWidth: 20,
borderRadius: 10,
borderBottomRightRadius: 20,
padding: 10,
paddingTop: 20
} (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/TextInput/TextInputExample.ios.js#L678 - packages/rn-tester/js/examples/TextInput/TextInputExample.ios.js line 678 – Inline style: { height: 130 } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/TextInput/TextInputExample.ios.js#L680 - packages/rn-tester/js/examples/TextInput/TextInputExample.ios.js line 680 – Inline style: {
position: 'absolute',
fontSize: 16,
backgroundColor: '#eeeeee',
borderColor: '#666666',
borderWidth: 5,
borderTopWidth: 20,
borderRadius: 10,
borderBottomRightRadius: 20,
padding: 10,
paddingTop: 20,
maxHeight: 100
} (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/TextInput/TextInputExample.ios.js#L700 - packages/rn-tester/js/examples/TextInput/TextInputExample.ios.js line 700 – Inline style: {
fontSize: 16,
backgroundColor: '#eeeeee',
borderColor: '#666666',
borderWidth: 5,
borderTopWidth: 20,
borderRadius: 10,
borderBottomRightRadius: 20,
padding: 10,
paddingTop: 20
} (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/TextInput/TextInputExample.ios.js#L746 - packages/rn-tester/js/examples/TextInput/TextInputExample.ios.js line 746 – Inline style: {
maxHeight: 400,
minHeight: 20,
paddingTop: 0,
backgroundColor: '#eeeeee',
color: 'blue'
} (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/TextInput/TextInputExample.ios.js#L753 - packages/rn-tester/js/examples/TextInput/TextInputExample.ios.js line 753 – Inline style: { fontSize: 30, color: 'green' } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/TextInput/TextInputExample.ios.js#L755 - packages/rn-tester/js/examples/TextInput/TextInputExample.ios.js line 755 – Inline style: { fontSize: 6, color: 'red' } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/TextInput/TextInputExample.ios.js#L759 - packages/rn-tester/js/examples/TextInput/TextInputExample.ios.js line 759 – Inline style: { fontSize: 30, color: 'green' } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/TextInput/TextInputExample.ios.js#L879 - packages/rn-tester/js/examples/TextInput/TextInputExample.ios.js line 879 – Inline style: { marginBottom: 12 } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/TextInput/TextInputExample.ios.js#L881 - packages/rn-tester/js/examples/TextInput/TextInputExample.ios.js line 881 – Inline style: { backgroundColor: 'lightgrey' } (react-native/no-inline-styles)

⚠️

packages/rn-tester/js/examples/TextInput/TextInputExample.ios.js#L887 - packages/rn-tester/js/examples/TextInput/TextInputExample.ios.js line 887 – Inline style: { fontWeight: 'bold' } (react-native/no-inline-styles)

Generated by 🚫 dangerJS against 5fe3fa1

@lunaleaps
Copy link
Contributor

Sorry for the delayed reply here, let me import and ask around. I think my concern might be that prop name and the iOS specificity of it.

@facebook-github-bot
Copy link
Contributor

@lunaleaps has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator.

@bang9
Copy link
Contributor Author

bang9 commented Sep 27, 2022

Sorry for the delayed reply here, let me import and ask around. I think my concern might be that prop name and the iOS specificity of it.

Hi @lunaleaps, thanks for the reply!
I followed the prop naming for a specific platform added at that time.

e.g. https://reactnative.dev/docs/0.69/text#android_hyphenationfrequency-android
https://reactnative.dev/docs/0.69/pressable#android_ripple-android

Please let me know if need to change the prop name, thanks!

Copy link
Contributor

@lunaleaps lunaleaps left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks @bang9 for these changes!

Is it also possible to run the linter on this? I believe yarn run clang-format might be it?

Thanks!

Libraries/Components/TextInput/RCTTextInputViewConfig.js Outdated Show resolved Hide resolved
React/Base/RCTConvert.m Outdated Show resolved Hide resolved
React/Base/RCTConvert.m Outdated Show resolved Hide resolved
Libraries/Text/RCTTextAttributes.m Outdated Show resolved Hide resolved
@bang9
Copy link
Contributor Author

bang9 commented Sep 29, 2022

Thanks @bang9 for these changes!

Is it also possible to run the linter on this? I believe yarn run clang-format might be it?

Thanks!

@lunaleaps Is it okay to commit? I ran the yarn run clang-format and got the 96 file changes... 👀

@bang9 bang9 requested a review from lunaleaps October 5, 2022 07:00
@lunaleaps
Copy link
Contributor

lunaleaps commented Oct 5, 2022

Thanks @bang9 for these changes!
Is it also possible to run the linter on this? I believe yarn run clang-format might be it?
Thanks!

@lunaleaps Is it okay to commit? I ran the yarn run clang-format and got the 96 file changes... 👀

Strange.. that's good to know! I can run our internal formatter then, thanks for letting me know

@facebook-github-bot
Copy link
Contributor

@lunaleaps has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator.

@bang9 bang9 requested review from javache and removed request for lunaleaps October 8, 2022 03:13
@bang9 bang9 requested a review from lunaleaps October 11, 2022 04:24
@bang9 bang9 force-pushed the feature/line-break-strategy-ios branch from 5a1939b to 5fe3fa1 Compare October 14, 2022 00:59
@facebook-github-bot
Copy link
Contributor

@lunaleaps has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator.

React Native Pull Requests automation moved this from Needs Triage to Closed Oct 17, 2022
@react-native-bot
Copy link
Collaborator

This pull request was successfully merged by @bang9 in 0481948.

When will my fix make it into a release? | Upcoming Releases

@react-native-bot react-native-bot added the Merged This PR has been merged. label Oct 17, 2022
@bang9 bang9 deleted the feature/line-break-strategy-ios branch October 30, 2022 03:03
@BasixKOR
Copy link

BasixKOR commented Jan 9, 2023

Hello, is there any plan to backport this into previous versions? For CJK users this feels like a crucial feature to have.

OlimpiaZurek pushed a commit to OlimpiaZurek/react-native that referenced this pull request May 22, 2023
…ook#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: facebook#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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. Merged This PR has been merged. Platform: iOS iOS applications. Type: Enhancement A new feature or enhancement of an existing feature.
Projects
No open projects
Development

Successfully merging this pull request may close these issues.

None yet

8 participants