React Native ToDo app not displaying list view content

Question

We are trying to create a sample todo list application with React Native for a school project. Our issue is that we are not able to view the ListView items. All we are trying to do to at this point is to get an item to show up in a list. We have hardcoded the render to just show "Hello." Unfortunately, we are not seeing anything. We know that the component is being rendered because the console logs are showing output. We have been using this sample for guidance:

https://github.com/joemaddalone/react-native-todo

Here is our code:

ToDoListItem.js

import React, { Component } from 'react';
import {
  Text,
  View
} from 'react-native';
import styles from '../styles/styles';

export default class ToDoListItem extends Component {
  render() {
    console.log ("props: ", this.props)
    var item = this.props.item;
    return(
      <View>
        <View>
          <Text style={{color: 'red'}}>TEST</Text>
          <Text>{item.txt}</Text>
          <Text>Hello</Text>
        </View>
      </View>
    )
  }
}

ToDoList.js

import React, { Component } from 'react';
import {
  Text,
  View,
  ListView
} from 'react-native';
import ToDoListItem from './ToDoListItem';

export default class ToDoList extends Component {
  constructor(props) {
    super(props);
    console.log("props: ", props.items)
  };
  componentWillMount(){
     this.dataSource = new ListView.DataSource({
       rowHasChanged: (r1, r2) => r1 !== r2
     });
  }
  render() {
    var dataSource = this.dataSource.cloneWithRows(this.props.items);
    return(
      <ListView
        dataSource={dataSource}
        renderRow={(rowData, sectionID, rowID) =>
          <ToDoListItem item={rowData}/>
           }
      />);
  };
};

Answer 1

Try this:

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

class ToDoListItem extends Component {
  render() {
    var item = this.props.item;
    return(
      <View>
        <View>
          <Text style={{color: 'red'}}>TEST</Text>
          <Text>{item.txt}</Text>
          <Text>Hello</Text>
        </View>
      </View>
    )
  }
}

class ToDoList extends Component {
  constructor(props) {
    super(props);
  };
  componentWillMount(){
     this.dataSource = new ListView.DataSource({
       rowHasChanged: (r1, r2) => r1 !== r2
     });
  }
  render() {
    var dataSource = this.dataSource.cloneWithRows(['a','b','c']);
    return(
      <View>
        <ListView
        dataSource={dataSource}
        renderRow={(rowData, sectionID, rowID) =>
          { return (<ToDoListItem item={rowData}/>) }
        }
      />
      </View>
      );
  };
};

AppRegistry.registerComponent('App', () => ToDoList)

Yay! Works!

I've merged two components. you can have it separated. Better to render listview inside a view. Make sure your datasource is properly set (this.props)