Text (Alpha)
This feature is currently in its Alpha stage of development.
As an early version, it may not include all planned functionalities and is subject to significant changes based on ongoing development and user feedback.
In this phase, the feature may contain bugs or behave unpredictably.
Jigx recommends using standard, fully supported components until this feature has been fully tested and refined.
We encourage you to provide feedback and report any issues to help us improve and refine the feature for future releases.
The custom component text allows adding text inside custom components. For example, adding text inside a Card (Alpha) or View (Alpha).
For steps on creating a custom component, see How to create a custom component.
Configuration options
You can use when and instanceId with component.text, add the properties before the options property. The available list of options is shown below.
align
Determine the text alignment, options are: center left right
color
Multiple, use IntelliSense to view the available list. See to view the different colors.
decoration
line-through underline
emphasis
Change the text's brightness and boldness. high low low-medium medium
numberOfLines
Use a number to indicate the number of lines of text. Use an expression to determine the number of lines needed.
onPress
Multiple, use IntelliSense to view the list of available to call.
size
Adjust the size of the text, the following sizes are available: extra-large large medium regular small tiny
value
Provide the text to be used. You can use an , as well as Localization.
weight
Determine how thick or bold the text must be, the following weights are available: bold extra-bold extra-light light regular semi-bold
Examples and code snippets
The examples use a set of custom components called sections. The sections are for titles, spacing, and context. The sections code is available on GitHub.
Text font sizes
This example shows the use of component.text with various font sizes configured using the size property, all displayed within a Card (Alpha).
Examples:
Text with line through
Text with underlining
This example shows how to underline text with various font sizes using the decoration: underline property. The text is contained in a yellow Card (Alpha).
Examples:
Text with emphasis
This example shows the component.text with various font sizes and emphasis styles, configured using the emphasis property, all displayed in a Card (Alpha).
Examples:
Text with alignment
This example demonstrates various text alignments with varying font sizes using the align property, all displayed in a Card (Alpha).
Examples:
Text over multiple lines
This example demonstrates how to control the number of text lines displayed in component.text using the numberOfLines: property, with the content displayed inside a Card (Alpha).
Examples:
Text with color
This example shows how to set the color of text of varying font sizes, and spread over a number of lines by using the color: property, with the content displayed in a Card (Alpha).
Examples:
Text weights
These examples demonstrate the various options for using text weights to ensure thickness and boldness of text combined with varying sizes, displayed in a Card (Alpha). By combining the size, and weight properties, you can achieve the desired appearance.
Examples:
See the custom component example in GitHub.
See the jig example in GitHub.
See the section component example in GitHub.
Last updated
Was this helpful?