CODEWITHSUNDEEP
androidiosreactjsreact-native
Jojo Narte
Jojo Narte

Reputation: 3104

Text Alignment not auto justifying in react native

enter image description here

As you could see on the listview where the a subdescription of each should have a long string, the entire text just goes continuously to the right instead of properly aligning itself same as what happened on the description on the blue background.

I find it weird that it is not functioning the same way when it is rendered on the row of the listview.

Your insights would be welcome on how I could solve this issue of styling.

Here is a snippet of the renderRow component 

render() {
    var data = this.props.data;
    var commentor = data.user_id;
    var username = _.chain(this.props.userList)
                    .filter(function(item){
                      return item.id == commentor
                    })
                    .first()
                    .pick('username')
                    .value().username;
    return (
      <View style={styles.container}>
          <Image style={styles.avatar} source={require('../images/avatar.jpg')} />
          <View style={styles.inner_container}>
            <Text style={{fontWeight: '500', fontSize: 13,textAlign:'justify'}}>{username}</Text>
            <Text style={{flex: 1, fontWeight: '300', fontSize: 14, marginTop: 5, textAlign:'justify',allowFontScaling: true}}>
            {data.comment}
            </Text>

          </View>

      </View>
    );
  }

Upvotes: 1

Views: 4739

Answers (1)

Mika Kuitunen
Mika Kuitunen

Reputation: 1350

The problem comes from adding the Image element in line with the text.

I suspect your you have flexDirection: 'row' in your container style, in which case the text will continue to the right instead of wrapping like it does with flexDirection: 'column'.

Edit

The original answer I provided was not the best way to handle the situation.

The right way to go is to wrap the text component in a View with flexDirection: 'column' in the styles. This way all of the content will use FlexBox and the text will wrap correctly.

In this case:

<View style={styles.inner_container}>
  <Text style={{fontWeight: '500', fontSize: 13}}>{username}</Text>
  <View style={{flexDirection: 'column'}}>
    <Text style={{flex: 1, fontWeight: '300', fontSize: 14, marginTop: 5}}>
      {data.comment}
    </Text>
  </View>
</View>

Original answer

I'm not sure it's the best solution, but you can make the flex direction 'column' for your container, then make the avatar position absolute and use margin to position the text where it needs to be. renderRow shouldn't need any modification.

Here's an example of the stylesheet:

var imageSize = 50;

var styles = StyleSheet.create ({
    avatar: {
        position: 'absolute',
        width: imageSize,
        height: imageSize
    },
    container: {
        flexDirection: 'column',
        padding: 10
    },
    inner_container: {
        marginLeft: imageSize,
        paddingLeft: 15
    },
});

Note that I'm using imageSize to set the size of the image as well as margin for the text.

Upvotes: 3

Related Questions