Closed
Description
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:
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.