Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React-native can't access Parse data

I'm trying to use Parse as the data provider for a ListView in a Reactive Native app. I have followed the Parse guide regarding subscribing to a query but for some unknown reason the the data source is empty. I have verified and writing a test object to Parse works fine.

It seems that observe() should be called before getInitialState() or am I missing something?

'use strict';
var React = require('react-native');
var Strings = require('./LocalizedStrings');
var Parse = require('parse').Parse;
var ParseReact = require('parse-react');

Parse.initialize("api_key_here", "api_key_here");

/*
var TestObject = Parse.Object.extend("TestObject");
var testObject = new TestObject();
testObject.save({foo: "bar"}).then(function(object) {
  alert("yay! it worked");
});
*/

var {
  View,
  Text,
  ListView,
  StyleSheet
} = React;

var styles = StyleSheet.create({
  mainContainer: {
    flex: 1,
    padding: 30,
    marginTop: 65,
    flexDirection: 'column',
    justifyContent: 'center',
    backgroundColor: '#fff'
  },
  title: {
    marginBottom: 20,
    fontSize: 22,
    textAlign: 'center',
    color: '#000'
  },
});

var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}) // assumes immutable objects

var WorkoutList = React.createClass({
  mixins: [ParseReact.Mixin],

  observe: function() {
    return {
      workouts: (new Parse.Query("Workout")).descending("createdAt")
    };
  },

  getInitialState: function() {
    return {dataSource: ds.cloneWithRows(this.data.workouts)}
  },

  renderRow: function() {
    return (<View><Text>Testing</Text></View>)
  },

  render: function() {
    return (
      <View style = {{flex: 1, flexDirection: 'column'}}>
          {Strings.workoutsTabTitle}
          <ListView
            ref = "listview"
            dataSource = {this.state.dataSource}
            renderRow = {this.renderRow}
            automaticallyAdjustContentInsets = {false}
            keyboardDismissMode = "onDrag"
            keyboardShouldPersistTaps = {true}
            showsVerticalScrollIndicator = {true}
            style = {styles.mainContainer}
          />
      </View>
    )
  }
})

module.exports = WorkoutList;

enter image description here

like image 708
intellion Avatar asked May 23 '15 17:05

intellion


2 Answers

I didn't use ParseReact but the Parse Rest API to fetch data from Parse. The following code is called from componentDidMount.

fetch("https://api.parse.com/1/classes/Workout", {
  headers: {
    "X-Parse-Application-Id": "Your application Id",
    "X-Parse-REST-API-Key": "Your API Key"
  }
})
  .then((response) => response.json())
  .then((responseData) => {
    this.setState({
      dataSource: this.state.dataSource.cloneWithRows(responseData.results),
      loaded: true,
    })
  })
  .catch(function(error) {
    console.log(error)
  })
 .done();

Using this approach you need to wait until the data is loaded before displaying the ListView. Use this.state.loaded to know when this is the case.

like image 170
Stefan Klasen Avatar answered Sep 19 '22 22:09

Stefan Klasen


This works too.

observe: function() {
  return {
    user: ParseReact.currentUser,
    abc: (new Parse.Query('abc')).descending('createdAt')
  };
},

getInitialState: function () {
  return {
    dataSource: new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}),
  };
},

render: function() {
  return (
    <View style={styles.full}>
      <ListView
        dataSource={this.state.dataSource.cloneWithRows(this.data.abc)}
        renderRow={this.renderRow}
      />
    </View>
  );
},

Hope it helps! Cheers!

like image 43
mutp Avatar answered Sep 19 '22 22:09

mutp