CODEWITHSUNDEEP
androidreactjsreact-nativereact-native-paper
Kob_24
Kob_24

Reputation: 612

react native paper list accordion

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>

Upvotes: 2

Views: 7615

Answers (2)

Bardia Mazaheri
Bardia Mazaheri

Reputation: 49

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

Upvotes: 0

melih.murat.pesmen
melih.murat.pesmen

Reputation: 513

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>

Upvotes: 1

Related Questions