Text Container Pro
A styled text display component with background, border, and three size modes. Show long-form text in a fixed scrollable box, let it expand to fit all content, or truncate with a "Show More / Show Less" toggle. Supports selectable text for copy/paste. Perfect for descriptions, terms and conditions, notes, reviews, and any long content pulled from your database.
Getting Started
Add the Scrollable Text component to your screen. By default, it shows in Fixed mode -- the text scrolls within the component's height. Set the Text prop to your content or bind it to a database field via Magic Text. Switch the Size Mode to change how the component handles overflow.
Settings
Text
The text content to display (default: "Enter your text here..."). Supports Magic Text -- bind to any text field in your database to display dynamic content.
Size Mode
How the component handles text that exceeds the visible area (default: Fixed).
Fixed (Scrolls) -- the component stays at the height you set in the editor. When text overflows, users can scroll within the box. A scroll indicator appears automatically.
Expand with Text -- the component grows taller to fit all the text. No scrolling, the box just expands. Use this when you want all content visible without user interaction.
Show More / Less -- the text is truncated to a set number of lines with a tappable "Show More" link below. Tap to expand and see everything, then "Show Less" to collapse.
Max Lines
The number of lines to show before truncating, 1--20 (default: 3). Only visible when Size Mode is Show More / Less. Set this to match how much of a preview you want users to see before they tap to expand.
Show More Label
The text for the expand link (default: "Show More"). Only visible when Size Mode is Show More / Less. Customize to match your app's language or tone -- for example, "Read More", "See All", or "Expand".
Show Less Label
The text for the collapse link (default: "Show Less"). Only visible when Size Mode is Show More / Less.
Selectable Text
Allow users to long-press and select text for copying (default: off). Turn this on when users might need to copy content like addresses, codes, or reference numbers. Works on Web, iOS, and Android.
Text Style
Font Size
The size of the text in pixels, 10--36 (default: 16).
Font Weight
The weight of the text (default: Regular). Options: Light, Regular, Medium, Semi Bold, Bold.
Text Color
The color of the text (default: #333333).
Line Height
The spacing between lines in pixels (default: 0 = auto). Set a specific value to control line spacing -- higher values add more space between lines for readability.
Text Alignment
Horizontal alignment of the text (default: Left). Options: Left, Center, Right.
Appearance
Background Color
The background color of the text box (default: #FFFFFF).
Padding
Inner padding of the text box in pixels, 0--32 (default: 12).
Border Color
The border color of the text box (default: #E0E0E0).
Border Width
Border thickness in pixels, 0--5 (default: 1).
Border Radius
Corner rounding in pixels, 0--24 (default: 8).
Show More/Less Color
The color of the "Show More" and "Show Less" link text (default: your app's primary color). Only visible when Size Mode is Show More / Less.
Opacity
Overall transparency of the component, 0--100 (default: 100). Use lower values for layering effects or watermark-style text.
Shadow
Toggle a subtle drop shadow on the text box (default: off).
Tips & Best Practices
Use Fixed mode for long content. Set the component height in the editor to control how much text is visible, and let users scroll to read more. Great for terms and conditions, privacy policies, or detailed descriptions.
Use Show More / Less for previews. Set Max Lines to 2--3 for a compact preview with a tap to expand. This keeps screens clean while still giving access to full content.
Bind Text to Magic Text from your database to display dynamic content -- product descriptions, user bios, review text, help articles, etc.
Turn on Selectable Text when users might need to copy addresses, phone numbers, order codes, or any reference information.
Adjust Line Height for readability. For long-form content, a Line Height of 24--28px (with font size 16) makes text much easier to read.
Use Expand mode sparingly. It grows the component to fit all text, which can push other content down the screen unexpectedly. Best for screens where the text length is predictable.
Set Border Width to 0 and a matching Background Color to make the text box blend seamlessly into your screen layout.
Example Use Cases
Product Description: Fixed mode, Height 150, bind Text to the product's description field. Users scroll to read the full description without taking over the screen.
Terms and Conditions: Fixed mode, Height 200, Selectable Text on so users can copy specific clauses. Add a border and light background to visually separate it from the rest of the form.
Review Preview: Show More / Less mode, Max Lines 3. Each review shows a 3-line preview with "Read More" to expand. Keeps the review list compact.
User Bio: Expand mode, no border, no background. The bio text grows to fit whatever the user wrote, blending into the profile screen.
Help Article: Fixed mode, Height 300, Line Height 26 for readability. Pull the article content from your database via Magic Text.
Notification Detail: Show More / Less mode, Max Lines 2, Show More Label "See Full Message". Compact preview in a notification list with tap to expand.
Was this helpful?