Unable to create linking objects

Goals

can create linking objects

Actual Results

App freeze when make a linking objects. Even I reload app, app still be freezed. There is no error throw.

Steps to Reproduce

code below

Code Sample

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

const Realm = require('realm');

const CarSchema = {
  name: 'Car',
  properties: {
    make: 'string',
    model: 'string',
    miles: { type: 'int', default: 0 },
    owners: { type: 'linkingObjects', objectType: 'Person', property: 'cars' }
  }
};
const PersonSchema = {
  name: 'Person',
  properties: {
    name: 'string',
    birthday: 'date',
    cars: 'Car[]',
    picture: 'string'
  }
};

var realm = new Realm({schema: [CarSchema, PersonSchema], schemaVersion: 0 })

export default class App extends Component {

  state = {
    cars: null,
    people: null
  }

  linkCarToPerson = () => {
    realm.write(function() {
      const myCar = realm.create('Car', {
        make: 'Honda',
        model: 'Civic',
        miles: 1000,
      });
      realm.create('Person', {
        name: 'Adrian',
        birthday: new Date(),
        picture: 'data',
        cars: [myCar],
      });
    });
  }

  showCarOwner = () => {
        const myCar = realm.objects('Car')
        alert(JSON.stringify(myCar))
      }

  componentDidMount() {
    this.setState({
      cars: realm.objects('Car') ? realm.objects('Car'): null,
      people: realm.objects('Person')? realm.objects('Person'): null,
    })
  }

  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', }}>
        <Text onPress={() => this.linkCarToPerson()} style={{ alignSelf: 'center', marginTop: 20 }}>
          Link Car to Person
        </Text>
        <Text onPress={() => this.showCarOwner()} style={{ alignSelf: 'center', marginTop: 20 }}>
          Show the Car own
        </Text>
        <Text style={{ alignSelf: 'center', marginTop: 20 }}>
          Cars: {JSON.stringify(this.state.cars)}
        </Text>
        <Text style={{ alignSelf: 'center', marginTop: 20 }}>
          People: {JSON.stringify(this.state.people)}
        </Text>
      </View>
    );
  }
}

Version of Realm and Tooling

• Realm JS SDK Version: 3.6.3
• Node or React Native: 0.61.5
• Client OS & Version: Mac OS Catalina 10.15.2
• Which debugger for React Native: None (app still freeze if debugging)

[bmunkholm]

Thanks a lot for helping out here @Shumuu ! 🥇 Closing this now as it seems resolved now @hauhuynh1208 ?

[Shumuu]

@hauhuynh1208 Not sure if I’ll be able to take a closer look today but I did notice that you still stringify here

        <Text style={{alignSelf: 'center', marginTop: 20}}>
          Cars: {JSON.stringify(this.state.cars)}
        </Text>
        <Text style={{alignSelf: 'center', marginTop: 20}}>
          People: {JSON.stringify(this.state.people)}
        </Text>

You’re trying to display a circular structure. You’re trying to display the cars, which have owners, which have cars, which have owners … etc. The app is freezing since this structure has no end and the Phone is trying to get to the end.

Change it to the following so you only display the count of the cars and people, and if they are null or undefined, display 0.

        <Text style={{alignSelf: 'center', marginTop: 20}}>
          Cars: {this.state.cars ? this.state.cars.length : 0}
        </Text>
        <Text style={{alignSelf: 'center', marginTop: 20}}>
          People: {this.state.people ? this.state.people.length : 0}
        </Text>

I am using a ternary Operator.

this.state.cars ? is the Condition. I am checking if its truthy (not null and not undefined) What follows is the value when it is truthy this.state.cars.length followed by a : with the false value (when it is null or undefined) 0.

I hope that helps and solves your problem.