React Native Elements ListItem.Accordion - Align chevron icon to right of title

60 views Asked by At

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.

enter image description here

<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>
                              </>
                            }
                          >
0

There are 0 answers