Horizontal alignment of items in a list

by

I have a list with an accordion in react-native, made using the List package from react-native-paper. It works but I would like a helping hand to improve the aesthetic aspect.
As you can see in the screenshot below, the number of objects is not aligned with the other elements. Likewise, but this is a bonus, I would have liked the title to be centered, between quantity and price. And there it is a little complicated, I try to add styles but that does not apply.
I tried that in list.item and in list.accordion:

style={{justifyContent: ‘space-between’, alignItems: ‘center’}}

I would like to know if you can give me any leads, advice or your solution.

Thanks for any help

<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.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={()=>(<Text>{product.quantity}</Text>)}
                    right={()=>(<Text>{product.cost} €</Text>)}
                  />
                ))
              }
            </List.Accordion>
          </List.Section>

screencap

108 thoughts on “Horizontal alignment of items in a list”

Leave a Comment