feat: Add support for verticalAlign style

[gabrieldonadel]

Summary

This adds support for the verticalAlign style attribute, mapping the already existing textAlignVertical attribute as requested on #34425. This PR also updates the TextExample.android on the RNTester in order to facilitate the manual QA of this.

Changelog

[Android] [Added] - Add support for verticalAlign style

Test Plan

1. On Android open the RNTester app and navigate to the Text page
2. Check the text alignment through the Text alignment section

Screen.Recording.2022-09-02.at.00.16.12.mov

[analysis-bot]

Platform	Engine	Arch	Size (bytes)	Diff
android	hermes	arm64-v8a	7,740,289	+226
android	hermes	armeabi-v7a	7,143,702	+223
android	hermes	x86	8,050,310	+226
android	hermes	x86_64	8,023,156	+232
android	jsc	arm64-v8a	9,608,439	+255
android	jsc	armeabi-v7a	8,374,631	+256
android	jsc	x86	9,555,008	+255
android	jsc	x86_64	10,148,636	+260

Base commit: 2319f75
Branch: main

[analysis-bot]

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

Base commit: 2319f75
Branch: main

[necolas]

Sorry, this needs someone from Meta to import the PR

[gabrieldonadel]

@cipolleschi@cortinico would you mind importing this?

[facebook-github-bot]

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

[cipolleschi]

Sorry, I missed it! But now it has been imported.

[cipolleschi]

Hi @gabrieldonadel, thanks for all your work with these PRs. We recently started to maintain the TypeScript types and it looks like that this PR touches the Flow types in the StyleSheetTypes.js. Could you update also the TypeScript definitions in this file?

[gabrieldonadel]

Hi @gabrieldonadel, thanks for all your work with these PRs. We recently started to maintain the TypeScript types and it looks like that this PR touches the Flow types in the StyleSheetTypes.js. Could you update also the TypeScript definitions in this file?

Hi @cipolleschi, thanks for reviewing this, I've just pushed a commit updating TS types

