Add support for textAlign:start/end

[necolas]

Description

React Native is missing support for textAlign:start and textAlign:end on Text and TextInput elements - https://developer.mozilla.org/en-US/docs/Web/CSS/text-align#syntax

These values are important for supporting RTL layouts, and should react to the direction style on ancestral Views on all platforms.

Steps to reproduce

1. Set textAlign:end
2. Notice it doesn't work

React Native Version

0.75

Affected Platforms

Runtime - Android, Runtime - iOS

Output of npx react-native info

.

Stacktrace or Logs

.

Reproducer

.

Screenshots and Videos

No response

[kunalchavhan]

Hello, Can I try to resolve this issue?

[samrith-s]

@cortinico I can pick this up, but had a few points.

If we are to match web specs, then the way left and right currently behave don't work according to the specs. It internally checks whether the direction is RTL or LTR, and applies the opposite.

According to the CSS spec:

• left aligns the text to the left of the bounding box
• right aligns the text to the right of the bounding box
• start aligns the text to the left if LTR and right if RTL
• end aligns the text to the right if LTR and left if RTL

Based on this, I can see two ways to do it:

• Either accommodate for this change in the Text component itself
• Fix this in the base text shadow node to match the spec

Which one would you recommend?

[cortinico]

@cortinico I can pick this up, but had a few points.

those are good questions for @necolas

[samrith-s]

@necolas whenever you can, if you can validate these points then I will make the fix accordingly.

I have already done the same for Android, but awaiting confirmation will do the for iOS.

[necolas]

then the way left and right currently behave don't work according to the specs. It internally checks whether the direction is RTL or LTR, and applies the opposite

Fixing this might be a breaking change if you're saying left currently becomes right in an RTL context.

should react to the direction style on ancestral Views

I think the fix to the way direction works on Android is behind a feature flag. cc @NickGerleman

[samrith-s]

What do you recommend?

I am particularly referring to these lines:

react-native/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactTextShadowNode.java

Lines 282 to 292 in 33262c1

	private int getTextAlign() {
	int textAlign = mTextAlign;
	if (getLayoutDirection() == YogaDirection.RTL) {
	if (textAlign == Gravity.RIGHT) {
	textAlign = Gravity.LEFT;
	} else if (textAlign == Gravity.LEFT) {
	textAlign = Gravity.RIGHT;
	}
	}
	return textAlign;
	}

I suspect something similar will also be there for iOS. If we add start and end support, do we just swap it out for left and right, or actually follow the spec and implement it as per it?

[NickGerleman]

The above code mentioned is unfortunately only used in the legacy architecture. The new architecture has a different path for setting text direction, though I think it may also do some swapping (though IIRC maybe only when swapLeftAndRightInRTL is enabled, which I think is default too).

[samrith-s]

@NickGerleman in that case, can you point me to where this would be?

@necolas Should the fix for this be inline with CSS spec? If so then I will start accordingly.