react-native: TextInput on focus - Maximum call stack size exceeded

Please provide all the information requested. Issues that do not follow this format are likely to stall.

Description

Upon focusing on a text field i get a “Maximum call stack size exceeded”, this only happens when DEV = true

The call stack is calling “isValidArgument” an infinite amount of times, when i follow it the function seems only to run when DEV is true.

React Native version:

Run react-native info in your terminal and copy the results here.

System:
    OS: macOS 10.15.6
    CPU: (8) x64 Intel(R) Core(TM) i7-3770 CPU @ 3.40GHz
    Memory: 195.08 MB / 16.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 8.15.1 - /usr/local/bin/node
    Yarn: Not Found
    npm: 6.13.7 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.9.3 - /Users/Dellybro/.rvm/gems/ruby-2.6.3/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 13.4, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
    Android SDK: Not Found
  IDEs:
    Android Studio: 3.5 AI-191.8026.42.35.5900203
    Xcode: 11.4.1/11E503a - /usr/bin/xcodebuild
  Languages:
    Java: 11.0.2 - /usr/bin/javac
    Python: 2.7.16 - /usr/bin/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.13.1 => 16.13.1 
    react-native: 0.63.2 => 0.63.2 
  npmGlobalPackages:
    *react-native*: Not Found

Steps To Reproduce

Provide a detailed list of steps that reproduce the issue.

I’m not really sure how to reproduce this error, because it doesn’t happen on every input field. It randomly started happening, and idk what caused it.

Expected Results

I expect that when DEV is true and false, i should be able to focus on an text input

Snack, code example, screenshot, or link to a repository:

Please provide a Snack (https://snack.expo.io/), a link to a repository on GitHub, or provide a minimal code example that reproduces the problem. You may provide a screenshot of the application if you think it is relevant to your bug report. Here are some tips for providing a minimal example: https://stackoverflow.com/help/mcve

[[33,45,71,71,71,71,71,71,71,54,71,71,71,71,71,71,71],[13,5,3,3,3,3,3,3,0,0,3,3,3,3,3,3,0],[[{"componentStack":null,"id":1,"originalMessage":"Maximum call stack size exceeded","extraData":{"suppressRedBox":true,"rawStack":"RangeError: Maximum call stack size exceeded\n    at isValidArgument (http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:2680:57)\n    at isValidArgument (http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:2700:52)\n    at isValidArgument (http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:2700:52)\n    at isValidArgument (http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:2700:52)\n    at isValidArgument (http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:2700:52)\n    at isValidArgument (http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:2700:52)\n    at isValidArgument (http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:2700:52)\n    at isValidArgument (http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:2700:52)\n    at isValidArgument (http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:2700:52)\n    at isValidArgument (http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:2700:52)"},"isFatal":true,"stack":[{"column":56,"methodName":"isValidArgument","file":"http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false","lineNumber":2680,"arguments":[]},{"column":51,"methodName":"isValidArgument","file":"http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false","lineNumber":2700,"arguments":[]},{"column":51,"methodName":"isValidArgument","file":"http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false","lineNumber":2700,"arguments":[]},{"column":51,"methodName":"isValidArgument","file":"http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false","lineNumber":2700,"arguments":[]},{"column":51,"methodName":"isValidArgument","file":"http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false","lineNumber":2700,"arguments":[]},{"column":51,"methodName":"isValidArgument","file":"http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false","lineNumber":2700,"arguments":[]},{"column":51,"methodName":"isValidArgument","file":"http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false","lineNumber":2700,"arguments":[]},{"column":51,"methodName":"isValidArgument","file":"http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false","lineNumber":2700,"arguments":[]},{"column":51,"methodName":"isValidArgument","file":"http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false","lineNumber":2700,"arguments":[]},{"column":51,"methodName":"isValidArgument","file":"http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false","lineNumber":2700,"arguments":[]}],"message":"RangeError: Maximum call stack size exceeded","name":"RangeError"}],["didSendNetworkData"],["didReceiveNetworkResponse"],["didReceiveNetworkData"],["didReceiveNetworkIncrementalData"],["didReceiveNetworkDataProgress"],["didCompleteNetworkResponse"],[{"responseType":"blob","url":"http://localhost:8081/symbolicate","data":{"trackingName":"unknown","string":"{\"stack\":[{\"file\":\"http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false\",\"methodName\":\"isValidArgument\",\"arguments\":[],\"lineNumber\":2680,\"column\":56},{\"file\":\"http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false\",\"methodName\":\"isValidArgument\",\"arguments\":

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 9
Comments: 17 (3 by maintainers)

Most upvoted comments

I had the exact same problem. The fix might just require find & replace all instances to currentlyFocusedField

handleKeyboardDidShow = (event) => {
    if (this.props.disabled) return
    const { height: windowHeight } = Dimensions.get('window')
    const keyboardHeight = event.endCoordinates.height
    const currentlyFocusedField = TextInputState.currentlyFocusedField()
    if (currentlyFocusedField !== null)
      UIManager.measure(
        currentlyFocusedField,
        (originX, originY, width, height, pageX, pageY) => {
          const fieldHeight = height
          const fieldTop = pageY
          const androidBonus = Platform.OS === 'android' ? scale(30) : scale(10)
          const gap =
            windowHeight -
            keyboardHeight -
            (fieldTop + fieldHeight + androidBonus)
          if (gap >= 0) {
            return
          }
          Animated.timing(this.state.shift, {
            toValue: gap,
            duration: 150,
            useNativeDriver: true,
          }).start()
        }
      )
  }

Helper

Meycon on Dec 31, 2020

I had the exact same problem. But the problem was not in TextInput, but in a component that wrapped TextInput. For me it was InputScrollView from library react-native-input-scroll-view. In this library it was fixed by this commit https://github.com/baijunjie/react-native-input-scroll-view/commit/f4361eb871d70cd947fced7fa3189c81d05458b3

marinashe on Sep 1, 2020

Is there no solution?

Meycon on Dec 31, 2020

I’ve got more information about this.

This is happening when the keyboard is toggled, after untoggling the keyboard this no longer happens. And as i said this is not on all fields, only a select amount of fields and it’s the same fields. But the weird part is, all the pages have the exact same stuff, keyboard aware view, and text input.

Dellybro on Sep 29, 2020