ListView row not rendering in React Native

Question

I have a ListView component which is receiving state updates through redux. The component code is:

import React, {
  Component,
  PropTypes,
  View,
  Text,
  StyleSheet,
  ListView
} from 'react-native';

export default class Feed extends Component {

  constructor(props) {
    super(props);
    this.ds = new ListView.DataSource({rowHasChanged: (row1, row2) => row1 !== row2});
    this.state = {
      dataSource: this.ds.cloneWithRows(this.props.items),
    }
  }

  componentWillReceiveProps(nextProps) {
    this.setState({
      dataSource: this.ds.cloneWithRows(nextProps.items)
    });
  }

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

    return(
      <View>
        <Text>{rowData.body.text}</Text>
      </View>
    );
  }

  render() {
    const style = StyleSheet.create({
      helloWorld: {
        color: 'red',
        textAlign: 'center',
      }
    });
    return (
      <View>
        <ListView dataSource={this.state.dataSource} renderRow={(rowData) => {this.renderRow(rowData)}} />
      </View>
    );
  }
}

Feed.propTypes = {
  items: PropTypes.array.isRequired,
}

The List data is coming from an external callout. When the callout is complete the property items is updated and passed through (using redux in the containing component). The console tells me that renderRow is called with the new data but I am receiving a blank screen still. Any ideas? Expecting this to be something stupid.

This should work, my code is pretty much identical to this.. Only thing I could think of: how large is your container for the View component wrapped around you ListView?Does it have sufficent space to show the row items? — Frederick Motte
– Frederick Motte, Commented Apr 11, 2016 at 13:27

anibalajt · Accepted Answer · 2017-08-25 19:25:21Z

2

Not sure if it's a good solution but I solved it using:

removeClippedSubviews={false}

in Listview Component

edited Aug 25, 2017 at 19:25

user6655984

answered Aug 25, 2017 at 19:24

anibalajt

9867 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Piotr Dawidiuk Over a year ago

Works like a charm, saved my day! :)

ide · Accepted Answer · 2016-04-12 05:54:12Z

1

There's a trivial bug in your renderRow prop:

<ListView
  dataSource={this.state.dataSource}
  renderRow={(rowData) => {this.renderRow(rowData)}}
/>

The function (rowData) => {this.renderRow(rowData)} doesn't return anything. Change it to (rowData) => this.renderRow(rowData).

answered Apr 12, 2016 at 5:54

ide

20.9k6 gold badges72 silver badges113 bronze badges

Collectives™ on Stack Overflow

ListView row not rendering in React Native

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related