This package has been deprecated

Author message:

Please use [Accordion] in dooboo-ui instead.

react-native-drop-down-item
TypeScript icon, indicating that this package has built-in type declarations

1.1.0 • Public • Published

react-native-drop-down-item (Deprecated!)

Current package has been moved to @dooboo-ui/native-accordion

Npm Version Downloads Build Status License

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

Npm repo

https://www.npmjs.com/package/react-native-drop-down-item

Git repo

https://github.com/dooboolab/react-native-drop-down-item

Props

necessary types default
contentVisible boolean false
header any <View/>
backgroundColor string transparent
titleBackground string transparent
contentBackground string transparent
underlineColor string transparent
visibleImage any undefined
invisibleImage any undefined

Getting started

$ npm install react-native-drop-down-item --save

  • Import

    import DropDownItem from "react-native-drop-down-item";
  • 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 (
                <DropDownItem
                  key={i}
                  style={styles.dropDownItem}
                  contentVisible={false}
                  invisibleImage={IC_ARR_DOWN}
                  visibleImage={IC_ARR_UP}
                  header={
                    <View>
                      <Text style={{
                        fontSize: 16,
                        color: 'blue',
                      }}>{param.title}</Text>
                    </View>
                  }
                >
                  <Text style={[
                    styles.txt,
                    {
                      fontSize: 20,
                    }
                  ]}>
                    {param.body}
                  </Text>
                </DropDownItem>
              );
            })
            : null
        }
        <View style={{ height: 96 }}/>
      </ScrollView>
    </View>
    });

Package Sidebar

Install

npm i react-native-drop-down-item

Weekly Downloads

16

Version

1.1.0

License

ISC

Unpacked Size

10.7 kB

Total Files

9

Last publish

Collaborators

  • dooboolab