CODEWITHSUNDEEP
react-native
Tiffgray34
Tiffgray34

Reputation: 61

Show text component in two lines if there is enough space at the above line

I'm using Text components to show the texts like below.

[Text] [Text] [Text] ...

The problem is that I have some text contents that start with ';' ',' or '.'

I don't want those to appear at the first part of each line.

So for example: (ignore [], [] means Text component)

  1. [And] [God said][, let there] [be light]

    [: and there] [was] [light][.]

To

  1. [And] [God said][, let there] [be light][: and

    there] [was] [light][.]

How can I place that [: and there] text component in two lines if there is enough space to show some part of the text? (e.g: ": and")

Upvotes: 0

Views: 572

Answers (1)

SomoKRoceS
SomoKRoceS

Reputation: 3063

Edited Answer

Placing the components one followed by the other inside a nested text component will result desired behavior, as shown in the first example of React-Native documentation: here.

<Text>
    <Text>
        {text1}
    </Text>
    <Text>
        {text2}
    </Text>
</Text>

previous but not desired solution - included separating strings: (leaving it here in case that answer will help in similar-but-not-exact situations)

I would separate [: and there] into two text components (since they are two separated text components in my opinion) one is [: and] or [:] and the second is the rest. However, if in your app there is some logic you want that relates both separated components into one component, use some variable to save that information. Lets say like compID or something like that.

So it will look like:

id=0  id=1       id=2          id=3      id=4
[And] [God said][, let there] [be light][: and]

id=4    id=5  id=6   id=7
[there] [was] [light][.]

Upvotes: 1

Related Questions