reactrails-react-native-client icon indicating copy to clipboard operation
reactrails-react-native-client copied to clipboard

Comments

Open badnorseman opened this issue 9 years ago • 2 comments

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 }) };

badnorseman avatar Jul 10 '16 21:07 badnorseman

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.

justin808 avatar Jul 11 '16 00:07 justin808

@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.

badnorseman avatar Jul 11 '16 01:07 badnorseman