List item Error '1 is not a function' in react-native

Question

I am using List from 'react-native-paper' to display an order list. when I click on the order, 'displays the order total and the products. I added:

left = {product.quantity}

so that on the left of the products I have the quantity of the products displayed. However, this line gives me an error:

TypeError: 1 is not a function (near '... left...')

My data array looks like this:

[   Object {
    "amount": 2671.25,
    "balance": 0,
    "client_id": 1,
    "created_at": "2020-05-06T17:42:26Z",
    "discount": 0,
    "discount_type": 0,
    "id": 19,
    "items": Array [
      Object {
        "cost": 2400,
        "currency": "EUR",
        "description": "",
        "name": "Apple MacBook Air 15'' LED 500 Go SSD 32 Go",
        "product_id": 5,
        "quantity": 1,
        "tax_rate_id": 1,
      },
      Object {
        "cost": 54.25,
        "currency": "EUR",
        "description": "L’agrafeuse pince Rapid Maxi SP19 est conçue pour agrafer tous vos documents en toute simplicité. Ce modèle est capable d’agrafer jusqu’à 20 feuilles en une seule fois. Léger, il assure une prise en main agréable et facile. Robuste, cette agrafeuse convient à un usage fréquent pour les travaux d’emballage et de bureau. Elle peut contenir jusqu’à 210 agrafes SP19/6. Pratique, le stock d’agrafes est visible sur le côté pour que vous puissiez recharger l’agrafeuse à temps. Le chargement s'effectue facilement par l’arrière. Cet article est disponible en deux couleurs : chrome et rose. Il est livré avec 200 agrafes.",
        "name": "Agrafeuse pince Rapid Maxi SP 19 – capacité de 20 feuilles",
        "product_id": 2,
        "quantity": 5,
        "tax_rate_id": 4,
      },
    ],
    "po_number": "",
    "public_notes": "TEST 6 : Acomptes",
    "quote_date": "2020-05-06",
    "quote_number": "D1460019",
    "quote_status": 40,
    "terms": "",
    "updated_at": "2020-05-06T18:08:06Z",   },

I hope you can guide me to find out what is wrong. Thank you And this is my code;

<ScrollView>
      {this.state.displayArray !== null && this.state.displayArray.length > 0 ? (
        this.state.displayArray.map((item, i) => (
          <List.Section title={item.created_at.substring(0, 10)} titleStyle={{fontSize: 16, color: '#013243'}} key={i.toString()}>
            <List.Accordion
              title={item.quote_number}
              style={{width: '98%'}}
              left={props => <List.Icon {...props} color={'#F78400'} icon={require('../../../assets/images/logo-weecoop.png')} />}>
              <List.Item titleStyle={{color: '#F78400'}} title={`Total: ${item.amount} €`}/>
              {
                item.items.map((product, i) => (
                <List.Item 
                  title={product.name.substring(0, 30)} 
                  titleStyle={{fontSize: 14}} 
                  description={product.description} 
                  descriptionStyle={{fontSize: 11}}
                  descriptionNumberOfLines={4}
                  key={i.toString()}              
                  left={product.quantity}
                />                         
                ))
              }
            </List.Accordion>            
          </List.Section>
          ))
      ) : (
        <View style={styles.container}>
            <Text>{"\n\n" + (this.state.displayArray === null ? i18n.t("orders.search") : i18n.t("orders.nodata")) + "\n\n\n"}</Text>
            <Button
              color="#F78400"
              title= 'Back'
              onPress={() => this.props.navigation.goBack()}>BACK
            </Button>
          </View>
      )}
</ScrollView>
    );
  }
}

Answer 1

You are passing product.quantity to left

But the documentation says

left Type: (props: { color: string; style: { marginLeft: number; marginRight: number; marginVertical?: number; }; }) => React.ReactNode

Callback which returns a React element to display on the left side.

https://callstack.github.io/react-native-paper/list-item.html#left

If you want to show the quantity in the left you should do

left={()=>(<Text>product.quantity<Text>)}