Android version of JavaScriptCore's Array.keys() method returns object without Symbol.iterator method

[fotonmoton]

• [+] 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 release: https://github.com/facebook/react-native/releases

Related issues

#15902 #21550 #20902 #18426 #19737

Environment

React Native Environment Info:
System:
OS: Linux 4.15 Ubuntu 18.04.1 LTS (Bionic Beaver)
CPU: (8) x64 Intel(R) Core(TM) i7-8550U CPU @ 1.80GHz
Memory: 2.44 GB / 15.55 GB
Shell: 4.4.19 - /bin/bash
Binaries:
Node: 8.14.0 - /usr/bin/node
Yarn: 1.12.3 - /usr/bin/yarn
npm: 6.4.1 - /usr/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
Android SDK:
API Levels: 27, 28
Build Tools: 27.0.3, 28.0.3
System Images: android-27 | Google APIs Intel x86 Atom, android-27 | Google Play Intel x86 Atom, android-28 | Google APIs Intel x86 Atom
IDEs:
Android Studio: 3.2 AI-181.5540.7.32.5056338
npmPackages:
react: 16.6.1 => 16.6.1
react-native: 0.57.7 => 0.57.7

Description

JavaScriptCore's Array.keys() object missing Symbol.iterator method.

Reproducible Demo

//Code:
const arr_iterator = Array(10).keys();
const is_iterator = arr_iterator[Symbol.iterator];
const arr = Array.from(arr_iterator);
console.log('typeof arr_iterator[Symbol.iterator]: ' + typeof is_iterator);
console.log('Array.isArray(arr): ' + Array.isArray(arr));
console.log('arr: ' + JSON.stringify(arr));

/*
Logs from android emulator:
12-08 17:27:24.107 31835 32034 I ReactNativeJS: typeof arr_iterator[Symbol.iterator]: undefined
12-08 17:27:24.107 31835 32034 I ReactNativeJS: Array.isArray(arr): true
12-08 17:27:24.107 31835 32034 I ReactNativeJS: arr: []

Logs from Google Chrome console:
App.js:25 typeof arr_iterator[Symbol.iterator]: function
App.js:26 Array.isArray(arr): true
App.js:27 arr: [0,1,2,3,4,5,6,7,8,9]
*/

[fotonmoton]

When I try to apply this solution I get:

Objects are not valid as a React child (found: object with keys {$$typeof, type, key, ref, props, _owner, _store}). If you meant to render a collection of children, use an array instead.
throwOnInvalidObjectType
    ReactNativeRenderer-dev.js:9616:6
reconcileChildFibers
    ReactNativeRenderer-dev.js:10679:31
reconcileChildren
    ReactNativeRenderer-dev.js:11114:6
updateHostRoot
    ReactNativeRenderer-dev.js:11612:6
beginWork
    ReactNativeRenderer-dev.js:12597:28
performUnitOfWork
    ReactNativeRenderer-dev.js:15852:21
workLoop
    ReactNativeRenderer-dev.js:15892:41
renderRoot
    ReactNativeRenderer-dev.js:15996:15
performWorkOnRoot
    ReactNativeRenderer-dev.js:16976:17
performWork
    ReactNativeRenderer-dev.js:16877:24
performSyncWork
    ReactNativeRenderer-dev.js:16838:14
requestWork
    ReactNativeRenderer-dev.js:16703:19
scheduleWork
    ReactNativeRenderer-dev.js:16504:16
scheduleRootUpdate
    ReactNativeRenderer-dev.js:17191:15
updateContainerAtExpirationTime
    ReactNativeRenderer-dev.js:17225:28
updateContainer
    ReactNativeRenderer-dev.js:17315:4
render
    ReactNativeRenderer-dev.js:17971:20
renderApplication
    renderApplication.js:59:34
run
    AppRegistry.js:101:10
runApplication
    AppRegistry.js:195:26
__callFunction
    MessageQueue.js:349:47
<unknown>
    MessageQueue.js:106:26
__guard
    MessageQueue.js:297:10
callFunctionReturnFlushedQueue
    MessageQueue.js:105:17

[matthargett]

can you try 0.58 rc1 and see if the newer JSC on Android helps resolve this issue?

[fotonmoton]

@matthargett will try today, thanks.

[fotonmoton]

@matthargett same. Without polyfill Array(10).keys() returns object without @@iterator method and when I apply polyfill I get Objects are not valid as a React child (found: object with keys {$$typeof, type, key, ref, props, _owner, _store}). If you meant to render a collection of children, use an array instead..
How can I verify that I run newer JSC?

My steps where:

1. run react-native init test
2. cd test
3. yarn upgrade react-native@next
4. yarn react-native upgrade

I also try to remove ios and android folders completely after 3 step and run yarn react-native eject instead of 4th step.

[hramos]

The JSC in Android was updated in December, it's in master. The new JSC will be part of the 0.59 release. Can you verify on master and let us know if it's still an issue?

[fotonmoton]

how can I get master branch version? If I do yarn add react-native@facebook/react-native#master resolving deps takes ages and I stop it. What I do:

1. react-native init testJSC
2. yarn remove react-native
3. yarn add react-native@facebook/react-native#master
4. wait for endless resolving

[hramos]

It's not trivial, you'd need to build from source: http://facebook.github.io/react-native/docs/building-from-source

The 0.59 RC is scheduled to be cut this week, at which point you'll be able to install @next from npm.

[fotonmoton]

My bad, on step 3 I type wrong command, should be yarn add react-native@facebook/react-native#master. But after upgrading and deleting android folder and running yarn react-native eject I have got error:

yarn react-native  eject
yarn run v1.13.0
$ /tmp/testJSC/node_modules/.bin/react-native eject
Generating the Android folder.

ENOENT: no such file or directory, lstat '/tmp/testJSC/node_modules/react-native/@react-native-community/cli/templates/HelloWorld/android'

Error: ENOENT: no such file or directory, lstat '/tmp/testJSC/node_modules/react-native/@react-native-community/cli/templates/HelloWorld/android'
    at Object.lstatSync (fs.js:841:3)
    at Object.lstatSync (/tmp/testJSC/node_modules/graceful-fs/polyfills.js:295:24)
    at walk (/tmp/testJSC/node_modules/@react-native-community/cli/build/util/walk.js:16:11)
    at copyProjectTemplateAndReplace (/tmp/testJSC/node_modules/@react-native-community/cli/build/generator/copyProjectTemplateAndReplace.js:49:3)
    at Object.eject [as func] (/tmp/testJSC/node_modules/@react-native-community/cli/build/eject/eject.js:72:5)
    at Promise.resolve.then (/tmp/testJSC/node_modules/@react-native-community/cli/build/cliEntry.js:86:22)
    at process._tickCallback (internal/process/next_tick.js:68:7)
    at Function.Module.runMain (internal/modules/cjs/loader.js:745:11)
    at startup (internal/bootstrap/node.js:283:19)
    at bootstrapNodeJSCore (internal/bootstrap/node.js:743:3)

[fotonmoton]

Ok, I wait rc and test version from npm then.

[guhungry]

I confirm that 0.59.0 works fine