React-native: flexDirection: row breaks numberOfLines in nested <Text/>

[doochik]

The actual result I want to get is

<View>
<Text>Long truncated text...</Text> <Text>Fixed string on same line</Text>
</View>

I tried some cases, but it seems that flex breaks Text@numberOfLines

// works but "Fixed" on the new line
<View style={{padding: 20}}>
    <Text numberOfLines={1}>
        1. This text is truncated This text is truncated This text is truncated
    </Text>
    <Text>Fixed</Text>
</View>

// text is not truncated, padding is ignored
<View style={{padding: 20, flexDirection: 'row'}}>
    <Text numberOfLines={1}>
        2. This text is truncated 2. This text is truncated 2. This text is truncated
    </Text>
    <Text>Fixed</Text>
</View>

// text is not truncated, padding is ignored
<View style={{padding: 20, flexDirection: 'row'}}>
    <Text numberOfLines={1} style={{flex: 1, overflow: 'hidden'}}>
        3. This text is truncated 3. This text is truncated 3. This text is truncated
    </Text>
    <Text>Fixed</Text>
</View>

// text is not truncated, padding is ignored
<View style={{padding: 20, flexDirection: 'row'}}>
    <Text numberOfLines={1} style={{flex: 1, overflow: 'hidden', minWidth: 0}}>
        4. This text is truncated 4. This text is truncated 4. This text is truncated
    </Text>
    <Text>Fixed</Text>
</View>

// text is not truncated, padding is ignored
<View style={{padding: 20, flexDirection: 'row'}}>
    <Text numberOfLines={1} style={{overflow: 'hidden'}}>
        5. This text is truncated 5. This text is truncated 5. This text is truncated
    </Text>
    <Text style={{flex: 1}}>Fixed</Text>
</View>

Here is my result

[facebook-github-bot]

Hey doochik, thanks for reporting this issue!

React Native, as you've probably heard, is getting really popular and truth is we're getting a bit overwhelmed by the activity surrounding it. There are just too many issues for us to manage properly.

• If this is a feature request or a bug that you would like to be fixed by the team, please report it on Product Pains. It has a ranking feature that lets us focus on the most important issues the community is experiencing.
• If you don't know how to do something or not sure whether some behavior is expected or a bug, please ask on StackOverflow with the tag react-native or for more real time interactions, ask on Discord in the #react-native channel.
• We welcome clear issues and PRs that are ready for in-depth discussion; thank you for your contributions!

[hufeng]

+1

[zoontek]

+1

[pocman]

+1

[9mm]

Have any of you guys found workarounds for this? Not sure how to go about doing this...

[mikelambert]

I had the same issue, and spent 45m+ trying to figure out why this worked: http://stackoverflow.com/questions/36284453/react-native-text-going-off-my-screen-refusing-to-wrap-what-to-do but my code did not.

Looks like my top-most Component had a style containing alignItems: 'center', which caused the above problem to happen for me. Have a look here: https://rnplay.org/apps/Usel7g (change the parent from fixedContainer to brokenContainer to see things break).

I still believe this represents some sort of bug in React, and should remain open. (Or at least, something that needs more thorough documentation to clarify the layout model here in this action-at-a-distance of sorts), but at least I have a workaround that works for me.

[fov42550564]

just use View wrap it,

<View style={{width: screen.width}}>
    <Text>Long truncated text...</Text>
</View>

it work fine for me

[jzzj]

I have a very simple solution:
change this:
<Text numberOfLines={1} >long text....</Text>
to:
<View style={{flex: 1}}> <Text numberOfLines={1} >long text....</Text> </View>

This solved my problem.

[jzzj]

@facebook-github-bot fixed.

[oureta]

numberOfLines does not work on Text nested inside Text

[ericnakagawa]

Hi @doochik, are you still experiencing this issue? Seems like the suggested solution of wrapping it in a is workable?

As for numberOfLines not working properly, @oureta can you put together a PR?

[oureta]

Hi @ericnakagawa, i just do JS.

[doochik]

@ericnakagawa I've tested my examples in RN 0.40. This example works as expected

                <View style={{padding: 20, flexDirection: 'row'}}>
                    <Text numberOfLines={1} style={{flex: 1, overflow: 'hidden'}}>
                        3. This text is truncated 3. This text is truncated 3. This text is truncated
                    </Text>
                    <Text>Fixed text</Text>
                </View>

[mr-piratman]

@doochik it is working only for numberOfLines={1}.
if you use a different number of lines it makes all of the shorter...