Add support for textAlign:start/end about react-native

[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).

[cortinico]

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

those are good questions for @necolas

[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?

[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?

[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.

[samrith-s]

@necolas Hello, any update on this? I can pick this up accordingly.

[necolas]

Yes, inline with CSS spec

[samrith-s]

Cool, sorry for the delay was unwell. I'll pick this up over this weekend!