javascript - Horizontal alignment of items in a list

Question

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>

question from:https://stackoverflow.com/questions/65951873/horizontal-alignment-of-items-in-a-list

Answer 1

It can be corrected by applying style to the left and right props as follows:

<List.Item
title={product.name.substring(0, 30)}
titleStyle={{fontSize: 14}}
description={product.description}
descriptionStyle={{fontSize: 11}}
descriptionNumberOfLines={4}
key={i.toString()}
left={()=>(<Text style = {styles.textStyle}>{product.quantity}</Text>)} // styled
right={()=>(<Text style = {styles.textStyle}>{product.cost} €</Text>)} // styled
/>

const styles = Stylesheet.create({
    textStyle: {
        marginTop: 4, // you may adjust this value according to your requirement
        fontSize: 14,
    }

})