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.

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

---

Made with create-react-native-library