Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
sophiebits opened this issue Apr 23, 2015 · 0 comments
Closed

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

sophiebits opened this issue Apr 23, 2015 · 0 comments
Labels
Resolution: Locked This issue was locked by the bot.

Comments

@sophiebits
Copy link
Contributor

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.

sophiebits added a commit to sophiebits/react-native that referenced this issue Apr 23, 2015
Fixes facebook#979.

Previously, a Text whose width is determined automatically (as opposed
to set by a container) would position the text incorrectly after an
update to the text *if* the text's width did not change (i.e., when
changing only digits in a font with tabular numbers).

Every time RCTShadowText's RCTMeasure runs, it sets the text container's
size to be the maximum allowed size for the text. When RCTText's
drawRect is called later, it relied on layoutSubviews having been called
to set the text container's size back to the proper width. But if
RCTMeasure returned the same dimensions as last time, then RCTText's
frame wasn't reset and so layoutSubviews was never re-called. With this
change, we set the textContainer's size each time we draw the text.

We could also fix this by using a different NSTextContainer instance in
RCTMeasure. Not sure what the pros and cons of that are.
@facebook facebook locked as resolved and limited conversation to collaborators May 29, 2018
@react-native-bot react-native-bot added the Resolution: Locked This issue was locked by the bot. label Jul 22, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Resolution: Locked This issue was locked by the bot.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants