Text component won't wrap text react-native

Question

The above image shows what I get I want the text to be wrapped the picture to be visible

The code is

<View style={{
      flex: 1,
      flexDirection: 'row',
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: '#F5FCFF',
    }}>
    <Image
      source={require('./default.png')}
      style={{
        width: 5,
        height: 81,
        flex: 1
      }}
      />
    <View style={{flex: 2, flexDirection: 'column'}}>
      <Text numberOfLines= {1}
        maxLength={10}
        truncatePosition="middle"
         style={{fontSize: 15,
          marginBottom: 8,
          textAlign: 'center',

        }}>
        {rowData.userFileName}
      </Text>
      <Text style={{textAlign: 'center'}}>size: {rowData.size}</Text>
    </View>
  </View>

I think it's just a styling issue but tried everything read about flex layout changed to values nothing works.

I want something like this

+---------------------------------+
|+-------++----------------------+|
||       ||        Name          ||
|| Image ||                      ||
||       ||        Size          ||
|+-------++----------------------+|
+---------------------------------+

I followed the official tutorial and got something similar but the image gets cut of and the name if long is the only thing displayed(refer to the Image).

P.s: I am new to css-style styles so cut me some slack if the question is stupid.

Thank you,

Have you tried with `word-wrap: break-word`, adding after `textAlign: 'center',` in style of Text element — Avijit, May 26 '16 at 06:54
Do you want two text component to be wrapped inside a view. give us more clarification. Try { flexWrap: 'wrap'} — Ashok R, May 26 '16 at 07:18
Refer to the edited question also i followed http://stackoverflow.com/questions/30594080/how-to-have-ellipsis-effect-on-text But it is not scalable!! — Ronak Khandelwal, May 26 '16 at 07:49
I am running your code locally. its working properly. if you want understand how layout is appearing you can add `borderWidth: 1.0, borderColor: 'orange'` in your component style and see. Here is [link](https://facebook.github.io/react-native/) which give same effect which you looking for. Look into Flexbox and Styling Section. — Ashok R, May 26 '16 at 10:01

score 0 · Answer 1 · edited Jun 20 '20 at 09:12

0

I am running your code locally. it's working properly. If you want to understand how the layout is appearing, you can add borderWidth: 1.0, borderColor: 'orange' in your component style.

Here is a link which give same effect which you looking for. Look into Flexbox and Styling Section.

by Ashok

edited Jun 20 '20 at 09:12

Community

1
1

answered Feb 27 '17 at 23:21

Matheus Avellar

1,507
1
22
29

Text component won't wrap text react-native

1 Answers1