react-native: TextInput Component crashing app when character count exceeds 490 (IOS versions 11.0 or higher only)

The TextInput component on iOS versions of 11 or higher seems to be crashing the entire mobile application when I enter a long text consisting of 490 characters or more. There aren’t any errors that pop up in the Javascript console but our QA engineer found this message below inside their crash log. Note: this is only happening on an actual iPhone device, not a simulator.

Date/Time:           2018-03-27 17:08:24.2634 +0400
Launch Time:         2018-03-27 16:16:23.4539 +0400
OS Version:          iPhone OS 11.2.5 (15D60)
Baseband Version:    1.62.00
Report Version:      104

Exception Type:  EXC_CRASH (SIGKILL)
Exception Codes: 0x0000000000000000, 0x0000000000000000
Exception Note:  EXC_CORPSE_NOTIFY
Termination Reason: Namespace ASSERTIOND, Code 0xbada5e47
Triggered by Thread:  0

Environment

Environment: OS: macOS High Sierra 10.13.2 Node: 8.9.3 Yarn: 1.3.2 npm: 5.5.1 Watchman: 4.9.0 Xcode: Xcode 9.3 Build version 9E145 Android Studio: 2.3 AI-162.4069837

Packages: (wanted => installed) react: 16.0.0 => 16.0.0 react-native: ~0.55.0 => 0.55.0

Steps to Reproduce

  1. Create a TextInput component (The one we used is pasted below)
  2. Enter text until you have reached a count of 490 characters
  3. The app will suddenly crash and you will automatically be taken to the home screen.
    return (
      <TextInput
        accessibilityLabel="ChatInput"
        editable
        multiline
        enablesReturnKeyAutomatically
        placeholder={placeholder}
        placeholderTextColor={placeholderTextColor}
        onChangeText={onChange}
        style={[style, { height: composerHeight }]}
        value={value}
        selectionColor={selectionColor}
        onChange={this.onContentSizeChange}
        underlineColorAndroid="transparent"
        onContentSizeChange={this.onContentSizeChange}
      />
    );

Expected Behavior

The TextInput rendering logic should be completely independent from the character count.

Actual Behavior

The application crashes and we are sent to the home screen.

About this issue

  • Original URL
  • State: closed
  • Created 6 years ago
  • Reactions: 10
  • Comments: 23 (4 by maintainers)

Most upvoted comments

I had a similar issue, my app crashed when number of symbols exceeded the input width. In my case it was fontFamily style applied to TextInput with secureTextEntry={true}. Removing fontFamily solved it for me.

I’m experiencing the same as soon as the TextInput content overflows its width and is then blurred. I’ve also tried RN version 0.55.4 and React version 16.3.1 and the problem persists.

Still experiencing issues on RN 0.56 but the fontFamily workaround does work. Thanks for that @ConstantineDB

@ConstantineDB Thanks, turns out that was the source of issue for me. This looks like an iOS 11 bug as per this Radar: http://www.openradar.me/35278732

@ajfigueroa I made an update to RN 0.56 and have posted an update to iTunes. I will update when I know more! My build has always worked in simulator, on my device via xcode. The very same build that works in Testflight is crashing for the testers at iTunes. I really cant reproduce this but the crashlogs from iTunes leads me to this error. The testers say that the app crashes efter they fill in the username and password on start screen and hit return on the software keyboard.

I am having the same issue here. Any one got an idea on a fix?

This is still an issue on the latest version of React Native

Sorry, late response here. I got my app approved after update to RN 0.56.

I have the same error for string like that qwertywertwQwertywertTy99,99?

*** Terminating app due to uncaught exception ‘NSInvalidArgumentException’, reason: ‘*** -[_UIFieldEditorLayoutManager glyphRangeForTextContainer:]: given container does not appear in the list of containers for this NSLayoutManager.’