[IOS] Animate a views left position affect the size of its child text components

[jacobrosenskold]

Environment

Environment:
  OS: macOS High Sierra 10.13.5
  Node: 9.3.0
  Yarn: Not Found
  npm: 5.6.0
  Watchman: 4.9.0
  Xcode: Xcode 9.4.1 Build version 9F2000
  Android Studio: 3.1 AI-173.4670197

Packages: (wanted => installed)
  react: ^16.4.1 => 16.4.1
  react-native: ^0.55.4 => 0.55.4

Description

I'm trying to animate a views left position using an Animated.View component. The view contains some different components but for simplicity I've only included two text components wrapped in an extra view.
The problem is that when animating the left position to a minus value to move the view out of the screen a bit, the text components size reduces and the text gets truncated. If I remove the view that wrappes the text components, it works as expected, i.e. the text size doesn't change.

First it looks likes

After pressing the button twice, i.e. animating the left position to -100 and then back to 0 it looks like

Reproducible Demo

export default class Screen extends Component {
  anim = new Animated.Value(0);
  isLeft = true;

  render() {
    return (
      <View>
        <TouchableOpacity
          onPress={() => {
            Animated.timing(this.anim, {
              toValue: this.isLeft ? -100 : 0,
              duration: 500
            }).start();
            this.isLeft = !this.isLeft;
          }}
        >
          <Text>Animate left position</Text>
        </TouchableOpacity>

        <Animated.View
          style={{
            left: this.anim, // same effect if changed to marginLeft.
            height: 44,
            alignItems: 'flex-start',
            backgroundColor: 'grey',
            paddingHorizontal: 15,
            marginTop: 5
          }}
        >
          <View>
            <Text style={{ backgroundColor: 'rgb(255, 0, 0)' }}>This is some text</Text>
            <Text style={{ backgroundColor: 'rgb(0, 255, 51)' }}>More text</Text>
          </View>
        </Animated.View>
      </View>
    );
  }
}

[mysport12]

Instead of using ‘left’, try using ‘translatex’. It worked for us in our swipeable component that faced the same issue you reported here.

style={{ transform: [{ translateX: contentPosition }] }}

[jacobrosenskold]

That worked. Thank you very much!