logileifs logileifs - 3 months ago 75
Javascript Question

React Native ListView with Realm Results

I am trying to create a react-native ListView that renders the results returned by Realm. I have been following the instructions I have found regarding react-native's ListView and how to use Realm.

However I always get the same error:

Objects are not valid as a React child (found: [object Results]). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method of 'Text'.


From what I understand from the Realm documentation and other articles the Results object is supposed to behave like a javascript list and should therefore be accepted into the cloneWithRows method.

If somebody can please tell me what I am doing wrong or how to fix this it would be much appreciated.

P.S. I have tried both react-native's ListView and Realm's ListView and both behave the same way.

import React, { Component } from 'react';
import {
StyleSheet,
View,
Text,
Navigator,
TouchableHighlight,
TouchableOpacity,
//ListView,
} from 'react-native';
import { ListView } from 'realm/react-native';

import realm from './myrealm'

class contextview extends Component {
getState() {
console.log("getInitialState");
var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
let pictures = [ realm.objects('picture').filtered('new == true') ];
console.log("pictures: " + pictures);
return {
//dataSource: ds.cloneWithRows(['row 1', 'row 2', 'row 3']),
dataSource: ds.cloneWithRows(pictures)
};
}

constructor(props)
{
super(props);
this.state = this.getState();
this.bindMethods();
}

render() {
return (
<ListView
dataSource={this.state.dataSource}
renderRow={(rowData) => <Text>{rowData}</Text>}
/>
);
}
}

Answer

I found the cause which was in my render method,

Instead of:

render() {
  return (
    <ListView
      dataSource={this.state.dataSource}
      renderRow={(rowData) => <Text>{rowData}</Text>}
    />
  );
}

I should have done:

render() {
  return (
    <ListView
      dataSource={this.state.dataSource}
      renderRow={(rowData) => <Text>{rowData.path}</Text>}
    />
  );
}

Since the rowData was an object ReactNative couldn't render it in a Text element

Comments