import React from 'react';
import { View, ListView, ActivityIndicator } from 'react-native';
import { connect } from 'react-redux';
import { ItemOverView } from '../../components/common';
import * as actions from '../../actions';
class AwaitingScreen extends React.Component {
static navigationOptions = {
header: null,
};
state = { loading: true };
componentWillMount() {
this.props.getAwaitingOrders();
this.createDataSource(this.props);
}
componentWillReceiveProps(nextProps) {
this.setState({ loading: false });
this.createDataSource(nextProps);
}
createDataSource({ orders }) {
const ds = new ListView.DataSource({
rowHasChanged: (r1, r2) => r1 !== r2
});
this.dataSource = ds.cloneWithRows(orders);
}
renderListView() {
if (this.state.loading) {
return (<ActivityIndicator
size='large'
color='#397af8'
/>
);
}
return (
<ListView
enableEmptySections
dataSource={this.dataSource}
renderRow={this.renderRow}
/>
);
}
renderRow = (order) => {
return (
<ItemOverView
item={order}
/>
);
}
render() {
return (
<View>
{this.renderListView()}
</View>
);
}
}
const mapStateToProps = state => {
return {
awaitingOrders: state.orders.awaitingOrders,
statusCodes: state.orders.statusCodes
};
};
export default connect(mapStateToProps, actions)(AwaitingScreen);
the error is for the
this.createDataSource(this.props) as is doesn't recognise it as object,
first the awaitingOrder is an empty array, then when i request to a server, i get a array...
For example [{ "product": "productname"}, {"product": "anotherproduct"}]
but i am not able to render the listview for some reason
INITIAL STATE = awaitingOrders: []
when i put this.createDataSource(['hello','hello']);
it works..but i can't find anything wrong in my code too
It would be really helpful if someone will help