Feature/text align

example/src/App.tsx

@@ -1,12 +1,12 @@
 import * as React from 'react'
 
 import {
-  StyleSheet,
-  View,
+  Alert,
   Text as RNText,
   SafeAreaView,
   ScrollView,
-  Alert,
+  StyleSheet,
+  View,
 } from 'react-native'
 import {UITextView as Text} from 'react-native-uitextview'
 
@@ -26,9 +26,9 @@ export default function App() {
   }, [])
 
   return (
-    <SafeAreaView style={{flex: 1}}>
-      <ScrollView style={{flex: 1, paddingHorizontal: 10}}>
-        <View style={{gap: 20, paddingBottom: 200}}>
+    <SafeAreaView style={styles.container}>
+      <ScrollView style={styles.scrollView}>
+        <View style={styles.box}>
           <RNText style={styles.header}>React Native UITextView Example</RNText>
 
           <View>
@@ -61,6 +61,62 @@ export default function App() {
             </Text>
           </View>
 
+          <RNText style={styles.header}>Alignments</RNText>
+
+          <View>
+            <RNText style={styles.subheader}>
+              RN-UITextView, selectable, highlightable, aligned to left:
+            </RNText>
+            <Text style={[styles.text, styles.alignLeft]} selectable uiTextView>
+              Hello world!
+            </Text>
+          </View>
+
+          <View>
+            <RNText style={styles.subheader}>
+              RN-UITextView, selectable, highlightable, aligned to right:
+            </RNText>
+            <Text
+              style={[styles.text, styles.alignRight]}
+              selectable
+              uiTextView>
+              Hello world!
+            </Text>
+          </View>
+
+          <View>
+            <RNText style={styles.subheader}>
+              RN-UITextView, selectable, highlightable, aligned to center:
+            </RNText>
+            <Text
+              style={[styles.text, styles.alignCenter]}
+              selectable
+              uiTextView>
+              Hello world!
+            </Text>
+          </View>
+
+          <View>
+            <RNText style={styles.subheader}>
+              RN-UITextView, selectable, highlightable, aligned to justify:
+            </RNText>
+            <Text
+              style={[styles.text, styles.alignJustify]}
+              selectable
+              uiTextView>
+              Hello world!
+            </Text>
+          </View>
+
+          <View>
+            <RNText style={styles.subheader}>
+              RN-UITextView, selectable, highlightable, auto aligned:
+            </RNText>
+            <Text style={[styles.text, styles.alignAuto]} selectable uiTextView>
+              Hello world!
+            </Text>
+          </View>
+
           <RNText style={styles.header}>Styles</RNText>
 
           <View>
@@ -591,10 +647,13 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'space-around',
   },
+  scrollView: {
+    flex: 1,
+    paddingHorizontal: 10,
+  },
   box: {
-    width: 60,
-    height: 60,
-    marginVertical: 20,
+    gap: 20,
+    paddingBottom: 200,
   },
   spacer: {
     height: 10,
@@ -608,6 +667,21 @@ const styles = StyleSheet.create({
     fontSize: 22,
     fontWeight: 'bold',
   },
+  alignCenter: {
+    textAlign: 'center',
+  },
+  alignRight: {
+    textAlign: 'right',
+  },
+  alignLeft: {
+    textAlign: 'left',
+  },
+  alignJustify: {
+    textAlign: 'justify',
+  },
+  alignAuto: {
+    textAlign: 'auto',
+  },
   text: {
     fontSize: 18,
   },

ios/RNUITextView.mm

@@ -135,6 +135,7 @@ - (void)updateProps:(Props::Shared const &)props oldProps:(Props::Shared const &
       _textView.textContainer.lineBreakMode = NSLineBreakMode::NSLineBreakByClipping;
     }
   }
+
 
   // I'm not sure if this is really the right way to handle this style. This means that the entire _view_ the text
   // is in will have this background color applied. To apply it just to a particular part of a string, you'd need

ios/RNUITextViewShadowNode.cpp

@@ -100,6 +100,18 @@ Size RNUITextViewShadowNode::measureContent(
           textAttributes.textDecorationStyle = TextDecorationStyle::Double;
         }
 
+        if (props.textAlign == RNUITextViewChildTextAlign::Left) {
+          textAttributes.alignment = TextAlignment::Left;
+        } else if (props.textAlign == RNUITextViewChildTextAlign::Right) {
+          textAttributes.alignment = TextAlignment::Right;
+        } else if (props.textAlign == RNUITextViewChildTextAlign::Center) {
+          textAttributes.alignment = TextAlignment::Center;
+        } else if (props.textAlign == RNUITextViewChildTextAlign::Justify) {
+          textAttributes.alignment = TextAlignment::Justified;
+        } else if (props.textAlign == RNUITextViewChildTextAlign::Auto) {
+          textAttributes.alignment = TextAlignment::Natural;
+        }
+
         textAttributes.backgroundColor = props.backgroundColor;
 
         fragment.string = props.text;

react-native.config.js

@@ -9,7 +9,7 @@ const project = (() => {
         sourceDir: path.join('example', 'ios'),
       },
     })
-  } catch (e) {
+  } catch {
     return undefined
   }
 })()

src/RNUITextViewChildNativeComponent.ts

@@ -1,11 +1,11 @@
-import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent'
 import type {ColorValue, ViewProps} from 'react-native'
 import type {
   BubblingEventHandler,
   Float,
   Int32,
   WithDefault,
 } from 'react-native/Libraries/Types/CodegenTypes'
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent'
 
 interface TargetedEvent {
   target: Int32
@@ -26,6 +26,8 @@ export type NativeFontWeight =
 
 type FontStyle = 'normal' | 'italic'
 
+type TextAlign = 'auto' | 'left' | 'right' | 'center' | 'justify'
+
 interface NativeProps extends ViewProps {
   text: string
   color?: ColorValue
@@ -38,6 +40,7 @@ interface NativeProps extends ViewProps {
   textDecorationLine?: WithDefault<TextDecorationLine, 'none'>
   textDecorationStyle?: WithDefault<TextDecorationStyle, 'solid'>
   textDecorationColor?: ColorValue
+  textAlign?: WithDefault<TextAlign, 'auto'>
   shadowRadius?: WithDefault<Float, 0>
   onPress?: BubblingEventHandler<TargetedEvent>
   onLongPress?: BubblingEventHandler<TargetedEvent>