When using a ListItem (Accordion in this case), the arrow/chevron icon is aligned on the far right. Which means the container is full width. I would like the chevron to be aligned adjacent to the title. This can sort of be achieved by setting a width to the containerStyle. But I want to account for users who set their system font larger, and giving the container a fixed width would cause the ListItem title to break into two lines in that case.
Instead, the goal is for a "flex-start" type of alignment, so that the chevron and title are right next to each other. But I can't figure out the key to achieving this! It seems baked into ListItem to have left, title, and right components, and the chevron seems destined to be a right component and the title full width.
Current situation, with background colors to more easily see stuff.
<ListItem.Accordion
containerStyle={s.accordionContainer} //has the pink background color
icon={
<Icon
name={"chevron-down"}
type="material-community"
color={theme.purple}
style={{backgroundColor: "green"}}
/>
}
content={
<>
<ListItem.Content
style={{
backgroundColor: 'red',
}}>
<ListItem.Title
style={[
{
color: theme.text2,
textDecorationLine: "underline",
},
s.fontSize15,
s.bold,
]}
>
Location Info
</ListItem.Title>
</ListItem.Content>
</>
}
>
