Spoiler

Content reveal with show more/less

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

Usage

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

const MyComponent = () => {
  const [shown, setShown] = useState(false);

  return (
    <>
      <Text>Visible content...</Text>
      <Collapse in={shown}>
        <Text>Hidden content revealed!</Text>
      </Collapse>
      <Button onPress={() => setShown(!shown)}>
        {shown ? 'Show less' : 'Show more'}
      </Button>
    </>
  );
};

Props

Prop	Type	Default	Description
`children` (required)	`React.ReactNode`		Content that will be hidden under spoiler
`maxHeight` (required)	`number`	`100`	Max height after which spoiler is shown
`showLabel`	`string`	`'Show more'`	Label for show button
`hideLabel`	`string`	`'Show less'`	Label for hide button
`transitionDuration`	`number`	`200`	Transition duration in ms
`expanded`	`boolean`		Controlled expanded state
`onExpandedChange`	`(expanded: boolean) => void`		Called when expanded state changes
`style`	`any`		Additional styles
`testID`	`string`		Test identifier used by testing frameworks

Source on GitHub · npm