From ce1b812750aef14804a8709a5dab29385f16aa23 Mon Sep 17 00:00:00 2001 From: Dirk Ehrhardt Date: Thu, 13 Nov 2025 09:12:31 +0100 Subject: [PATCH 1/5] chore: remove local Xcode environment configuration --- example/ios/.xcode.env.local | 1 - 1 file changed, 1 deletion(-) delete mode 100644 example/ios/.xcode.env.local diff --git a/example/ios/.xcode.env.local b/example/ios/.xcode.env.local deleted file mode 100644 index d6e4981..0000000 --- a/example/ios/.xcode.env.local +++ /dev/null @@ -1 +0,0 @@ -export NODE_BINARY=/Users/hailey/.nvm/versions/node/v20.12.2/bin/node From 80cdca24488266b1d846a93827954ee3a554bfc8 Mon Sep 17 00:00:00 2001 From: Dirk Ehrhardt Date: Thu, 13 Nov 2025 09:13:10 +0100 Subject: [PATCH 2/5] feat: add text alignment support to RNUITextView component --- example/src/App.tsx | 77 ++++++++++++++++++++++++++++-- ios/RNUITextView.mm | 14 ++++++ ios/RNUITextViewShadowNode.cpp | 12 +++++ src/RNUITextViewNativeComponent.ts | 3 ++ 4 files changed, 103 insertions(+), 3 deletions(-) diff --git a/example/src/App.tsx b/example/src/App.tsx index 7dc8670..681029a 100644 --- a/example/src/App.tsx +++ b/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' @@ -61,6 +61,62 @@ export default function App() { + Alignments + + + + RN-UITextView, selectable, highlightable, aligned to Left:{' '} + + + Hello world! + + + + + + RN-UITextView, selectable, highlightable, aligned to Right:{' '} + + + Hello world! + + + + + + RN-UITextView, selectable, highlightable, aligned to Center:{' '} + + + Hello world! + + + + + + RN-UITextView, selectable, highlightable, aligned to Justify:{' '} + + + Hello world! + + + + + + RN-UITextView, selectable, highlightable, aligned to Auto:{' '} + + + Hello world! + + + Styles @@ -608,6 +664,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, }, diff --git a/ios/RNUITextView.mm b/ios/RNUITextView.mm index 5738749..fc5ddad 100644 --- a/ios/RNUITextView.mm +++ b/ios/RNUITextView.mm @@ -135,6 +135,20 @@ - (void)updateProps:(Props::Shared const &)props oldProps:(Props::Shared const & _textView.textContainer.lineBreakMode = NSLineBreakMode::NSLineBreakByClipping; } } + + if (oldViewProps.textAlign != newViewProps.textAlign) { + if (newViewProps.textAlign == RNUITextViewTextAlign::Left) { + _textView.textAlignment = NSTextAlignmentLeft; + } else if (newViewProps.textAlign == RNUITextViewTextAlign::Right) { + _textView.textAlignment = NSTextAlignmentRight; + } else if (newViewProps.textAlign == RNUITextViewTextAlign::Center) { + _textView.textAlignment = NSTextAlignmentCenter; + } else if (newViewProps.textAlign == RNUITextViewTextAlign::Justify) { + _textView.textAlignment = NSTextAlignmentJustified; + } else if (newViewProps.textAlign == RNUITextViewTextAlign::Auto) { + _textView.textAlignment = NSTextAlignmentNatural; + } + } // 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 diff --git a/ios/RNUITextViewShadowNode.cpp b/ios/RNUITextViewShadowNode.cpp index 95bed18..fd9c6f0 100644 --- a/ios/RNUITextViewShadowNode.cpp +++ b/ios/RNUITextViewShadowNode.cpp @@ -100,6 +100,18 @@ Size RNUITextViewShadowNode::measureContent( textAttributes.textDecorationStyle = TextDecorationStyle::Double; } + if (baseProps.textAlign == RNUITextViewTextAlign::Left) { + textAttributes.alignment = TextAlignment::Left; + } else if (baseProps.textAlign == RNUITextViewTextAlign::Right) { + textAttributes.alignment = TextAlignment::Right; + } else if (baseProps.textAlign == RNUITextViewTextAlign::Center) { + textAttributes.alignment = TextAlignment::Center; + } else if (baseProps.textAlign == RNUITextViewTextAlign::Justify) { + textAttributes.alignment = TextAlignment::Justified; + } else if (baseProps.textAlign == RNUITextViewTextAlign::Auto) { + textAttributes.alignment = TextAlignment::Natural; + } + textAttributes.backgroundColor = props.backgroundColor; fragment.string = props.text; diff --git a/src/RNUITextViewNativeComponent.ts b/src/RNUITextViewNativeComponent.ts index d42db1b..a1e6010 100644 --- a/src/RNUITextViewNativeComponent.ts +++ b/src/RNUITextViewNativeComponent.ts @@ -16,10 +16,13 @@ interface TextLayoutEvent extends TargetedEvent { type EllipsizeMode = 'head' | 'middle' | 'tail' | 'clip' +type TextAlign = 'auto' | 'left' | 'right' | 'center' | 'justify' + interface NativeProps extends ViewProps { numberOfLines?: Int32 allowFontScaling?: WithDefault ellipsizeMode?: WithDefault + textAlign?: WithDefault selectable?: boolean onTextLayout?: BubblingEventHandler } From d298f9f1f11d25b4a7a38126aa0376896c3c9098 Mon Sep 17 00:00:00 2001 From: Dirk Ehrhardt Date: Thu, 13 Nov 2025 09:17:07 +0100 Subject: [PATCH 3/5] fix: correct text alignment descriptions in RNText components --- example/src/App.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/example/src/App.tsx b/example/src/App.tsx index 681029a..8aef8aa 100644 --- a/example/src/App.tsx +++ b/example/src/App.tsx @@ -65,7 +65,7 @@ export default function App() { - RN-UITextView, selectable, highlightable, aligned to Left:{' '} + RN-UITextView, selectable, highlightable, aligned to left: Hello world! @@ -74,7 +74,7 @@ export default function App() { - RN-UITextView, selectable, highlightable, aligned to Right:{' '} + RN-UITextView, selectable, highlightable, aligned to right: - RN-UITextView, selectable, highlightable, aligned to Center:{' '} + RN-UITextView, selectable, highlightable, aligned to center: - RN-UITextView, selectable, highlightable, aligned to Justify:{' '} + RN-UITextView, selectable, highlightable, aligned to justify: - RN-UITextView, selectable, highlightable, aligned to Auto:{' '} + RN-UITextView, selectable, highlightable, auto aligned: Hello world! From 956be58a5ffd2f0df7dff64cbe511878cff842ae Mon Sep 17 00:00:00 2001 From: Dirk Ehrhardt Date: Thu, 13 Nov 2025 09:48:17 +0100 Subject: [PATCH 4/5] fix: linter warnings --- example/src/App.tsx | 15 +++++++++------ react-native.config.js | 2 +- 2 files changed, 10 insertions(+), 7 deletions(-) diff --git a/example/src/App.tsx b/example/src/App.tsx index 8aef8aa..762d72a 100644 --- a/example/src/App.tsx +++ b/example/src/App.tsx @@ -26,9 +26,9 @@ export default function App() { }, []) return ( - - - + + + React Native UITextView Example @@ -647,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, diff --git a/react-native.config.js b/react-native.config.js index f3ec9d5..e21fb8c 100644 --- a/react-native.config.js +++ b/react-native.config.js @@ -9,7 +9,7 @@ const project = (() => { sourceDir: path.join('example', 'ios'), }, }) - } catch (e) { + } catch { return undefined } })() From c027abd4ee21d4896ce6d40f15e683e3829d02d2 Mon Sep 17 00:00:00 2001 From: Dirk Ehrhardt Date: Thu, 13 Nov 2025 11:24:27 +0100 Subject: [PATCH 5/5] refactor: remove text alignment handling to RNUITextViewChild components --- ios/RNUITextView.mm | 13 ------------- ios/RNUITextViewShadowNode.cpp | 10 +++++----- src/RNUITextViewChildNativeComponent.ts | 5 ++++- src/RNUITextViewNativeComponent.ts | 3 --- 4 files changed, 9 insertions(+), 22 deletions(-) diff --git a/ios/RNUITextView.mm b/ios/RNUITextView.mm index fc5ddad..638fdec 100644 --- a/ios/RNUITextView.mm +++ b/ios/RNUITextView.mm @@ -136,19 +136,6 @@ - (void)updateProps:(Props::Shared const &)props oldProps:(Props::Shared const & } } - if (oldViewProps.textAlign != newViewProps.textAlign) { - if (newViewProps.textAlign == RNUITextViewTextAlign::Left) { - _textView.textAlignment = NSTextAlignmentLeft; - } else if (newViewProps.textAlign == RNUITextViewTextAlign::Right) { - _textView.textAlignment = NSTextAlignmentRight; - } else if (newViewProps.textAlign == RNUITextViewTextAlign::Center) { - _textView.textAlignment = NSTextAlignmentCenter; - } else if (newViewProps.textAlign == RNUITextViewTextAlign::Justify) { - _textView.textAlignment = NSTextAlignmentJustified; - } else if (newViewProps.textAlign == RNUITextViewTextAlign::Auto) { - _textView.textAlignment = NSTextAlignmentNatural; - } - } // 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 diff --git a/ios/RNUITextViewShadowNode.cpp b/ios/RNUITextViewShadowNode.cpp index fd9c6f0..7f04492 100644 --- a/ios/RNUITextViewShadowNode.cpp +++ b/ios/RNUITextViewShadowNode.cpp @@ -100,15 +100,15 @@ Size RNUITextViewShadowNode::measureContent( textAttributes.textDecorationStyle = TextDecorationStyle::Double; } - if (baseProps.textAlign == RNUITextViewTextAlign::Left) { + if (props.textAlign == RNUITextViewChildTextAlign::Left) { textAttributes.alignment = TextAlignment::Left; - } else if (baseProps.textAlign == RNUITextViewTextAlign::Right) { + } else if (props.textAlign == RNUITextViewChildTextAlign::Right) { textAttributes.alignment = TextAlignment::Right; - } else if (baseProps.textAlign == RNUITextViewTextAlign::Center) { + } else if (props.textAlign == RNUITextViewChildTextAlign::Center) { textAttributes.alignment = TextAlignment::Center; - } else if (baseProps.textAlign == RNUITextViewTextAlign::Justify) { + } else if (props.textAlign == RNUITextViewChildTextAlign::Justify) { textAttributes.alignment = TextAlignment::Justified; - } else if (baseProps.textAlign == RNUITextViewTextAlign::Auto) { + } else if (props.textAlign == RNUITextViewChildTextAlign::Auto) { textAttributes.alignment = TextAlignment::Natural; } diff --git a/src/RNUITextViewChildNativeComponent.ts b/src/RNUITextViewChildNativeComponent.ts index 63d5201..e339cec 100644 --- a/src/RNUITextViewChildNativeComponent.ts +++ b/src/RNUITextViewChildNativeComponent.ts @@ -1,4 +1,3 @@ -import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent' import type {ColorValue, ViewProps} from 'react-native' import type { BubblingEventHandler, @@ -6,6 +5,7 @@ import type { 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 textDecorationStyle?: WithDefault textDecorationColor?: ColorValue + textAlign?: WithDefault shadowRadius?: WithDefault onPress?: BubblingEventHandler onLongPress?: BubblingEventHandler diff --git a/src/RNUITextViewNativeComponent.ts b/src/RNUITextViewNativeComponent.ts index a1e6010..d42db1b 100644 --- a/src/RNUITextViewNativeComponent.ts +++ b/src/RNUITextViewNativeComponent.ts @@ -16,13 +16,10 @@ interface TextLayoutEvent extends TargetedEvent { type EllipsizeMode = 'head' | 'middle' | 'tail' | 'clip' -type TextAlign = 'auto' | 'left' | 'right' | 'center' | 'justify' - interface NativeProps extends ViewProps { numberOfLines?: Int32 allowFontScaling?: WithDefault ellipsizeMode?: WithDefault - textAlign?: WithDefault selectable?: boolean onTextLayout?: BubblingEventHandler }