React Native Mantine › Navigation

Stepper

Multi-step form navigation

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

Usage

import { useState } from 'react';
import { Stepper, Button, Group } from 'react-native-mantine';

function Onboarding() {
  const [active, setActive] = useState(0);

  return (
    <>
      <Stepper active={active} onStepClick={setActive}>
        <Stepper.Step label="Account" description="Create an account">
          Step 1 content
        </Stepper.Step>
        <Stepper.Step label="Verify" description="Confirm email">
          Step 2 content
        </Stepper.Step>
        <Stepper.Completed>All done</Stepper.Completed>
      </Stepper>
      <Group position="right">
        <Button variant="default" onPress={() => setActive((s) => s - 1)}>Back</Button>
        <Button onPress={() => setActive((s) => s + 1)}>Next</Button>
      </Group>
    </>
  );
}

Props

Source on GitHub · npm