Search code examples
react-nativetextinputreact-native-textinput

Cutted <TextInput> on left for Android (BOLD text bug)

I have react-native TextInput that automatically grows if I input long strings. On iOS it works as expected, but on Android, it starts cutting-off left side after 5-7 characters. The longer the string - the bigger cut-off. I tried to remove margins and paddings - no change. I looked into props in documentation - couldn't find a solution yet. I can scroll to see the cutted-off string, but I would like to see it without scrolling unless there is no more space to grow.

          <TextInput
            key={key}
            style={{
                flex:1, 
                fontSize: '1.2rem',
                fontWeight: 'bold',
            }}
            value={this.state.value}
            onChangeText={this._onChangeText}
            underlineColorAndroid="transparent"
            autoCapitalize="none"
            autoCompleteType='off' // Android
            autoCorrect={false} // iOS
            contextMenuHidden={true}
            importantForAutofill="no"
            keyboardAppearance="dark"
            maxLength={150}
            returnKeyType={returnKeyType}
            spellCheck={false}
            keyboardType={Platform.OS==='ios'
              ?'default'
              :"visible-password" // to disable autocorrect suggestions on android
            } 
          />

enter image description here

Solution

  • When I was preparing the question I found out that setting fontWeight: 'bold' causes this issue. But I am still looking at how to make it work with the bold text (if possible).

    enter image description here

    I tried to find a font which is bold without bold property, but it behaves the same... So it seems that TextInput works fine only with the default font, without bold property, which is unhandy.

    Issue on github: https://github.com/facebook/react-native/issues/30317