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

[Ahad-Wasim]

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.

[react-native-bot]

Thanks for posting this! It looks like your issue may refer to an older version of React Native. Can you reproduce the issue on the latest release, v0.55?

Thank you for your contributions.

[Ahad-Wasim]

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

[GeorgianSorinMaxim]

I have the same issue on RN version 0.55.4 and React version 16.3.1.

The stack trace is:
*** Terminating app due to uncaught exception 'NSInvalidArgumentException', reason: ' *** -[_UIFieldEditorLayoutManager glyphRangeForTextContainer:]: given container does not appear in the list of containers for this NSLayoutManager.' *** First throw call stack: (0x180ffe364 0x180244528 0x180ffe2ac 0x18b61314c 0x18ad6bc0c 0x18a51ddc0 0x18b5d95bc 0x18b5de8d0 0x18b5dfe0c 0x18b5e1b60 0x18b60ff9c 0x18adfba8c 0x18adfb944 0x18a560d2c 0x18504156c 0x18abfb374 0x18abfb320 0x18abfb068 0x184f38a18 0x1850472fc 0x185040f98 0x184fb2424 0x184fd9b90 0x18a740b10 0x18ae37bb8 0x18ae307c0 0x180fa697c 0x180fa68fc 0x180fa6184 0x180fa3d5c 0x180ec3e58 0x182d70f84 0x18a54367c 0x100c9087c 0x1809e056c) libc++abi.dylib: terminating with uncaught exception of type NSException (lldb)

[tobyclemson]

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.

[ol3j]

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.'

[bpeyrouBDHIS]

I have the same error.
The TextInput is a password, when the length of the characters overflows the width of the TextInput and it is blurred, the app crashes and I get this message

[_UIFieldEditorLayoutManager glyphRangeForTextContainer:]: given container does not appear in the list of containers for this NSLayoutManager.'
*** First throw call stack:
(
    0   CoreFoundation                      0x000000010e72f1e6 __exceptionPreprocess + 294
    1   libobjc.A.dylib                     0x000000010d0b5031 objc_exception_throw + 48
    2   CoreFoundation                      0x000000010e7a4975 +[NSException raise:format:] + 197
    3   UIFoundation                        0x000000011660683a -[NSLayoutManager glyphRangeForTextContainer:] + 109
    4   UIKit                               0x000000010ad7e237 -[_UIFieldEditorLayoutManager _completeBulletRenderingForTextContainer:] + 79
         ...
libc++abi.dylib: terminating with uncaught exception of type NSException

[wangghon]

same issue on react native 0.54.2

Fatal Exception: NSInvalidArgumentException
0 CoreFoundation 0x182f6ad8c __exceptionPreprocess
1 libobjc.A.dylib 0x1821245ec objc_exception_throw
2 CoreFoundation 0x182f6ac6c -[NSException initWithCoder:]
3 UIFoundation 0x18dc7eae8 -[NSLayoutManager glyphRangeForTextContainer:]
4 UIKit 0x18d476e08 -[_UIFieldEditorLayoutManager _completeBulletRenderingForTextContainer:]
5 UIKit 0x18ce43700 -[UIFieldEditor layoutManager:didCompleteLayoutForTextContainer:atEnd:]
6 UIFoundation 0x18dc595e0 -[NSLayoutManager(NSPrivate) _fillLayoutHoleForCharacterRange:desiredNumberOfLines:isSoft:]
7 UIFoundation 0x18dc59da0 -[NSLayoutManager(NSPrivate) _fillLayoutHoleAtIndex:desiredNumberOfLines:]
8 UIFoundation 0x18dc630f4 _NSFastFillAllLayoutHolesUpToEndOfContainerForGlyphIndex
9 UIFoundation 0x18dc7bb58 -[NSLayoutManager ensureLayoutForTextContainer:]
10 UIKit 0x18ccdb668 -[UIFieldEditor layoutSubviews]
11 UIKit 0x18cb7b6f4 -[UIView(CALayerDelegate) layoutSublayersOfLayer:]
12 QuartzCore 0x1870f1fec -[CALayer layoutSublayers]
13 QuartzCore 0x1870f617c CA::Layer::layout_if_needed(CA::Transaction)
14 UIKit 0x18cb93bf4 -[UIView(Hierarchy) layoutBelowIfNeeded]
15 UIKit 0x18cc8ac2c -[UITextField layoutSubviews]
16 UIKit 0x18cb7b6f4 -[UIView(CALayerDelegate) layoutSublayersOfLayer:]
17 QuartzCore 0x1870f1fec -[CALayer layoutSublayers]
18 QuartzCore 0x1870f617c CA::Layer::layout_if_needed(CA::Transaction)
19 QuartzCore 0x187062830 CA::Context::commit_transaction(CA::Transaction)
20 QuartzCore 0x18708a364 CA::Transaction::commit()
21 QuartzCore 0x18708b1e4 CA::Transaction::observer_callback(__CFRunLoopObserver, unsigned long, void*)
22 CoreFoundation 0x182f12910 __CFRUNLOOP_IS_CALLING_OUT_TO_AN_OBSERVER_CALLBACK_FUNCTION__
23 CoreFoundation 0x182f10238 __CFRunLoopDoObservers
24 CoreFoundation 0x182f10884 __CFRunLoopRun
25 CoreFoundation 0x182e30da8 CFRunLoopRunSpecific
26 GraphicsServices 0x184e15020 GSEventRunModal
27 UIKit 0x18ce4d758 UIApplicationMain
28 networkhub 0x1003e70e8 main (main.m:16)
29 libdyld.dylib 0x1828c1fc0 start

[TimonSotiropoulos]

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

[webartistse]

I can't update my app because of this! Itunes is rejecting the app because it crashes on their test device iOS 11.4.1. Using react 16.3.2 and react native 0.55.3. Does anyone have a solution for this one??

[ajfigueroa]

Is this still an issue in 0.56?

[webartistse]

@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.

[ConstantineDB]

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.

[ajfigueroa]

@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

[webartistse]

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

[jcomplex]

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

[fbartho]

We're exhibiting this issue as well. Still happens on iOS 12

[apexskier]

We're seeing this on password fields in our react native 0.55 app, and in a version built with 0.57.

[taschik]

Same here running on 0.55.4 on iOS 12. Is there any workaround?

[ericlewis]

I think this is related: https://github.com/facebook/react-native/issues/19453

[fbartho]

@taschik We worked around it by dropping the fontFamily if there's data in the input. It's clunky but fine.

[itanandp]

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.

This fixed the issue for me, thank you!

[stale[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[stale[bot]]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.