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 diff --git a/example/src/App.tsx b/example/src/App.tsx index 7dc8670..762d72a 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' @@ -26,9 +26,9 @@ export default function App() { }, []) return ( - - - + + + React Native UITextView Example @@ -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, auto aligned: + + + Hello world! + + + Styles @@ -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, }, diff --git a/ios/RNUITextView.mm b/ios/RNUITextView.mm index 5738749..638fdec 100644 --- a/ios/RNUITextView.mm +++ b/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 diff --git a/ios/RNUITextViewShadowNode.cpp b/ios/RNUITextViewShadowNode.cpp index 95bed18..7f04492 100644 --- a/ios/RNUITextViewShadowNode.cpp +++ b/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; 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 } })() 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