r
r
react-juce
Search…
r
r
react-juce
Introduction
Guides
Getting Started
Running the Examples
Integrating Your Project
Debugging with Duktape
Why Not React Native?
Components
View
Image
Text
Canvas
Button
Slider
ListView
ScrollView
Style Properties
Synthetic Events
Native
Custom Native Components
JS/Native Interop
Have a Question?
GitHub Discussions
Discord Chatroom
Open an Issue
Powered By
GitBook
Text
A React component for displaying text.
Unlike React Native and React-DOM,
Text
does not yet support nesting (
#6
), though it does happily support styling, and touch handling.
Example
1
import
React
,
{
Component
}
from
"react"
;
2
import
{
View
,
Text
}
from
"react-juce"
;
3
​
4
function
App
(
props
)
{
5
return
(
6
<
View
{
...
styles
.
outer
}
>
7
<
Text
{
...
styles
.
labelText
}
>
Hello
,
</
Text
>
8
<
Text
{
...
styles
.
nameText
}
>
{
props
.
name
}
</
Text
>
9
</
View
>
10
);
11
}
12
​
13
const
styles
=
{
14
outer
:
{
15
width
:
"100%"
,
16
height
:
"100%"
,
17
backgroundColor
:
"#17191f"
,
18
justifyContent
:
"center"
,
19
alignItems
:
"center"
,
20
},
21
labelText
:
{
22
color
:
"#626262"
,
23
fontSize
:
16.0
,
24
lineSpacing
:
1.6
,
25
},
26
nameText
:
{
27
color
:
"#6262f8"
,
28
fontSize
:
16.0
,
29
lineSpacing
:
1.6
,
30
},
31
};
Copied!
Props
Text
inherits support for all of the core
View
properties described in
View
.
color
The color used to draw the text
Type
Required
Supported
string
No
​
Standard
​
fontSize
The font size used to draw the text
Type
Required
Supported
string
No
​
Partial
​
fontFamily
The font family name with which to draw the text
Type
Required
Supported
string
No
​
Partial
​
fontStyle
Sets whether the text should be rendered bold, italics, or normal.
Type
Required
Supported
string
No
​
Partial
​
justification
Sets the horizontal alignment of the text within the container.
TODO: Rename this prop and match the text-align spec
Type
Required
Supported
string
No
​
Non-Standard
​
kerningFactor
Sets the horizontal spacing between text characters.
TODO: Rename this prop and match the letter-spacing spec
Type
Required
Supported
string
No
​
Non-Standard
​
lineSpacing
Sets the height of a line box, commonly used to apply vertical spacing between neighboring lines of text.
TODO: Rename this prop and match the line-height spec
Type
Required
Supported
string
No
​
Non-Standard
​
wordWrap
Sets the word-wrap behavior for when the text content overflows its content box.
Type
Required
Supported
string
No
​
Non-Standard
​
Styles
Text
supports all of the default style properties described in
Style Properties
.
Components - Previous
Image
Next - Components
Canvas
Last modified
1yr ago
Copy link
Contents
Example
Props
color
fontSize
fontFamily
fontStyle
justification
kerningFactor
lineSpacing
wordWrap
Styles