string startsWith produces false negatives

[armadillojim]

• Review the documentation: https://facebook.github.io/react-native
• Search for existing issues: https://github.com/facebook/react-native/issues
• Use the latest React Native version: https://github.com/facebook/react-native/releases
• Run react-native info in your terminal and paste its contents under "Environment"
• Let us know how to reproduce the issue. Include a code sample, share a project, or
  share an app that reproduces the issue using https://snack.expo.io/

Environment

Environment:
  OS: Linux 4.9
  Node: 8.11.2
  Yarn: 1.6.0
  npm: 5.6.0
  Watchman: Not Found
  Xcode: N/A
  Android Studio: Not Found

Packages: (wanted => installed)
  react: 16.3.1 => 16.3.1
  react-native: ~0.55.2 => 0.55.4

Description

I have a component that was filtering a list of suggestions, and I stumbled on a strange bug. The list was mysteriously not including some items it should have, and I eventually figured out that the Javascript engine was producing incorrect results on strings that had UTF8 characters in them. That is, someString.startsWith(someOtherString) was producing false when it shouldn't have.

Steps to Reproduce

console.log('mother'.startsWith('m'));
console.log('mother\'s'.startsWith('m'));
console.log('mother’s'.startsWith('m'));

Note the Unicode apostrophe in the last case.

If it makes a difference, I used create-react-native-app to bootstrap my app, and I'm running it in Expo.

Expected Behavior

true
true
true

Actual Behavior

true
true
false

[TheSavior]

I get true for all three use cases:

Does this repro with 0.56.0?

[armadillojim]

@TheSavior Thanks for the suggestion. However, I don't see any difference in the version of JavaScriptCore between 0.55 and 0.56. Both https://github.com/facebook/react-native/blob/0.55-stable/ReactAndroid/build.gradle and https://github.com/facebook/react-native/blob/0.56-stable/ReactAndroid/build.gradle use WebKit/webkit/38b15a3ba3c1b0798f2036f7cea36ffdc096202e.

Are you using react-native in development mode? I ask because I see in the documentation that that uses V8 instead of JavaScriptCore. I also tried this in Chrome's JavaScript console (which uses V8), and got the expected result (3 trues). Or am I confused about that? I'm using create-react-native-app and expo, and I'm testing on an Android device (and not a simulator).

[armadillojim]

https://github.com/WebKit/webkit/tree/38b15a3ba3c1b0798f2036f7cea36ffdc096202e is from October 13, 2014. It's entirely possible there was a bug in WebKit that has been fixed sometime in the past three years. I was able just now to test in Safari, and Safari's JavaScript console produces the correct result.

[TheSavior]

Ah, yeah, this sounds like a bug in JSC.

#19737

[armadillojim]

Ok, thanks!

Yeah I saw that JavaScriptCore hasn't been updated since the beginning of react-native. That'll be a bear to upgrade carefully. D'oh. Oh well.

Maybe it'd be worth noting in the "JavaScript Environment" documentation page which version is in use (and its release date)?

[pppluto]

seem like startswith cant work well if a str contain Chinese

[arthakdoo]

const text = 'abcde 😎';   // note the emoji

text.startsWith('abc'); // <-- returns false (incorrect)
text.indexOf('abc'); // <-- returns zero (correct)

Node: 8.12.0
React: 16.8.2
React Native: 0.57.8
@babel/core: 7.3.3
@babel/preset-env: 7.3.1
@babel/preset-react: 7.0.0
Platform: Android

[armadillojim]

@MrPluto and @dmaksimovic, React Native 0.56, 0.57, and 0.58 all continued to use the same JSC. They finally updated it, though. See #19737 (comment)

I double checked, and you can see the change live now in 0.59. https://github.com/facebook/react-native/blob/0.58-stable/ReactAndroid/build.gradle#L148 shows the old JSC, and https://github.com/facebook/react-native/blob/0.59-stable/ReactAndroid/build.gradle#L136 is now evergreen.

I haven't tried upgrading yet myself, but it seems that should fix this issue.