0

I want to render a 2-column title in the header of the Accordion component from React Native Paper.

The design requires a controlled group of several accordions with each accordion's title property to be in the following format: displaying 2 separate pieces of text on 1 line, with some fixed space between them:

XXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

The idea is that the 2nd column of text in the header should line up with each accordion above & below.

I tried creating the list of titles using React-Native-Paper's DataTables and also with the stock React Native FlatList. Using the DataTables seemed a bit of overkill and I couldn't get it to align as desired so I tried the FlatList next and had better success with it--at least initially.

I rendered the FlatList using flexDirection: 'row' on the parent View and flex: 3 & flex: 4 on the 2 child Views.

In isolation it works as expected as you can see in the following Snack example.

However, when passing a rendered FlatList to the title property of the React-Native-Paper List.Accordion it appears to lose the flex spacing as shown in this Snack example, so the 2nd column of header text does not align left.

Any suggestions on how to achieve this?

A comparison of how I want the titles to render and how they are currently rendering

For what it's worth, the client's request is this app will only ever be run on an Android Tablet, so iOS and phones are of no real concern.

Thanks!

JG.
  • 11
  • 1
  • 2

1 Answers1

0

I have not been able to "split" the title into multiple columns.

But, the List.Accordion actually has three columns built-in: left, title and right. You may be able to do something creative with this.

Christian Davén
  • 16,713
  • 12
  • 64
  • 77