[Android] [RN 58.3] Calling substring() on a String that contains an emoji causes "Error: Exception in HostFunction: basic_string::resize"

🐛 Bug Report

On Android (I couldn’t test on iOS), with react-native 0.58.3, try to call substring(0,1) on a string that begins with an emoji. You should get this error: [Error: Exception in HostFunction: basic_string::resize] I guess this is linked to some bad conversion from UTF 16 to UTF 8.

This is not happening on 0.57.3 for instance (which I was using earlier for the same project)

Code Example

const text = '🙃blablabla'
try {
    const newText = text.substring(0, 1)
    Alert.alert(newText)
  } catch(e) {
    console.error(e)
}

Environment

React Native Environment Info:
System:
  OS: macOS High Sierra 10.13.5
  CPU: (4) x64 Intel(R) Core(TM) i5-5257U CPU @ 2.70GHz
  Memory: 41.97 MB / 8.00 GB
  Shell: 3.2.57 - /bin/bash
Binaries:
  Node: 10.15.0 - ~/.nvm/versions/node/v10.15.0/bin/node
  Yarn: 1.12.3 - /usr/local/bin/yarn
  npm: 6.4.1 - ~/.nvm/versions/node/v10.15.0/bin/npm
  Watchman: 4.7.0 - /usr/local/bin/watchman
SDKs:
  iOS SDK:
    Platforms: iOS 10.3, macOS 10.12, tvOS 10.2, watchOS 3.2
  Android SDK:
    API Levels: 23, 24, 25, 26, 27, 28
    Build Tools: 23.0.1, 23.0.2, 25.0.0, 25.0.1, 25.0.2, 25.0.3, 26.0.1, 26.0.2, 26.0.3, 27.0.1, 27.0.3, 28.0.0, 28.0.3
    System Images: android-27 | Google APIs Intel x86 Atom, android-28 | Google APIs Intel x86 Atom_64
IDEs:
  Android Studio: 3.1 AI-173.4670197
  Xcode: 8.3.3/8E3004b - /usr/bin/xcodebuild
npmPackages:
  react: 16.6.3 => 16.6.3 
  react-native: 0.58.3 => 0.58.3 
npmGlobalPackages:
  react-native-git-upgrade: 0.2.7

[levibuzolic]

@OlivierFreyssinet this is a limitation of multi-byte characters in JS strings. While ideally it shouldn’t crash/error so badly in React Native it is something that should be accounted for in user-land JS.

'🙃'.length
// 2

As you can see this is a multi-byte character so you’ll need to use multi-byte compatible operations if you want to handle the emoji correctly.

As @wakeless pointed out using Array.from() should be safer in most cases however it will give surprising results on emojis that use joining characters like 👩‍❤️‍💋‍👩:

'👩‍❤️‍💋‍👩'.length
// 11

Array.from('👩‍❤️‍💋‍👩')
// ["👩", "", "❤", "", "", "💋", "", "👩"]

If you want to handle these cases, a library like https://www.npmjs.com/package/runes might useful.

import runes from "runes";

runes('👩‍❤️‍💋‍👩')
// ["👩‍❤️‍💋‍👩"]

[ericlewis]

I can confirm that this issue occurs on iOS as well, it appears something else has changed. I am looking in to it.

Error: Exception in HostFunction: basic_string