@dooboo-ui/native-accordion v0.7.0

Accordion

Simple drop down item component for react-native. This component supports drop down toggle with animation.

Props

Installation

yarn add @dooboo-ui/native

or

yarn add @dooboo-ui/native-accordion

Getting started

• Import

  import { Accordion } from '@dooboo-ui/native';
  // or
  import Accordion from '@dooboo-ui/native-accordion';

• Data

  state = {
    contents: [
      {
        title: 'Title 1',
        body: 'Hi. I love this component. What do you think?',
      },
      {
        title: 'See this one too',
        body: 'Yes. You can have more items.',
      },
      {
        title: 'Thrid thing',
        body:
          'What about very long text? What about very long text? What about very long text? What about very long text? What about very long text? What about very long text? What about very long text? What about very long text? What about very long text? What about very long text? What about very long text? What about very long text?',
      },
    ],
  };

• Usage

  <View style={styles.container}>
    <ScrollView style={{ alignSelf: 'stretch' }}>
      {
        this.state.contents
          ? this.state.contents.map((param, i) => {
            return (
              <Accordion
                key={i}
                style={styles.Accordion}
                contentVisible={false}
                visibleElement={
                  <StyledImage
                    source={IC_ARR_UP}
                  />
                }
                invisibleElement={
                  <StyledImage
                    source={IC_ARR_DOWN}
                  />
                }
                header={
                  <View>
                    <Text style={{
                      fontSize: 16,
                      color: 'blue',
                    }}>{param.title}</Text>
                  </View>
                }
              >
                <Text style={[
                  styles.txt,
                  {
                    fontSize: 20,
                  }
                ]}>
                  {param.body}
                </Text>
              </Accordion>
            );
          })
          : null
      }
      <View style={{ height: 96 }}/>
    </ScrollView>
  </View>
  });