CODEWITHSUNDEEP
androidreact-nativerealmrealm-js
Mujtaba Fadhil
Mujtaba Fadhil

Reputation: 6116

Realm on react-native : can't get results when not debugging

I can't get the results of any query when not debugging, but works perfectly when debugging

Also I noticed that Realm is behaving very differently according to wither debugging or not

This is just a summary of the idea :

I'm printing object.constructor.name to find the type of the object

When debugging (Remotely using Chrome or Safari) :

let realm = new Realm(config);
realm.constructor.name --> will print (Realm)

let dogs = realm2.objects('Dog');
dogs.constructor.name --> will print (Results)

(inserting few dogs)

for (let oneDog of dogs) {
    oneDog.constructor.name --> will print (RealmObject)
} --> works perfectly

But when not debugging everything is different:

let realm = new Realm(config);
realm.constructor.name --> will print (Object)

let dogs = realm2.objects('Dog');
dogs.constructor.name --> will print nothing

(inserting few dogs)

for (let oneDog of dogs) {
    oneDog.constructor.name --> not compiled
} --> will give the error below

enter image description here

TypeError: undefined is not a function (evaluating ‘_iterator[typeof
Symbol === “function” ? Symbol.iterator : “@@iterator”]()')

I'm not sure if it's a bug or a problem with my codes

Version of Realm and Tooling

Full code :

import React, { Component } from 'react';
import { View, Text } from 'react-native';

const Realm = require('realm');

export default class Page3Screen extends Component {
  state = { messege : 'no messege' }

  componentWillMount() {
    const config = {
      schema: [{ name: 'Dog', properties: { name: 'string' } }],
    };
    let realm = new Realm(config);
    console.log(realm.constructor.name);
    this.setState({ messege: realm.constructor.name });

    realm.write(() => {
      realm.create('Dog', { name: 'Zozo' });
    });

    let dogs = realm.objects('Dog');
    // console.log(dogs.constructor.name);
    // this.setState({ messege: dogs.constructor.name });

    // for (let oneDog of dogs) {
    //    console.log(oneDog.constructor.name);
    //    this.setState({ messege: oneDog.constructor.name });
    // }
  }

  render() {
    return (
      <View style={{ alignSelf: 'stretch', flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>{this.state.messege}</Text>
      </View>
    );
  }
}

Upvotes: 2

Views: 2549

Answers (2)

Mujtaba Fadhil
Mujtaba Fadhil

Reputation: 6116

I found that the problem is related to this issue

For whatever reason react-native on android is shipping an old as shit version of JSC, one that doesn't have support for language features that current react version needs to work 🙄

it was solved by updating the JSC version that ships with android, but I've used JSC version 216113 instead of the latest to keep minSdkVersion 17 instead of 21

Here are the instructions:

Follow steps below in order for your React Native app to use new version of JSC VM on android:

1. Add `jsc-android` to the "dependencies" section in your `package.json`:
```
dependencies {
+  "jsc-android": "^216113.0.0",
```

then run `npm install` or `yarn` (depending which npm client you use) in order for the new dependency to be installed in `node_modules`

2. Modify `andorid/build.gradle` file to add new local maven repository packaged in the `jsc-android` package to the search path:
```
allprojects {
    repositories {
        mavenLocal()
        jcenter()
        maven {
            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
            url "$rootDir/../node_modules/react-native/android"
        }
+       maven {
+           // Local Maven repo containing AARs with JSC library built for Android
+           url "$rootDir/../node_modules/jsc-android/android"
+       }
    }
}
```

3. Update your app's `build.gradle` file located in `android/app/build.gradle` to force app builds to use new version of the JSC library as opposed to the version specified in [react-native gradle module as a dependency](https://github.com/facebook/react-native/blob/e8df8d9fd579ff14224cacdb816f9ff07eef978d/ReactAndroid/build.gradle#L289):

```
}

+configurations.all {
+    resolutionStrategy {
+        force 'org.webkit:android-jsc:r216113'
+    }
+}

dependencies {
    compile fileTree(dir: "libs", include: ["*.jar"])
```

4. You're done, rebuild your app and enjoy updated version of JSC on android!

Upvotes: 1

Soorena
Soorena

Reputation: 4452

when you are in debugging mode, react-native runs js code inside your browser instead of the device. since you say it works fine on browser but breaks on device, I suggest you check the following:

  • check if device is connected to the same network
  • run this : adb reverse tcp:8081 tcp:8081
  • check if dev server is running or not, you can run it with: $ react-native start

  • some of the JS features need polyfill in react-native such as Symbol. so add the following to index.js:

    import 'core-js/es6/symbol';
import 'core-js/fn/symbol/iterator';

  • in very very rare situations you have differences between JS engine on browser and android/ios device

good luck.

Upvotes: 0

Related Questions