Collapse

Smooth collapsible content

Import: import { Collapse } from 'react-native-mantine';

Usage

import { useState } from 'react';
import { Collapse, Button, Text, Paper } from 'react-native-mantine';

const MyComponent = () => {
  const [opened, setOpened] = useState(false);

  return (
    <>
      <Button onPress={() => setOpened(!opened)}>
        Toggle Content
      </Button>

      <Collapse in={opened}>
        <Paper p="md">
          <Text>Collapsible content here</Text>
        </Paper>
      </Collapse>
    </>
  );
};

Props

Prop	Type	Default	Description
`children` (required)	`React.ReactNode`		Content that should be collapsed
`in` (required)	`boolean`		Opened state
`transitionDuration`	`number`	`200`	Transition duration in ms
`transitionTimingFunction`	`'linear' \| 'ease' \| 'ease-in' \| 'ease-out' \| 'ease-in-out'`	`'ease'`	Transition timing function
`onTransitionEnd`	`() => void`		Called when transition ends
`animateOpacity`	`boolean`	`true`	If true, content opacity is animated together with its height
`style`	`any`		Additional styles
`testID`	`string`		Test identifier used by testing frameworks

Source on GitHub · npm