Horizontal alignment of items in a list

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()}>
              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) => (
                    title={product.name.substring(0, 30)}
                    titleStyle={{fontSize: 14}}
                    descriptionStyle={{fontSize: 11}}
                    right={()=>(<Text>{product.cost} €</Text>)}


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

Leave a Comment