Search code examples
listviewfirebasereact-nativecomponentslistviewitem

list view with array of elements


I am trying to pass an array of elements to a list view then render them within my comp

enter image description here

Datasource

listenForItems(itemsRef) {
    itemsRef.on('value', (snap) => {

      // get children as an array
      var items = [];
      snap.forEach((child) => {
        items.push({
          date: child.val().date,
          name: child.val().name,
          email: child.val().email,
          phone: child.val().phone,
          notes: child.val().notes,
          items: child.val().items,
          _key: child.key
        });
      });

      this.setState({
        dataSource: this.state.dataSource.cloneWithRows(items)
      });

    });
  }

Component

render () {
    return (
      <View style={styles.container}>
        <View style={styles.orderDetail}>
          <View style={styles.buttons}>
            <Text style={styles.name}>{this.props.item.name}</Text>
            <Text style={styles.item}>{this.props.item.items.name}</Text>
            <Text style={styles.price}>{this.props.item.items.price}</Text>
          </View>
          <Text style={styles.notes}>NOTES</Text>
          <Text style={styles.note}>{this.props.item.notes}</Text>
        </View>
        <View style={styles.buttons}>
          <TouchableOpacity style={styles.rejectButton} onPress={ this._rejectOrder }>
            <Text style={styles.buttonText}>REJECT</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.acceptButton} onPress={ this._acceptOrder }>
            <Text style={styles.buttonText}>ACCEPT</Text>
          </TouchableOpacity>
        </View>
      </View>
    )

Solution

  • It looks like one of your <Text> elements contains something more than a string.

    I would bet on: <Text style={styles.note}>{this.props.item.notes}</Text>

    you need to make sure this.props.item.notes is a string instead of an object