Skip to content
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 27 additions & 6 deletions example/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,11 @@ export default function App() {
{/* Layout Measurement */}
<View style={styles.section}>
<NitroText style={styles.sectionTitle}>Layout Measurement</NitroText>
<NitroText style={styles.measuredText} onLayout={handleLayout} onTextLayout={handleTextLayout}>
<NitroText
style={styles.measuredText}
onLayout={handleLayout}
onTextLayout={handleTextLayout}
>
This text demonstrates layout measurement capabilities. The component
can measure its dimensions and report back to JavaScript.
{'\n\n'}
Expand All @@ -73,13 +77,30 @@ export default function App() {
<View style={styles.section}>
<NitroText style={styles.sectionTitle}>Line Limiting</NitroText>
<NitroText style={styles.description}>Two lines maximum:</NitroText>

{/* BUG: This does not work correctly in NitroText. needs to be fixed. */}
<NitroText style={styles.limitedText} numberOfLines={2}>
This is a very long text that would normally span multiple lines, but
we're limiting it to just two lines. The text will be truncated with
an ellipsis when it exceeds the specified number of lines. This is
useful for creating consistent layouts in lists or cards where you
need predictable text heights.
This is a very long text that would normally{' '}
<NitroText style={[styles.limitedText, { fontWeight: 'bold' }]}>
span multiple lines, but we're limiting it to just two lines. The
text will be truncated with an ellipsis when it exceeds the
specified number of lines. This is useful for creating consistent
layouts in lists or cards where you need predictable text heights.
</NitroText>
</NitroText>

<Text style={[styles.description, { marginTop: 8 }]}>
RN Text (with tail ellipsize mode):
</Text>
<Text style={styles.limitedText} numberOfLines={2}>
This is a very long text that would normally{' '}
<Text style={styles.limitedText}>
span multiple lines, but we're limiting it to just two lines. The
text will be truncated with an ellipsis when it exceeds the
specified number of lines. This is useful for creating consistent
layouts in lists or cards where you need predictable text heights.
</Text>
</Text>
</View>

{/* Mixed Content */}
Expand Down
6 changes: 5 additions & 1 deletion ios/HybridNitroText.swift
Original file line number Diff line number Diff line change
Expand Up @@ -98,12 +98,14 @@ class HybridNitroText : HybridNitroTextSpec, NitroTextViewDelegate {
var numberOfLines: Double? {
didSet {
nitroTextImpl.setNumberOfLines(numberOfLines)
applyFragmentsAndProps()
}
}

var ellipsizeMode: EllipsizeMode? {
didSet {
nitroTextImpl.setEllipsizeMode(ellipsizeMode)
applyFragmentsAndProps()
}
}

Expand All @@ -116,7 +118,9 @@ class HybridNitroText : HybridNitroTextSpec, NitroTextViewDelegate {
fontStyle: fontStyle,
lineHeight: lineHeight,
textAlign: textAlign,
textTransform: textTransform
textTransform: textTransform,
numberOfLines: numberOfLines,
ellipsizeMode: ellipsizeMode
)
nitroTextImpl.apply(fragments: fragments, text: text, top: top)
}
Expand Down
7 changes: 6 additions & 1 deletion ios/NitroTextImpl+Fragment.swift
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,8 @@ extension NitroTextImpl {
let lineHeight: Double?
let textAlign: TextAlign?
let textTransform: TextTransform?
let numberOfLines: Double?
let ellipsizeMode: EllipsizeMode?
}

func apply(fragments: [Fragment]?, text: String?, top: FragmentTopDefaults) {
Expand All @@ -31,7 +33,8 @@ extension NitroTextImpl {
text: t,
numberOfLines: nil,
textAlign: top.textAlign,
textTransform: top.textTransform
textTransform: top.textTransform,
ellipsizeMode: top.ellipsizeMode,
)
setFragments([single])
} else {
Expand All @@ -52,6 +55,8 @@ extension NitroTextImpl {
if frag.fontColor == nil, let v = top.fontColor, !v.isEmpty { frag.fontColor = v }
if frag.textAlign == nil, let v = top.textAlign { frag.textAlign = v }
if frag.textTransform == nil, let v = top.textTransform { frag.textTransform = v }
if frag.numberOfLines == nil, let v = top.numberOfLines { frag.numberOfLines = v }
if frag.ellipsizeMode == nil, let v = top.ellipsizeMode { frag.ellipsizeMode = v }
merged.append(frag)
}
setFragments(merged)
Expand Down
13 changes: 2 additions & 11 deletions ios/NitroTextImpl.swift
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,7 @@ final class NitroTextImpl {
var currentTextAlignment: NSTextAlignment = .natural
var currentTransform: TextTransform = .none
var currentEllipsize: NSLineBreakMode = .byTruncatingTail
// Small font cache to avoid repeatedly recreating identical UIFonts
var fontCache: [NitroTextImpl.FontKey: UIFont] = [:]
var fontCache: [FontKey: UIFont] = [:]

init(_ nitroTextView: NitroTextView) {
self.nitroTextView = nitroTextView
Expand All @@ -37,24 +36,16 @@ final class NitroTextImpl {
case .some(.clip): currentEllipsize = .byClipping
default: currentEllipsize = .byTruncatingTail
}
// Re-apply to container based on current numberOfLines
guard let n = nitroTextView?.textContainer.maximumNumberOfLines else { return }
nitroTextView?.textContainer.lineBreakMode = effectiveLineBreakMode(forLines: n)
}

func effectiveLineBreakMode(forLines n: Int) -> NSLineBreakMode {
guard n > 0 else { return .byWordWrapping }
if n == 1 { return currentEllipsize }
// Multi-line behavior: allow wrapping, then apply final-line behavior.
// - tail: use truncatingTail to append ellipsis on the last visible line
// - clip: keep wrapping and clip after the Nth line (word wrapping)
switch currentEllipsize {
case .byClipping:
return .byClipping
case .byTruncatingHead:
return .byTruncatingHead
case .byTruncatingMiddle:
return .byTruncatingMiddle
return .byWordWrapping
default:
return .byTruncatingTail
}
Expand Down
60 changes: 30 additions & 30 deletions nitrogen/generated/ios/NitroText-Swift-Cxx-Bridge.hpp

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

24 changes: 12 additions & 12 deletions nitrogen/generated/ios/c++/HybridNitroTextSpecSwift.hpp

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

18 changes: 9 additions & 9 deletions nitrogen/generated/ios/c++/views/HybridNitroTextComponent.mm

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

25 changes: 24 additions & 1 deletion nitrogen/generated/ios/swift/Fragment.swift

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions nitrogen/generated/ios/swift/HybridNitroTextSpec.swift

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading
Loading