Search code examples
react-nativereact-native-paper

How to show up all title and description in List.Accordion and List.Item with react-native-paper


I'm developing a mobile app with react-native-paper, and I'm using List in react-native-paper.

I would like to show up whole message on the List. In default, List omits the part of the message if the message is too long like the gif below.

https://gyazo.com/d60defc5f46b51408d68e793f9365172

I have already tried to change the parameters(head, middle, tail, and clip) of titleEllipsizeMode. However, these parameters didn't work as I expected.

This is my code.

<List.Section theme={{ colors: { primary: 'black' }}}>
              <List.Accordion
                title='Loooooooooooooooooooooooooooong title title title'
                expanded={this.state.expanded}
                onPress={this._handlePress}
              >
                <List.Item
                  title='Looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong title title title'
                  expanded={this.state.expanded}
                  titleEllipsizeMode='tail'
                  titleStyle={{ fontSize: 10 }}
                />
              </List.Accordion>
            </List.Section>

Solution

  • First of all the list title should not be too long as it's against the design guidelines. Normally if you need to have a subtext then it would move underneath it as in the picture below. Gmail-guidelines