Comments

[dansjensen]

Why not use https://facebook.github.io/react-native/docs/touchableopacity.html#touchableopacity
instead of:

const TouchableElement = Platform.OS === 'android' ?
      TouchableNativeFeedback :
      TouchableHighlight;

Don't you get warnings about missing key?

renderRow={(comment) => <Comment {...comment} />}

Do you normally have actions in Constructor?

constructor(props) {
    super(props);
    const ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });
    this.state = { dataSource: ds.cloneWithRows(this.props.comments) };
    this.props.actions.fetchComments();
  }

I would define dataSource in state like this:

this.state = { dataSource: new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 }) };

[justin808]

We should fetch the data in componentDidMount

https://facebook.github.io/react/docs/component-specs.html#mounting-componentdidmount

Because we don't want a race condition between render and loading. We also should have a spinner while we're waiting for the data to come back.

[dansjensen]

@alleycat-at-git

I was thinking adding these statements to CommentsContainer and let it control data to CommentsComponent. We would also need to initialize the action fetch data from Container rather than inside Component. What do you think?

 componentDidMount() {
    this.setState({
      dataSource: this.state.dataSource.cloneWithRows(this.props.customer.behaviors || [])
    })
  }
  componentWillReceiveProps(nextProps) {
    this.setState({
      dataSource: this.state.dataSource.cloneWithRows(nextProps.customer.behaviors || [])
    })
  }

I used different approaches for ListView, but the datasource definition is usually only set once in the component. I tend to define datasource in state.

this. state = { datasource: new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 }) }

When I use it as shown above.

Beforehand, I had this pattern in the Component, but I am thinking that it could be in Container instead and remove state from the component.