JSPM

react-native-expandable-view

0.1.6
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 12
  • Score
    100M100P100Q44515F
  • License MIT

Expandable View for React Native

Package Exports

  • react-native-expandable-view

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-expandable-view) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-native-expandable-view

An expandable view for react native, working both on Android and iOS.

Installation

npm install react-native-expandable-view --save

Usage

import ExpandableView from 'react-native-expandable-view';

Then wrap the view you wish to be expandable.

It will automatically become expandable if the height of its content exceeds the given initial maximum height.

<ExpandableView>
    <View>
        <Text>My expandable view</Text>
    </View>
</ExpandableView>

Alernatively, you can render content using the header prop.

When providing this prop, all content in the header will be rendered. The content wrapped by the ExpandableView will be hidden, regardless of whether it exceeds the initial maximum height.

<ExpandableView
    header={this.renderHeader()}
>
    <View>
        <Text>My expandable view</Text>
    </View>
</ExpandableView>

Properties

Prop Description Default
intialMaxHeight The maxmium height your content can be before it becomes expandable 500
text Text for the expand button 'Tap here to expand'
header When provided, the header component will always be shown and the child components will be hidden until expanded
buttonStyle Style object that will be applied to the button View