react-native TextInput clips text

Question

I'm trying to create an expandable text view. I've tried using the onChangeContentSize property of TextInput, but it doesn't update the width. If I don't explicitly set the width, the content TextInput expands as I type, which is the desired behavior, but it starts to clip/obscure the text as it grows.

Hopefully the issue can be fixed with styling, but so far I haven't been able to. It's almost like I need be able to set an overflow prop that doesn't exist.

Code is:

  render() {

    console.log(this.state.width)
    let inputStyle = {
        color: '#fff',
        // width: this.state.width,
        fontSize: 60,
        lineHeight: 60,
        fontFamily: 'GT-Walsheim-Bold'
    }

      return (
        <View style={styles.containerStyle}>
          <Text style={styles.labelStyle}>{this.props.label}</Text>
          <TextInput
            secureTextEntry={this.props.secureTextEntry}
            placeholder={this.props.placeholder}
            autoCorrect={false}
            style={inputStyle}
            value={this.props.value}
            onChangeText={this.props.onChangeText}
            autoFocus={true}
            autoCapitalize={this.props.capitalize}
          />
        </View>
      );
  }

const styles = {

  labelStyle: {
    fontSize: 36,
    fontFamily: 'GT-Walsheim-Bold'
  },
  containerStyle: {
    height: 200,
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    textAlign: 'center'
  }
};

Dev Env: OSX 10.12 react-native: 16.3.1 react: 0.55.4 platform: Android

See images attached:

Before typing:

After typing:

Answer 1

After much tinkering, it turns out the clipping is related to the custom font. Substituting the font solves the problem. It seems the expanding TextInput's default behavior when no width is set is doing exactly what I need it to.