React-native-expandable-stack NPM

react-native-expandable-stack

This is a simple library that allows you to create a stack of items that can be expanded or collapsed.

Demo

Installation

This library requires react-native-reanimated, please refer to their installation guide.

npm:

npm install react-native-expandable-stack react-native-reanimated

yarn:

yarn add react-native-expandable-stack react-native-reanimated

Usage

Ideally, your stacked items should have the same height.

Basic

import { Stack } from 'react-native-expandable-stack';

const Component = () => {
  const [isExpanded, setIsExpanded] = useState(false);

  return (
    <Stack expanded={isExpanded} gap={20} offset={-40}>
      {/* Your items here */}
    </Stack>
  );
};

Custom Spring config

import { Stack } from 'react-native-expandable-stack';

const springConfig = {
  damping: 8,
  mass: 0.5,
};

const Component = () => {
  const [isExpanded, setIsExpanded] = useState(false);

  return (
    <Stack
      expanded={isExpanded}
      animation={{ type: 'spring', config: springConfig }}
    >
      {/* Your items here */}
    </Stack>
  );
};

Custom Timing config

import { Stack } from 'react-native-expandable-stack';

const timingConfig = {
  duration: 600,
};

const Component = () => {
  const [isExpanded, setIsExpanded] = useState(false);

  return (
    <Stack
      expanded={isExpanded}
      animation={{ type: 'timing', config: timingConfig }}
    >
      {/* Your items here */}
    </Stack>
  );
};

Props

Name	Type	Required	Default	Description
expanded	`boolean`	Yes	`false`	Determines if the stack should be expanded or collapsed.
gap	`number`	No	`10`	Determines the gap between items in expanded state.
offset	`number`	No	`-20`	Determines the overlap of the items in collapsed state. Usually you will want a negative number.
animation	`{type: 'timing', config: WithTimingConfig}`,`{type: 'spring', config: WithSpringConfig}`	No	`{type: 'spring', config: {damping: 5, mass: 0.2}}`	Determines the animation to run. `config` is optional and takes in `react-native-reanimated` options, depending on the `type`:`type: 'timing'`: withTiming options `type: 'spring'`: withSpring options
onExpandStart	`() => void`	No	`-`	Runs a given function when expansion starts.
onExpandEnd	`() => void`	No	`-`	Runs a given function when expansion ends.
firstItemOnTop	`boolean`	No	`false`	Makes the first item appear on top of the stack.
animatedProgress	`Animated.SharedValue<number>`	No	`-`	Exposes `animatedProgress` value as a shared value, `0` means collapsed, `1` means expanded.