Breaking News: Grepper is joining You.com. Read the official announcement!

accordion react native

Add Answer

Javasper answered on October 30, 2022 Popularity 9/10 Helpfulness 1/10

answer accordion react native

related accordion react native

related react native accordion

accordion react native

Comment


        <List.Accordion
          title="Controlled Accordion"
          left={props => <List.Icon {...props} icon={expanded==false?"arrow-collapse-right":"arrow-collapse-down"} />}
          right={props => <List.Icon {...props} icon="plus-circle-outline" />}
          expanded={expanded}
          onPress={handlePress}>
          <List.Item title="First item" />
          <List.Item title="Second item" />
        </List.Accordion>




        <List.Accordion
          title="Controlled Accordion"
          left={props => <List.Icon {...props} icon={expanded==false?"arrow-collapse-right":"arrow-collapse-down"} />}
          right={props => <List.Icon {...props} icon="plus-circle-outline" />}
          expanded={expanded}
          onPress={handlePress}>
          <List.Item title="First item" />
          <List.Item title="Second item" />
        </List.Accordion>
      </List.Section>

Popularity 9/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: accordion javascript react-native

Link to this answer
Share Copy Link

Contributed on Oct 30 2022

Javasper

0 Answers Avg Quality 2/10

Closely Related Answers

accordion react native

Comment

  <List.Section title="Accordions">
  <List.Accordion
    title="Uncontrolled Accordion"
    left={props => <List.Icon {...props} icon="folder" />}>
    <List.Item title="First item" />
    <List.Item title="Second item" />
  </List.Accordion>

  <List.Accordion
    title="Controlled Accordion"
    left={props => <List.Icon {...props} icon="folder" />}
    right={props => <Text style={{fontSize:50}}>HELLO</Text>}
    expanded={expanded}
    onPress={handlePress}>
    <List.Item title="First item" />
    <List.Item title="Second item" />
  </List.Accordion>
</List.Section>

Popularity 9/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: accordion acco

Link to this answer
Share Copy Link

Contributed on Oct 30 2022

Javasper

0 Answers Avg Quality 2/10

react native accordion

Comment

type AccordionItemPros = PropsWithChildren<{
  title: string;
}>;

type AccordionData = {
  title: string;
  content: JSX.Element;
  expanded: boolean;
  onHeaderPress: (index: number) => void;
};

type AccordionProps = PropsWithChildren<{
  data: AccordionData;
}>;

function AccordionItem({ children, title, expanded, onHeaderPress }: AccordionItemPros): JSX.Element {
  const body = <View style={styles.accordBody}>{ children }</View>;

  return (
    <View style={styles.accordContainer}>
      <TouchableOpacity style={styles.accordHeader} onPress={ onHeaderPress }>
        <Text style={styles.accordTitle}>{ title }</Text>
        <Icon name={ expanded ? 'chevron-up' : 'chevron-down' }
              size={20} color="#bbb" />
      </TouchableOpacity>
      { expanded && body }
    </View>
  );
}

function Accordion({ data }: AccordionProps): JSX.Element {

  const [ expandedIndex, setExpandedIndex ] = useState(null);

  function handleHeaderPress(index) {
    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
    setExpandedIndex(expandedIndex === index ? null : index);
  }

  return(
    <>
      { data.map((item, index) => (
      <AccordionItem
        key={index}
        title={item.title}
        expanded={expandedIndex === index}
        onHeaderPress={ () => handleHeaderPress(index) }>
          {item.content}
      </AccordionItem>
      )) }
    </>
  );
}

function App(): JSX.Element {
  return (
    <SafeAreaView style={styles.container}>
      <ScrollView
        contentInsetAdjustmentBehavior="automatic"
        style={styles.container}>
          <Accordion data={[
            {
              title: 'Native development',
              content: <Text style={styles.textSmall}>
                React Native lets you create truly native apps and
          doesn't compromise your users' experiences. It provides a core set of platform
          agnostic native components
              </Text>
            },
            {
              title: 'Fast refresh',
              content: <Text style={styles.textSmall}>
                See your changes as soon as you save.
                With the power of JavaScript, React Native lets you iterate at
                lightning speed.
              </Text>
            },
            {
              title: 'Cross-platform',
              content:  <><Text style={styles.textSmall}>React components wrap existing native code
                and interact with native APIs via React’s declarative UI paradigm
                and JavaScript. This enables native app development for whole new teams
                of developers</Text>
                <View style={styles.seperator}></View>
                <Button title="See more..."/>
              </>
            }
            ]
          }/>
      </ScrollView>
    </SafeAreaView>
  );
}

Popularity 4/10 Helpfulness 1/10 Language javascript

Source: blog.logrocket.com

Tags: accordion javascript react-native

Link to this answer
Share Copy Link

Contributed on Jan 19 2024

Smoggy Skylark

0 Answers Avg Quality 2/10

accordion react native

Contents

More Related Answers

accordion react native

Closely Related Answers

accordion react native

react native accordion

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.