Create a grid eith react native

Question

I am trying to display element in a grid. Each line should contain as much as possible of elements depending on the screen size. I found a similar post in the forum but the code seems old and I am very new with react native, I was not able to run it. Can you please help me? This is my current code

    export default class Container extends Component {
  constructor() {
    super();
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    this.state = {
      dataSource: ds.cloneWithRows(['row 1', 'row 2']),
    };
  }

  render() {
    return (
      <ListView
        dataSource={this.state.dataSource}
        renderRow={(rowData) => <Text>{rowData}</Text>}
      />
    );
  }
}

I get an error on the line dataSource={this.state.dataSource} : undefined is not an object (evaluating 'new _reactNativeElements.ListView.DataSource

Abdellah Stands with Palestine · Accepted Answer · 2017-10-23T17:30:18.680

You need to make sure you are importing ListView from react-native

import { ListView } from 'react-native'

The error states that ListView is undefined.

Note that it's deprecated and you should use FlatList instead.

DEPRECATED - use one of the new list components, such as FlatList or SectionList for bounded memory use, fewer bugs, better performance, an easier to use API, and more features. Check out this blog post for more details.

Create a grid eith react native

1 Answers1