feat: Add support for verticalAlign style

Libraries/Components/TextInput/TextInput.d.ts

@@ -435,6 +435,11 @@ export interface TextInputAndroidProps {
    * When false, it will prevent the soft keyboard from showing when the field is focused. The default value is true
    */
   showSoftInputOnFocus?: boolean | undefined;
+
+  /**
+   * Vertically align text when `multiline` is set to true
+   */
+  verticalAlign?: 'auto' | 'top' | 'bottom' | 'middle' | undefined;
 }
 
 /**

Libraries/Components/TextInput/TextInput.js

@@ -23,6 +23,7 @@ import StyleSheet, {
   type TextStyleProp,
   type ViewStyleProp,
 } from '../../StyleSheet/StyleSheet';
+import flattenStyle from '../../StyleSheet/flattenStyle';
 import Text from '../../Text/Text';
 import TextAncestor from '../../Text/TextAncestor';
 import Platform from '../../Utilities/Platform';
@@ -1599,6 +1600,13 @@ const ExportedForwardRef: React.AbstractComponent<
     React.ElementRef<HostComponent<mixed>> & ImperativeMethods,
   >,
 ) {
+  const style = flattenStyle(restProps.style);
+
+  if (style?.verticalAlign != null) {
+    style.textAlignVertical =
+      verticalAlignToTextAlignVerticalMap[style.verticalAlign];
+  }
+
   return (
     <InternalTextInput
       allowFontScaling={allowFontScaling}
@@ -1628,6 +1636,7 @@ const ExportedForwardRef: React.AbstractComponent<
       }
       {...restProps}
       forwardedRef={forwardedRef}
+      style={style}
     />
   );
 });
@@ -1659,5 +1668,12 @@ const styles = StyleSheet.create({
   },
 });
 
+const verticalAlignToTextAlignVerticalMap = {
+  auto: 'auto',
+  top: 'top',
+  bottom: 'bottom',
+  middle: 'center',
+};
+
 // $FlowFixMe[unclear-type] Unclear type. Using `any` type is not safe.
 module.exports = ((ExportedForwardRef: any): TextInputType);

Libraries/Components/View/ReactNativeStyleAttributes.js

@@ -138,6 +138,7 @@ const ReactNativeStyleAttributes: {[string]: AnyAttributeType, ...} = {
   textShadowRadius: true,
   textTransform: true,
   userSelect: true,
+  verticalAlign: true,
   writingDirection: true,
 
   /**

Libraries/StyleSheet/StyleSheetTypes.d.ts

@@ -261,6 +261,7 @@ export interface TextStyleIOS extends ViewStyle {
 
 export interface TextStyleAndroid extends ViewStyle {
   textAlignVertical?: 'auto' | 'top' | 'bottom' | 'center' | undefined;
+  verticalAlign?: 'auto' | 'top' | 'bottom' | 'middle' | undefined;
   includeFontPadding?: boolean | undefined;
 }
 

Libraries/StyleSheet/StyleSheetTypes.js

@@ -671,6 +671,7 @@ export type ____TextStyle_InternalCore = $ReadOnly<{
   textDecorationColor?: ____ColorValue_Internal,
   textTransform?: 'none' | 'capitalize' | 'uppercase' | 'lowercase',
   userSelect?: 'auto' | 'text' | 'none' | 'contain' | 'all',
+  verticalAlign?: 'auto' | 'top' | 'bottom' | 'middle',
   writingDirection?: 'auto' | 'ltr' | 'rtl',
 }>;
 

Libraries/Text/Text.js

@@ -178,6 +178,13 @@ const Text: React.AbstractComponent<
     _selectable = userSelectToSelectableMap[style.userSelect];
   }
 
+  if (style?.verticalAlign != null) {
+    style = StyleSheet.compose(style, {
+      textAlignVertical:
+        verticalAlignToTextAlignVerticalMap[style.verticalAlign],
+    });
+  }
+
   if (__DEV__) {
     if (PressabilityDebug.isEnabled() && onPress != null) {
       style = StyleSheet.compose(restProps.style, {
@@ -275,4 +282,11 @@ const userSelectToSelectableMap = {
   all: true,
 };
 
+const verticalAlignToTextAlignVerticalMap = {
+  auto: 'auto',
+  top: 'top',
+  bottom: 'bottom',
+  middle: 'center',
+};
+
 module.exports = Text;

packages/rn-tester/js/examples/Text/TextExample.android.js

@@ -1001,4 +1001,26 @@ exports.examples = [
       );
     },
   },
+  {
+    title: 'Text alignment',
+    render: function (): React.Node {
+      return (
+        <View>
+          <Text style={{textAlignVertical: 'top', borderWidth: 1, height: 75}}>
+            Text element aligned to the top via textAlignVertical
+          </Text>
+          <Text style={{verticalAlign: 'top', borderWidth: 1, height: 75}}>
+            Text element aligned to the top via verticalAlign
+          </Text>
+          <Text
+            style={{textAlignVertical: 'center', borderWidth: 1, height: 75}}>
+            Text element aligned to the middle via textAlignVertical
+          </Text>
+          <Text style={{verticalAlign: 'middle', borderWidth: 1, height: 75}}>
+            Text element aligned to the middle via verticalAlign
+          </Text>
+        </View>
+      );
+    },
+  },
 ];