Skip to content

Text layout bug on update with non-left textAlign #979

Closed
@sophiebits

Description

@sophiebits

It seems that if you have a <Text> with textAlign: 'center', the text is drawn in the wrong place after an update if the size of the text remains the same. A little hard to describe, but here's a repro case:

image

The initial render is fine, but subsequent renders show the misaligned text.

/**
 * @providesModule MoviesApp
 * @flow
 */

'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
} = React;

var MoviesApp = React.createClass({
  render: function() {
    var x = Math.floor(Math.random() * 10);

    return (
      <View style={styles.container}>
        <Text style={{textAlign: 'center', fontSize: 40}}>
          {x}0000000
        </Text>
      </View>
    );
  },
  componentDidMount: function() {
    setInterval(() => this.forceUpdate(), 300);
  }
});

var styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    flex: 1,
    margin: 20,
    backgroundColor: 'white',
  },
});

AppRegistry.registerComponent('MoviesApp', () => MoviesApp);

module.exports = MoviesApp;

Unclear to me why this happens – if you give a fixed width to the <Text> then the problem goes away, and if you introduce a small bit of random fuzz in RCTShadowText's RCTMeasure so that the frame changes on every render, the problems also disappears.

I did my best to dig through the code but couldn't figure out what was up. @nicklockwood @a2 @tadeuzagallo maybe you have ideas?

Thanks @MichelleTodd for finding this.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions