How to implement ListView in ReactNative with custom cell component?

Question

I am building a ReactNative + Redux app and am using the ListView component.

In _renderRow() of the ListView, I'd like to return my own cell component (called JobDetailCell that only receives the data in its props from the component that is managing the ListView (called JobsRootComponent).

I came up with the following code so far:

JobsRootComponent.js

import React, {
  Component,
  StyleSheet,
  Text,
  View,
  ListView,
  ActivityIndicatorIOS,
  NavigatorIOS,
  TouchableHighlight
} from 'react-native'

import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import { fetchJobs } from '../actions/Actions'
import { JobDetailCell } from './JobDetailCell'
import { JobDetailComponent } from './JobDetailComponent'

class JobsRootComponent extends Component {

  ...

  _renderRow(rowData) {
      const title = rowData.title
      const subtitle = rowData.by
      return (
        <JobDetailCell title={title} subtitle={subtitle}></JobDetailCell>
      )
  }

  ...

  render() {
    return (
        <ListView
          style={styles.container}
          dataSource={this.props.dataSource}
          renderRow={this._renderRow}
        />
      )
  }

  ...

}

JobDetailCell.js

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

export default class JobDetailCell extends Component {

  render() {
    return (
      <View style={styles.cellContainer}>
        <Text style={styles.cellTitle}>{this.props.title}</Text>
        <Text style={styles.cellSubtitle}>{this.props.subtitle}</Text>
      </View>
    )
  }

}

However, when I am running the app, I get the following errors in the chrome dev console:

ExceptionsManager.js:76 Warning:

React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of StaticRenderer.

Can someone tell me what I am doing wrong here?

Please add the import/require section of the files, these kind of problems rely in that part a lot of the time. — Moti Azu
– Moti Azu, Commented Mar 30, 2016 at 10:07

Moti Azu · Accepted Answer · 2016-03-30 10:26:28Z

5

The problem is that you are importing your components in the wrong way.

This line

import { JobDetailCell } from './JobDetailCell'

Is equivalent to this line:

var JobDetailCell = require('./JobDetailCell').JobDetailCell;

Which gets undefined since you exported the component itself, which has no field named JobDetailCell.

This is how you should import your component:

import JobDetailCell from './JobDetailCell'

answered Mar 30, 2016 at 10:26

Moti Azu

5,4521 gold badge25 silver badges33 bronze badges

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

1 Comment

Dhaval Jardosh Over a year ago

Wasted hours behind it and then finally. Thank you.

Collectives™ on Stack Overflow

How to implement ListView in ReactNative with custom cell component?

JobsRootComponent.js

JobDetailCell.js

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

JobsRootComponent.js

JobDetailCell.js

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related