Realm with React Native ListView will not render

Question

Working on a react-native app that records coordinates of where a user walked in a 'memory', and storing the memories (with a description) and a set of coordinates in Realm.

I've used ListView in a project with a different database, but using the realm-listview I'm unable to get the descriptions of the memories rendered on a page.

Storing my realm setup in one file that looks like the below. Main action is storing the data in the Memory/Coordinate Schemas, and getting the data to use in the ListView using the RealObjects.countMemories() function. It is correctly returning an array of realm objects when I look at it in the console.

export default class RealmObjects {}
RealmObjects.MemorySchema = {
  name: 'Memory',
  properties: {
    description: 'string',
    coords: {type: 'list', objectType: 'Coordinate'},
  }
}

RealmObjects.CoordinateSchema = {
  name: 'Coordinate',
  properties: {
    longitude: 'double',
    latitude: 'double',
    timeStamp: 'double'
  }
}

RealmObjects.saveMemory = function(coordinates, description) {
  console.log('---------------realm write-------------')
  console.log(description)
  console.log(coordinates)
    realm.write(() => {
      let memory = realm.create('Memory', {
        description: description,
        id: 1
      });
      let coordList = memory.coords
      for (var i = 0; i < coordinates.length; i++) {
        console.log(i)
              console.log(coordinates[i].timeStamp)

        coordList.push({longitude: coordinates[i].longitude,
          latitude: coordinates[i].latitude,
         timeStamp: coordinates[i].timeStamp});
        console.log(memory.coords[i].timeStamp)
      }

    });
}

RealmObjects.countMemories = function() {
  console.log(realm.objects('Memory'));
  return realm.objects('Memory');
}

import Realm from 'realm';
let realm = new Realm({schema: [RealmObjects.MemorySchema, RealmObjects.CoordinateSchema]});

In my component, I'm importing the ListView component like this: import { ListView } from 'realm/react-native'; .

Constructor setup like this:

  constructor() {
    super();
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    this.state = {
      dataSource: ds.cloneWithRows(RealmObjects.countMemories()),
    };
    console.log('datasource')
    console.log(this.state.dataSource)
  }

Render function setup like this:

  render() {
    return (
      <View style={styles.container}>
        <TouchableHighlight style={styles.buttonLeft} onPress={() => this.goBack()}>
          <Text>Back</Text>
        </TouchableHighlight>
        <ListView style={styles.listview}
          dataSource={this.state.dataSource}
          renderRow={(rowData) => <Text>something: {rowData.description}</Text>}
        />
      </View>
    );
  }

This render method will not produce anything in the ListView. For now, I'm just trying to get a list of the descriptions of the memories to display on screen.

New to both react-native and realm, so not sure if my problems reside here or somewhere else. Any help is appreciated!

EDIT: Changed the render row and row data items to look like this to log data, which logs the correct descriptions of each row in the console, but still does not display anything on the screen:

  renderRow(rowData) {
    console.log('my data');
    console.log(rowData.description);

    return (
        <Text>{rowData.description}</Text>
    );
  }

  render() {
    return (
      <View style={styles.container}>
        <TouchableHighlight style={styles.buttonLeft} onPress={() => this.goBack()}>
          <Text>Back</Text>
        </TouchableHighlight>
        <ListView style={styles.listview}
          dataSource={this.state.dataSource}
          renderRow={(rowData) => this.renderRow(rowData)}
        />
      </View>
    );
  }

EDIT: Current styles:

const styles = StyleSheet.create({
  button: {
    paddingHorizontal: 12,
    alignItems: 'center',
    marginHorizontal: 10,
    top: 50,
    backgroundColor: 'rgba(236,64,122,0.7)',
    paddingVertical: 12,
  },
  listview: {
    top: 100,
    backgroundColor: 'rgba(236,64,122,0.7)',
  },
  container: {
    flex: 1,
    flexDirection: 'column',
    marginTop: 60,
  },
  buttonRight: {
    position: 'absolute',
    top: 0,
    right: 5,
    backgroundColor: 'rgba(236,64,122,0.7)',
    paddingHorizontal: 18,
    paddingVertical: 12,
    borderRadius: 20,
  },
  buttonLeft: {
    position: 'absolute',
    top: 0,
    left: 5,
    backgroundColor: 'rgba(236,64,122,0.7)',
    paddingHorizontal: 18,
    paddingVertical: 12,
    borderRadius: 20,
  }
});

Answer 1

I too had faced the same problem. But I converted the response from the realm into array and then passed it to flat list and it worked like a charm.

async getAllPrinterArray() {
          realm = await this.getRealMObject();
          favoritePrinterArray = realm.objects(constants.SCHEMA_SAVE_PRINTERS);
          console.log(favoritePrinterArray);

          if (favoritePrinterArray.length > 0) {
            this.setState({ enable: false });
            arr4 = Array.from(favoritePrinterArray);
          }
          return arr4;
      }

<FlatList
     data={printerObject}
     numColumns={2}
     renderItem={({ item }) => this.renderListRow(item)}
/>