react native paper list accordion

Question

I am having a problem with react-native paper list accordion it is not working on android! I mean the list is showing but not when you click the accordion :(. on ios everything is working fine! any idea on how I can solve that :( thx

I am using the latest android version on sumsung

<List.Accordion
    key={id}
    theme={{ colors: { primary: '#4169e1' } }}
    style={{ backgroundColor: 'white', marginBottom: 1 }}
    onPress={() => { LayoutAnimation.easeInEaseOut(); }}
    title={title}>
    <Divider />
    <List.Item
        titleStyle={styles.textContainer}
        title={
            <View>
                <Text style={styles.text}>{text}</Text>
            </View>
        } key={index} />
</List.Accordion>

Your code worked for me, so I can only guess the problem is somewhere else. — user692918, Dec 06 '20 at 02:53

score 1 · Answer 1 · answered Sep 05 '21 at 21:08

You need to put your <List.Accordion> item inside the <List.AccordionGroup> or <List.Section>

<List.AccordionGroup title={title} key={id}>
    <List.Accordion
        key={id}
        theme={{ colors: { primary: '#4169e1' } }}
        style={{ backgroundColor: 'white', marginBottom: 1 }}
        onPress={() => { LayoutAnimation.easeInEaseOut(); }}
        title={title}>
        <Divider />
        <List.Item
            titleStyle={styles.textContainer}
            title={
                <View>
                    <Text style={styles.text}>{text}</Text>
                </View>
            } key={index} />
     </List.Accordion>
</List.AccordionGroup>

score 0 · Answer 2 · answered Jun 19 '23 at 00:56

Wrapping by a FlatList solved my problem, the data parameter would be array of items

<FlatList data={data}
          renderItem={({item}) => (

          <List.Accordion
               theme={{ colors: { primary: '#4169e1' } }}
               style={{ backgroundColor: 'white', marginBottom: 1 }}
               onPress={() => { LayoutAnimation.easeInEaseOut(); }}
               title={item.title}>
               <Divider />
               <List.Item
                   titleStyle={styles.textContainer}
                   title={
                   <View>
                        <Text style={styles.text}>{text}</Text>
                   </View>
                   } key={index} />
          </List.Accordion>

          )}
/>

Also you can try: minWidth: '100%' for outer element and remove FlatList — Bardia Mazaheri, Jun 19 '23 at 03:21

score -1 · Answer 3 · answered Jun 19 '23 at 01:27

const toggleAccordion = () => {
    LayoutAnimation.easeInEaseOut();
    setExpanded(!expanded);
  };

<List.Accordion
      key={id}
      theme={{ colors: { primary: '#4169e1' } }}
      style={{ backgroundColor: 'white', marginBottom: 1 }}
      title={title}
      expanded={expanded}
      onPress={toggleAccordion}>
      <Divider />
      <List.Item
        titleStyle={styles.textContainer}
        title={
          <View>
            <Text style={styles.text}>{text}</Text>
          </View>
        }
        key={index}
      />
    </List.Accordion>

You define the toggleAccordion function that toggles the expanded state of the accordion using the setExpanded function. You then pass this function to the onPress handler of the List.Accordion component.

By adding the expanded prop to the List.Accordion component, You can tell the component whether it should be expanded or collapsed by default. When the onPress handler is triggered, the toggleAccordion function is called, which updates the expanded state of the accordion and causes it to expand or collapse accordingly.

Please check and let me know. Thank you.

Welcome back to Stack Overflow. It looks like it's been a while since you've posted and may not be aware of the current policies since most or all 6 of recent answers appear likely to have been entirely or partially written by AI (e.g., ChatGPT). Please be aware that [posting of AI-generated content is banned here](//meta.stackoverflow.com/q/421831). If you used an AI tool to assist with any answer, I would encourage you to delete it. Thanks! — NotTheDr01ds, Jun 19 '23 at 16:37
**Readers should review this answer carefully and critically, as AI-generated information often contains fundamental errors and misinformation.** If you observe quality issues and/or have reason to believe that this answer was generated by AI, please leave feedback accordingly. The moderation team can use your help to identify quality issues. — NotTheDr01ds, Jun 19 '23 at 16:37

react native paper list accordion

3 Answers3