React Native Mantine › Miscellaneous

Transition

Animated mount/unmount transitions

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

Usage

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

const MyComponent = () => {
  const [visible, setVisible] = useState(false);

  return (
    <>
      <Button onPress={() => setVisible(!visible)}>
        Toggle
      </Button>

      <Transition
        mounted={visible}
        transition="scale"
        duration={300}
      >
        <Paper p="md">
          <Text>Animated content</Text>
        </Paper>
      </Transition>
    </>
  );
};

// Available transitions:
// - fade: Simple opacity
// - scale: Scale with fade
// - slide-down, slide-up, slide-left, slide-right
// - pop: Scale from 0
// - rotate: 180° rotation with fade

Props

Source on GitHub · npm