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