[github-actions]

	Warnings
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L26 - packages/rn-tester/js/examples/Text/TextExample.android.js line 26 – Inline style: { fontWeight: 'bold', color: '#527fe4' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L134 - packages/rn-tester/js/examples/Text/TextExample.android.js line 134 – Inline style: { fontSize: 36, marginVertical: 6 } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L140 - packages/rn-tester/js/examples/Text/TextExample.android.js line 140 – Inline style: { fontSize: 40, marginVertical: 6 } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L147 - packages/rn-tester/js/examples/Text/TextExample.android.js line 147 – Inline style: { fontSize: 30, marginVertical: 6 } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L155 - packages/rn-tester/js/examples/Text/TextExample.android.js line 155 – Inline style: { fontSize: 20, marginVertical: 6 } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L163 - packages/rn-tester/js/examples/Text/TextExample.android.js line 163 – Inline style: { fontSize: 20, marginVertical: 6, maxHeight: 50 } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L172 - packages/rn-tester/js/examples/Text/TextExample.android.js line 172 – Inline style: { marginVertical: 6 } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L173 - packages/rn-tester/js/examples/Text/TextExample.android.js line 173 – Inline style: { fontSize: 14 } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L176 - packages/rn-tester/js/examples/Text/TextExample.android.js line 176 – Inline style: { fontSize: 20 } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L182 - packages/rn-tester/js/examples/Text/TextExample.android.js line 182 – Inline style: { flexDirection: 'row', justifyContent: 'space-around', marginTop: 5, marginVertical: 6 } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L188 - packages/rn-tester/js/examples/Text/TextExample.android.js line 188 – Inline style: { backgroundColor: '#ffaaaa' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L191 - packages/rn-tester/js/examples/Text/TextExample.android.js line 191 – Inline style: { backgroundColor: '#aaaaff' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L194 - packages/rn-tester/js/examples/Text/TextExample.android.js line 194 – Inline style: { backgroundColor: '#aaffaa' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L221 - packages/rn-tester/js/examples/Text/TextExample.android.js line 221 – Inline style: { color: 'red' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L225 - packages/rn-tester/js/examples/Text/TextExample.android.js line 225 – Inline style: { color: 'red' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L229 - packages/rn-tester/js/examples/Text/TextExample.android.js line 229 – Inline style: { color: 'red' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L234 - packages/rn-tester/js/examples/Text/TextExample.android.js line 234 – Inline style: { padding: 10 } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L242 - packages/rn-tester/js/examples/Text/TextExample.android.js line 242 – Inline style: { fontFamily: 'sans-serif' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L243 - packages/rn-tester/js/examples/Text/TextExample.android.js line 243 – Inline style: { fontFamily: 'sans-serif', fontWeight: 'bold' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L246 - packages/rn-tester/js/examples/Text/TextExample.android.js line 246 – Inline style: { fontFamily: 'serif' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L247 - packages/rn-tester/js/examples/Text/TextExample.android.js line 247 – Inline style: { fontFamily: 'serif', fontWeight: 'bold' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L250 - packages/rn-tester/js/examples/Text/TextExample.android.js line 250 – Inline style: { fontFamily: 'monospace' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L251 - packages/rn-tester/js/examples/Text/TextExample.android.js line 251 – Inline style: { fontFamily: 'monospace', fontWeight: 'bold' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L256 - packages/rn-tester/js/examples/Text/TextExample.android.js line 256 – Inline style: { flexDirection: 'row', alignItems: 'flex-start' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L257 - packages/rn-tester/js/examples/Text/TextExample.android.js line 257 – Inline style: { flex: 1 } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L258 - packages/rn-tester/js/examples/Text/TextExample.android.js line 258 – Inline style: { fontFamily: 'sans-serif' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L259 - packages/rn-tester/js/examples/Text/TextExample.android.js line 259 – Inline style: { fontFamily: 'sans-serif', fontStyle: 'italic' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L262 - packages/rn-tester/js/examples/Text/TextExample.android.js line 262 – Inline style: { fontFamily: 'sans-serif', fontWeight: 'bold' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L266 - packages/rn-tester/js/examples/Text/TextExample.android.js line 266 – Inline style: { fontFamily: 'sans-serif', fontStyle: 'italic', fontWeight: 'bold' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L273 - packages/rn-tester/js/examples/Text/TextExample.android.js line 273 – Inline style: { fontFamily: 'sans-serif-light' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L275 - packages/rn-tester/js/examples/Text/TextExample.android.js line 275 – Inline style: { fontFamily: 'sans-serif-light', fontStyle: 'italic' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L278 - packages/rn-tester/js/examples/Text/TextExample.android.js line 278 – Inline style: { fontFamily: 'sans-serif-thin' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L282 - packages/rn-tester/js/examples/Text/TextExample.android.js line 282 – Inline style: { fontFamily: 'sans-serif-thin', fontStyle: 'italic' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L285 - packages/rn-tester/js/examples/Text/TextExample.android.js line 285 – Inline style: { fontFamily: 'sans-serif-condensed' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L289 - packages/rn-tester/js/examples/Text/TextExample.android.js line 289 – Inline style: { fontFamily: 'sans-serif-condensed', fontStyle: 'italic' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L296 - packages/rn-tester/js/examples/Text/TextExample.android.js line 296 – Inline style: { fontFamily: 'sans-serif-condensed', fontWeight: 'bold' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L303 - packages/rn-tester/js/examples/Text/TextExample.android.js line 303 – Inline style: { fontFamily: 'sans-serif-condensed', fontStyle: 'italic', fontWeight: 'bold' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L310 - packages/rn-tester/js/examples/Text/TextExample.android.js line 310 – Inline style: { fontFamily: 'sans-serif-medium' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L314 - packages/rn-tester/js/examples/Text/TextExample.android.js line 314 – Inline style: { fontFamily: 'sans-serif-medium', fontStyle: 'italic' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L321 - packages/rn-tester/js/examples/Text/TextExample.android.js line 321 – Inline style: { flexDirection: 'row', alignItems: 'flex-start' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L322 - packages/rn-tester/js/examples/Text/TextExample.android.js line 322 – Inline style: { flex: 1 } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L323 - packages/rn-tester/js/examples/Text/TextExample.android.js line 323 – Inline style: { fontFamily: 'notoserif' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L325 - packages/rn-tester/js/examples/Text/TextExample.android.js line 325 – Inline style: { fontFamily: 'notoserif', fontStyle: 'italic', fontWeight: 'bold' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L332 - packages/rn-tester/js/examples/Text/TextExample.android.js line 332 – Inline style: { fontFamily: 'notoserif', fontStyle: 'italic' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L336 - packages/rn-tester/js/examples/Text/TextExample.android.js line 336 – Inline style: { fontFamily: 'Rubik', fontWeight: 'normal' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L343 - packages/rn-tester/js/examples/Text/TextExample.android.js line 343 – Inline style: { fontFamily: 'Rubik', fontWeight: '300' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L350 - packages/rn-tester/js/examples/Text/TextExample.android.js line 350 – Inline style: { fontFamily: 'Rubik', fontWeight: '700' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L357 - packages/rn-tester/js/examples/Text/TextExample.android.js line 357 – Inline style: { fontFamily: 'Rubik', fontWeight: '500' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L364 - packages/rn-tester/js/examples/Text/TextExample.android.js line 364 – Inline style: { fontFamily: 'Rubik', fontStyle: 'italic', fontWeight: '500' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L376 - packages/rn-tester/js/examples/Text/TextExample.android.js line 376 – Inline style: { fontSize: 23 } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L377 - packages/rn-tester/js/examples/Text/TextExample.android.js line 377 – Inline style: { fontSize: 8 } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L380 - packages/rn-tester/js/examples/Text/TextExample.android.js line 380 – Inline style: { color: 'red' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L381 - packages/rn-tester/js/examples/Text/TextExample.android.js line 381 – Inline style: { color: 'blue' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L384 - packages/rn-tester/js/examples/Text/TextExample.android.js line 384 – Inline style: { fontWeight: 'bold' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L385 - packages/rn-tester/js/examples/Text/TextExample.android.js line 385 – Inline style: { fontWeight: 'normal' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L386 - packages/rn-tester/js/examples/Text/TextExample.android.js line 386 – Inline style: { fontWeight: '900' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L387 - packages/rn-tester/js/examples/Text/TextExample.android.js line 387 – Inline style: { fontWeight: '800' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L388 - packages/rn-tester/js/examples/Text/TextExample.android.js line 388 – Inline style: { fontWeight: '700' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L389 - packages/rn-tester/js/examples/Text/TextExample.android.js line 389 – Inline style: { fontWeight: '600' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L390 - packages/rn-tester/js/examples/Text/TextExample.android.js line 390 – Inline style: { fontWeight: '500' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L391 - packages/rn-tester/js/examples/Text/TextExample.android.js line 391 – Inline style: { fontWeight: '400' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L392 - packages/rn-tester/js/examples/Text/TextExample.android.js line 392 – Inline style: { fontWeight: '300' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L393 - packages/rn-tester/js/examples/Text/TextExample.android.js line 393 – Inline style: { fontWeight: '200' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L394 - packages/rn-tester/js/examples/Text/TextExample.android.js line 394 – Inline style: { fontWeight: '100' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L395 - packages/rn-tester/js/examples/Text/TextExample.android.js line 395 – Inline style: { fontWeight: 900 } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L396 - packages/rn-tester/js/examples/Text/TextExample.android.js line 396 – Inline style: { fontWeight: 800 } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L397 - packages/rn-tester/js/examples/Text/TextExample.android.js line 397 – Inline style: { fontWeight: 700 } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L398 - packages/rn-tester/js/examples/Text/TextExample.android.js line 398 – Inline style: { fontWeight: 600 } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L399 - packages/rn-tester/js/examples/Text/TextExample.android.js line 399 – Inline style: { fontWeight: 500 } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L400 - packages/rn-tester/js/examples/Text/TextExample.android.js line 400 – Inline style: { fontWeight: 400 } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L401 - packages/rn-tester/js/examples/Text/TextExample.android.js line 401 – Inline style: { fontWeight: 300 } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L402 - packages/rn-tester/js/examples/Text/TextExample.android.js line 402 – Inline style: { fontWeight: 200 } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L403 - packages/rn-tester/js/examples/Text/TextExample.android.js line 403 – Inline style: { fontWeight: 100 } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L406 - packages/rn-tester/js/examples/Text/TextExample.android.js line 406 – Inline style: { fontStyle: 'italic' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L407 - packages/rn-tester/js/examples/Text/TextExample.android.js line 407 – Inline style: { fontStyle: 'normal' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L410 - packages/rn-tester/js/examples/Text/TextExample.android.js line 410 – Inline style: { fontStyle: 'italic', fontWeight: 'bold' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L415 - packages/rn-tester/js/examples/Text/TextExample.android.js line 415 – Inline style: { textDecorationLine: 'underline' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L416 - packages/rn-tester/js/examples/Text/TextExample.android.js line 416 – Inline style: { textDecorationLine: 'none' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L418 - packages/rn-tester/js/examples/Text/TextExample.android.js line 418 – Inline style: { textDecorationLine: 'line-through', textDecorationStyle: 'solid' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L424 - packages/rn-tester/js/examples/Text/TextExample.android.js line 424 – Inline style: { textDecorationLine: 'underline line-through' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L429 - packages/rn-tester/js/examples/Text/TextExample.android.js line 429 – Inline style: { textDecorationLine: 'underline' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L430 - packages/rn-tester/js/examples/Text/TextExample.android.js line 430 – Inline style: { textDecorationLine: 'line-through' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L439 - packages/rn-tester/js/examples/Text/TextExample.android.js line 439 – Inline style: { color: 'red', fontWeight: 'bold' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L441 - packages/rn-tester/js/examples/Text/TextExample.android.js line 441 – Inline style: { color: 'green', fontWeight: 'normal' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L443 - packages/rn-tester/js/examples/Text/TextExample.android.js line 443 – Inline style: { color: 'blue', fontWeight: 'bold' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L445 - packages/rn-tester/js/examples/Text/TextExample.android.js line 445 – Inline style: { color: 'cyan', fontWeight: 'normal' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L447 - packages/rn-tester/js/examples/Text/TextExample.android.js line 447 – Inline style: { color: 'magenta', fontWeight: 'bold' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L449 - packages/rn-tester/js/examples/Text/TextExample.android.js line 449 – Inline style: { color: 'yellow', fontWeight: 'normal' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L451 - packages/rn-tester/js/examples/Text/TextExample.android.js line 451 – Inline style: { color: 'black', fontWeight: 'bold' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L461 - packages/rn-tester/js/examples/Text/TextExample.android.js line 461 – Inline style: { fontWeight: 'bold' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L465 - packages/rn-tester/js/examples/Text/TextExample.android.js line 465 – Inline style: { fontStyle: 'italic', fontSize: 11, color: '#527fe4' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L469 - packages/rn-tester/js/examples/Text/TextExample.android.js line 469 – Inline style: { fontWeight: 'normal', fontStyle: 'normal' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L480 - packages/rn-tester/js/examples/Text/TextExample.android.js line 480 – Inline style: { fontFamily: 'serif' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L484 - packages/rn-tester/js/examples/Text/TextExample.android.js line 484 – Inline style: { fontStyle: 'italic', fontWeight: 'bold' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L488 - packages/rn-tester/js/examples/Text/TextExample.android.js line 488 – Inline style: { fontFamily: 'monospace', fontStyle: 'normal', fontWeight: 'normal' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L496 - packages/rn-tester/js/examples/Text/TextExample.android.js line 496 – Inline style: { fontFamily: 'sans-serif', fontWeight: 'bold' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L500 - packages/rn-tester/js/examples/Text/TextExample.android.js line 500 – Inline style: { fontWeight: 'normal' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L512 - packages/rn-tester/js/examples/Text/TextExample.android.js line 512 – Inline style: { fontSize: 12 } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L515 - packages/rn-tester/js/examples/Text/TextExample.android.js line 515 – Inline style: { fontSize: 8 } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L517 - packages/rn-tester/js/examples/Text/TextExample.android.js line 517 – Inline style: { fontSize: 23 } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L520 - packages/rn-tester/js/examples/Text/TextExample.android.js line 520 – Inline style: { color: 'red' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L522 - packages/rn-tester/js/examples/Text/TextExample.android.js line 522 – Inline style: { color: 'blue' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L529 - packages/rn-tester/js/examples/Text/TextExample.android.js line 529 – Inline style: { textAlign: 'left' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L533 - packages/rn-tester/js/examples/Text/TextExample.android.js line 533 – Inline style: { textAlign: 'center' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L537 - packages/rn-tester/js/examples/Text/TextExample.android.js line 537 – Inline style: { textAlign: 'right' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L541 - packages/rn-tester/js/examples/Text/TextExample.android.js line 541 – Inline style: { textAlign: 'justify' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L550 - packages/rn-tester/js/examples/Text/TextExample.android.js line 550 – Inline style: { flexDirection: 'row' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L551 - packages/rn-tester/js/examples/Text/TextExample.android.js line 551 – Inline style: { backgroundColor: 'red' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L556 - packages/rn-tester/js/examples/Text/TextExample.android.js line 556 – Inline style: { backgroundColor: 'red' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L560 - packages/rn-tester/js/examples/Text/TextExample.android.js line 560 – Inline style: { alignItems: 'center' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L561 - packages/rn-tester/js/examples/Text/TextExample.android.js line 561 – Inline style: { backgroundColor: 'red' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L566 - packages/rn-tester/js/examples/Text/TextExample.android.js line 566 – Inline style: { backgroundColor: 'red' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L578 - packages/rn-tester/js/examples/Text/TextExample.android.js line 578 – Inline style: { lineHeight: 35 } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L580 - packages/rn-tester/js/examples/Text/TextExample.android.js line 580 – Inline style: { fontSize: 20 } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L586 - packages/rn-tester/js/examples/Text/TextExample.android.js line 586 – Inline style: { letterSpacing: 0 } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L587 - packages/rn-tester/js/examples/Text/TextExample.android.js line 587 – Inline style: { letterSpacing: 2, marginTop: 5 } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L590 - packages/rn-tester/js/examples/Text/TextExample.android.js line 590 – Inline style: { letterSpacing: 9, marginTop: 5 } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L593 - packages/rn-tester/js/examples/Text/TextExample.android.js line 593 – Inline style: { flexDirection: 'row' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L595 - packages/rn-tester/js/examples/Text/TextExample.android.js line 595 – Inline style: { fontSize: 12, letterSpacing: 2, backgroundColor: 'fuchsia', marginTop: 5 } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L604 - packages/rn-tester/js/examples/Text/TextExample.android.js line 604 – Inline style: { letterSpacing: -1, marginTop: 5 } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L608 - packages/rn-tester/js/examples/Text/TextExample.android.js line 608 – Inline style: { letterSpacing: 3, backgroundColor: '#dddddd', marginTop: 5 } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L614 - packages/rn-tester/js/examples/Text/TextExample.android.js line 614 – Inline style: { letterSpacing: 0, backgroundColor: '#bbbbbb' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L617 - packages/rn-tester/js/examples/Text/TextExample.android.js line 617 – Inline style: { letterSpacing: 6, backgroundColor: '#eeeeee' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L630 - packages/rn-tester/js/examples/Text/TextExample.android.js line 630 – Inline style: { backgroundColor: '#ffaaaa' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L632 - packages/rn-tester/js/examples/Text/TextExample.android.js line 632 – Inline style: { backgroundColor: '#aaaaff' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L638 - packages/rn-tester/js/examples/Text/TextExample.android.js line 638 – Inline style: { backgroundColor: '#aaffaa' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L645 - packages/rn-tester/js/examples/Text/TextExample.android.js line 645 – Inline style: { backgroundColor: 'rgba(100, 100, 100, 0.3)' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L649 - packages/rn-tester/js/examples/Text/TextExample.android.js line 649 – Inline style: { backgroundColor: 'rgba(100, 100, 100, 0.3)' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L656 - packages/rn-tester/js/examples/Text/TextExample.android.js line 656 – Inline style: { flexDirection: 'row', height: 85 } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L657 - packages/rn-tester/js/examples/Text/TextExample.android.js line 657 – Inline style: { backgroundColor: '#ffaaaa', width: 150 } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L658 - packages/rn-tester/js/examples/Text/TextExample.android.js line 658 – Inline style: { backgroundColor: '#aaaaff', width: 150 } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L660 - packages/rn-tester/js/examples/Text/TextExample.android.js line 660 – Inline style: { top: -80 } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L666 - packages/rn-tester/js/examples/Text/TextExample.android.js line 666 – Inline style: { top: -70, backgroundColor: 'transparent' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L676 - packages/rn-tester/js/examples/Text/TextExample.android.js line 676 – Inline style: { marginTop: 20 } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L680 - packages/rn-tester/js/examples/Text/TextExample.android.js line 680 – Inline style: { marginTop: 20 } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L692 - packages/rn-tester/js/examples/Text/TextExample.android.js line 692 – Inline style: { marginTop: 10 } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L696 - packages/rn-tester/js/examples/Text/TextExample.android.js line 696 – Inline style: { marginTop: 20, fontSize: 15 } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L698 - packages/rn-tester/js/examples/Text/TextExample.android.js line 698 – Inline style: { fontSize: 15 } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L735 - packages/rn-tester/js/examples/Text/TextExample.android.js line 735 – Inline style: { fontSize: 20, textShadowRadius: 1, textShadowColor: '#00cccc' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L761 - packages/rn-tester/js/examples/Text/TextExample.android.js line 761 – Inline style: { fontFamily: 'Roboto' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L768 - packages/rn-tester/js/examples/Text/TextExample.android.js line 768 – Inline style: { fontFamily: 'Roboto' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L787 - packages/rn-tester/js/examples/Text/TextExample.android.js line 787 – Inline style: { flexDirection: 'row', justifyContent: 'space-around', marginBottom: 10 } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L792 - packages/rn-tester/js/examples/Text/TextExample.android.js line 792 – Inline style: { alignItems: 'center' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L796 - packages/rn-tester/js/examples/Text/TextExample.android.js line 796 – Inline style: { alignItems: 'center' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L800 - packages/rn-tester/js/examples/Text/TextExample.android.js line 800 – Inline style: { includeFontPadding: false, marginLeft: 10 } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L814 - packages/rn-tester/js/examples/Text/TextExample.android.js line 814 – Inline style: { textTransform: 'uppercase' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L817 - packages/rn-tester/js/examples/Text/TextExample.android.js line 817 – Inline style: { textTransform: 'lowercase' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L820 - packages/rn-tester/js/examples/Text/TextExample.android.js line 820 – Inline style: { textTransform: 'capitalize' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L825 - packages/rn-tester/js/examples/Text/TextExample.android.js line 825 – Inline style: { textTransform: 'capitalize' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L831 - packages/rn-tester/js/examples/Text/TextExample.android.js line 831 – Inline style: { textTransform: 'capitalize' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L835 - packages/rn-tester/js/examples/Text/TextExample.android.js line 835 – Inline style: { textTransform: 'capitalize' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L836 - packages/rn-tester/js/examples/Text/TextExample.android.js line 836 – Inline style: { textTransform: 'uppercase' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L837 - packages/rn-tester/js/examples/Text/TextExample.android.js line 837 – Inline style: { textTransform: 'lowercase' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L838 - packages/rn-tester/js/examples/Text/TextExample.android.js line 838 – Inline style: { textTransform: 'capitalize' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L844 - packages/rn-tester/js/examples/Text/TextExample.android.js line 844 – Inline style: { textTransform: 'uppercase' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L850 - packages/rn-tester/js/examples/Text/TextExample.android.js line 850 – Inline style: { textTransform: 'uppercase' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L851 - packages/rn-tester/js/examples/Text/TextExample.android.js line 851 – Inline style: { textTransform: 'none' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L854 - packages/rn-tester/js/examples/Text/TextExample.android.js line 854 – Inline style: { textTransform: 'none' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L859 - packages/rn-tester/js/examples/Text/TextExample.android.js line 859 – Inline style: { textTransform: 'uppercase' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L864 - packages/rn-tester/js/examples/Text/TextExample.android.js line 864 – Inline style: { textTransform: 'lowercase' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L869 - packages/rn-tester/js/examples/Text/TextExample.android.js line 869 – Inline style: { textTransform: 'capitalize' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L875 - packages/rn-tester/js/examples/Text/TextExample.android.js line 875 – Inline style: { textTransform: 'uppercase', fontSize: 16, color: 'turquoise', backgroundColor: 'blue', lineHeight: 32, letterSpacing: 2, alignSelf: 'flex-start' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L928 - packages/rn-tester/js/examples/Text/TextExample.android.js line 928 – Inline style: { maxWidth: 20, backgroundColor: '#eee' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L935 - packages/rn-tester/js/examples/Text/TextExample.android.js line 935 – Inline style: { width: 20, height: 20, backgroundColor: 'gray' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L942 - packages/rn-tester/js/examples/Text/TextExample.android.js line 942 – Inline style: { flexDirection: 'row', alignItems: 'baseline' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L949 - packages/rn-tester/js/examples/Text/TextExample.android.js line 949 – Inline style: { flexDirection: 'row', alignItems: 'baseline' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L956 - packages/rn-tester/js/examples/Text/TextExample.android.js line 956 – Inline style: { flexDirection: 'row', alignItems: 'baseline' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L961 - packages/rn-tester/js/examples/Text/TextExample.android.js line 961 – Inline style: { flexDirection: 'row', alignItems: 'baseline', backgroundColor: '#eee' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L999 - packages/rn-tester/js/examples/Text/TextExample.android.js line 999 – Inline style: { userSelect: 'auto' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L1009 - packages/rn-tester/js/examples/Text/TextExample.android.js line 1009 – Inline style: { textAlignVertical: 'top', borderWidth: 1, height: 75 } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L1012 - packages/rn-tester/js/examples/Text/TextExample.android.js line 1012 – Inline style: { verticalAlign: 'top', borderWidth: 1, height: 75 } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L1016 - packages/rn-tester/js/examples/Text/TextExample.android.js line 1016 – Inline style: { textAlignVertical: 'center', borderWidth: 1, height: 75 } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Text/TextExample.android.js#L1019 - packages/rn-tester/js/examples/Text/TextExample.android.js line 1019 – Inline style: { verticalAlign: 'middle', borderWidth: 1, height: 75 } (react-native/no-inline-styles)

Generated by 🚫 dangerJS against 71352dc

[cipolleschi]

Thanks for the update! :D Could you also take care of the lint errors, please? 🙏

[gabrieldonadel]

Thanks for the update! :D Could you also take care of the lint errors, please? 🙏

@cipolleschi I believe there is some problem with the Danger configuration, all these warnings are about react-native/no-inline-styles even though this rule is disabled here -> https://github.com/facebook/react-native/blob/8edf4e9e3adcc85743e3c86a25ab3748b276a3da/packages/rn-tester/.eslintrc#L3

[cipolleschi]

Could you rebase on main, please? We should have fixed the CI! :D

[gabrieldonadel]

Could you rebase on main, please? We should have fixed the CI! :D

Sure, done

[facebook-github-bot]

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

[facebook-github-bot]

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

[react-native-bot]

This pull request was successfully merged by @gabrieldonadel in 32b6f31.

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

[react-native-bot]

This pull request was successfully merged by @gabrieldonadel in 32b6f31.

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

[react-native-bot]

This pull request was successfully merged by @gabrieldonadel in 32b6f31.

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

[react-native-bot]

This pull request was successfully merged by @gabrieldonadel in 32b6f31.

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

[react-native-bot]

This pull request was successfully merged by @gabrieldonadel in 32b6f31.

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

[react-native-bot]

This pull request was successfully merged by @gabrieldonadel in 32b6f31.

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

[react-native-bot]

This pull request was successfully merged by @gabrieldonadel in 32b6f31.

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

[react-native-bot]

This pull request was successfully merged by @gabrieldonadel in 32b6f31.

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

[react-native-bot]

This pull request was successfully merged by @gabrieldonadel in 32b6f31.

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

[react-native-bot]

This pull request was successfully merged by @gabrieldonadel in 32b6f31.

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

[react-native-bot]

This pull request was successfully merged by @gabrieldonadel in 32b6f31.

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

[react-native-bot]

This pull request was successfully merged by @gabrieldonadel in 32b6f31.

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

[react-native-bot]

This pull request was successfully merged by @gabrieldonadel in 32b6f31.

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

[react-native-bot]

This pull request was successfully merged by @gabrieldonadel in 32b6f31.

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

[react-native-bot]

This pull request was successfully merged by @gabrieldonadel in 32b6f31.

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