diff --git a/Accordion.js b/Accordion.js
index ccf0b9b..b89f78a 100644
--- a/Accordion.js
+++ b/Accordion.js
@@ -6,6 +6,7 @@ const COLLAPSIBLE_PROPS = [
'align',
'collapsed',
'collapsedHeight',
+ 'renderChildrenCollapsed',
'enablePointerEvents',
'duration',
'easing',
diff --git a/Collapsible.js b/Collapsible.js
index 88cda41..800923e 100644
--- a/Collapsible.js
+++ b/Collapsible.js
@@ -12,6 +12,7 @@ export default class Collapsible extends Component {
duration: 300,
easing: 'easeOutCubic',
onAnimationEnd: () => null,
+ renderChildrenCollapsed: true,
};
constructor(props) {
@@ -172,7 +173,11 @@ export default class Collapsible extends Component {
};
render() {
- const { collapsed, enablePointerEvents } = this.props;
+ const {
+ collapsed,
+ enablePointerEvents,
+ renderChildrenCollapsed,
+ } = this.props;
const {
height,
contentHeight,
@@ -211,6 +216,11 @@ export default class Collapsible extends Component {
if (animating) {
contentStyle.height = contentHeight;
}
+ const shouldRenderChildren =
+ renderChildrenCollapsed ||
+ ((!collapsed || (collapsed && animating)) &&
+ (animating || measuring || measured));
+
return (
- {this.props.children}
+ {shouldRenderChildren && this.props.children}
);
diff --git a/README.md b/README.md
index c8e6e9f..674887e 100644
--- a/README.md
+++ b/README.md
@@ -24,16 +24,17 @@ import Collapsible from 'react-native-collapsible';
## Properties
-| Prop | Description | Default |
-| ------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
-| **`align`** | Alignment of the content when transitioning, can be `top`, `center` or `bottom` | `top` |
-| **`collapsed`** | Whether to show the child components or not | `true` |
-| **`collapsedHeight`** | Which height should the component collapse to | `0` |
-| **`enablePointerEvents`** | Enable pointer events on collapsed view | `false` |
-| **`duration`** | Duration of transition in milliseconds | `300` |
-| **`easing`** | Function or function name from [`Easing`](https://github.com/facebook/react-native/blob/master/Libraries/Animated/src/Easing.js) (or [`tween-functions`](https://github.com/chenglou/tween-functions) if < RN 0.8). Collapsible will try to combine `Easing` functions for you if you name them like `tween-functions`. | `easeOutCubic` |
-| **`style`** | Optional styling for the container | |
-| **`onAnimationEnd`** | Callback when the toggle animation is done. Useful to avoid heavy layouting work during the animation | `() => {}` |
+| Prop | Description | Default |
+| ----------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
+| **`align`** | Alignment of the content when transitioning, can be `top`, `center` or `bottom` | `top` |
+| **`collapsed`** | Whether to show the child components or not | `true` |
+| **`collapsedHeight`** | Which height should the component collapse to | `0` |
+| **`enablePointerEvents`** | Enable pointer events on collapsed view | `false` |
+| **`duration`** | Duration of transition in milliseconds | `300` |
+| **`easing`** | Function or function name from [`Easing`](https://github.com/facebook/react-native/blob/master/Libraries/Animated/src/Easing.js) (or [`tween-functions`](https://github.com/chenglou/tween-functions) if < RN 0.8). Collapsible will try to combine `Easing` functions for you if you name them like `tween-functions`. | `easeOutCubic` |
+| **`renderChildrenCollapsed`** | Render children in collapsible even if not visible. | `true` |
+| **`style`** | Optional styling for the container | |
+| **`onAnimationEnd`** | Callback when the toggle animation is done. Useful to avoid heavy layouting work during the animation | `() => {}` |
## Accordion Usage
@@ -108,7 +109,7 @@ class AccordionView extends Component {
activeSections: [],
};
- _renderSectionTitle = section => {
+ _renderSectionTitle = (section) => {
return (
{section.content}
@@ -116,7 +117,7 @@ class AccordionView extends Component {
);
};
- _renderHeader = section => {
+ _renderHeader = (section) => {
return (
{section.title}
@@ -124,7 +125,7 @@ class AccordionView extends Component {
);
};
- _renderContent = section => {
+ _renderContent = (section) => {
return (
{section.content}
@@ -132,7 +133,7 @@ class AccordionView extends Component {
);
};
- _updateSections = activeSections => {
+ _updateSections = (activeSections) => {
this.setState({ activeSections });
};
diff --git a/index.d.ts b/index.d.ts
index 4b04d99..26f8d56 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -77,6 +77,13 @@ export interface CollapsibleProps {
*/
easing?: EasingMode | any;
+ /**
+ * Render children in collapsible even if not visible
+ *
+ * @default true
+ */
+ renderChildrenCollapsed?: boolean;
+
/**
* Optional styling for the container
*/