Component

SlideModal

Animated slide-up modal for composed flows.

React Native

Slide modal

Use the exposed ref methods to open composed modal flows.

import { useRef } from 'react';
import { Button, SlideModal, Text } from '@sohantalukder/rn-kit';

export function SlideModalExample() {
  const modalRef = useRef<{
    openModal: () => void;
    closeModal: () => void;
  } | null>(null);

  return (
    <>
      <Button text="Open modal" onPress={() => modalRef.current?.openModal()} />
      <SlideModal ref={modalRef}>
        <Text variant="heading3" weight="semibold">
          Complete profile
        </Text>
        <Button
          text="Close"
          variant="outline"
          onPress={() => modalRef.current?.closeModal()}
        />
      </SlideModal>
    </>
  );
}

Live component

defaultcustom content

Use for short focused flows.
Keep close behavior predictable.

Usage

import { SlideModal } from '@sohantalukder/rn-kit';

import { useRef } from 'react';
import { Button, SlideModal, Text } from '@sohantalukder/rn-kit';

export function SlideModalExample() {
  const modalRef = useRef<{
    openModal: () => void;
    closeModal: () => void;
  } | null>(null);

  return (
    <>
      <Button text="Open modal" onPress={() => modalRef.current?.openModal()} />
      <SlideModal ref={modalRef}>
        <Text variant="heading3" weight="semibold">
          Complete profile
        </Text>
        <Button
          text="Close"
          variant="outline"
          onPress={() => modalRef.current?.closeModal()}
        />
      </SlideModal>
    </>
  );
}

Props

These are the most important props to consider first. The custom preview highlights the common setup before you move into app-specific states.

PropTypeDefaultDescription

childrenReactNode-Content rendered inside the component surface.

refunknown-Configures ref for SlideModal.

Theme

SlideModal reads from the rn-kit theme context where applicable. Wrap your app with ThemeProvider and prefer package theme tokens over hardcoded screen-level colors.

Variants

default
custom content

Best Practices

Use for short focused flows.
Keep close behavior predictable.