Usage

Import components, mount providers, and use overlay managers from the public package surface.

Root Setup

ThemeProvider supplies colors, typography, spacing, borders, and layout helpers. UiPortalProvider mounts the app-level overlay hosts for toast, dialog, bottom sheet, and context menu APIs.

Mount UiPortalProvider once near the application root, inside ThemeProvider, before calling global overlay managers from feature screens.

import {
  ThemeProvider,
  UiPortalProvider,
} from '@sohantalukder/rn-kit';

import { AccountScreen } from './src/screens/AccountScreen';

export function App() {
  return (
    <ThemeProvider>
      <UiPortalProvider>
        <AccountScreen />
      </UiPortalProvider>
    </ThemeProvider>
  );
}

First Screen

Use package components like normal React Native components. Keep form state in the screen, pass controlled values to inputs, and call overlay managers from explicit handlers.

import { useState } from 'react';
import { View } from 'react-native';
import {
  Button,
  Card,
  Text,
  TextInput,
  ThemeProvider,
  UiPortalProvider,
  toast,
  useTheme,
} from '@sohantalukder/rn-kit';

function AccountScreen() {
  const [email, setEmail] = useState('');
  const [isSubmitting, setIsSubmitting] = useState(false);
  const { gutters, layout } = useTheme();

  const emailError =
    email.length > 0 && !email.includes('@')
      ? 'Enter a valid email address.'
      : undefined;

  const handleSubmit = () => {
    if (!email || emailError) {
      toast.show({ type: 'error', title: 'Add a valid email first' });
      return;
    }

    setIsSubmitting(true);
    toast.show({ type: 'success', title: 'Profile saved' });
    setTimeout(() => setIsSubmitting(false), 800);
  };

  return (
    <View style={[layout.flex_1, layout.justifyCenter, gutters.padding_24]}>
      <Card variant="outlined" style={gutters.gap_16}>
        <Text variant="heading3" weight="semibold">
          Account setup
        </Text>
        <Text color="secondary">
          Use controlled fields and let rn-kit handle theme-aware states.
        </Text>
        <TextInput
          label="Email"
          placeholder="you@example.com"
          keyboardType="email-address"
          autoCapitalize="none"
          value={email}
          errorMessage={emailError}
          onChangeText={(value) => setEmail(value)}
        />
        <Button
          text="Save profile"
          accessibilityLabel="Save profile"
          disabled={!email || Boolean(emailError)}
          isLoading={isSubmitting}
          onPress={handleSubmit}
        />
      </Card>
    </View>
  );
}

export function App() {
  return (
    <ThemeProvider>
      <UiPortalProvider>
        <AccountScreen />
      </UiPortalProvider>
    </ThemeProvider>
  );
}

Overlay Managers

After UiPortalProvider is mounted, feature code can call the exported managers directly. This example defines every handler and bottom sheet component it references.

import { View } from 'react-native';
import {
  Button,
  Text,
  bottomSheet,
  contextMenu,
  dialog,
  toast,
  useTheme,
} from '@sohantalukder/rn-kit';

function FilterSheet({
  selectedStatus,
  onApply,
}: {
  selectedStatus: string;
  onApply: () => void;
}) {
  const { gutters } = useTheme();

  return (
    <View style={[gutters.gap_12, gutters.padding_16]}>
      <Text variant="heading3" weight="semibold">
        Filters
      </Text>
      <Text color="secondary">Current status: {selectedStatus}</Text>
      <Button
        text="Apply filters"
        onPress={() => {
          onApply();
          bottomSheet.close();
        }}
      />
    </View>
  );
}

export function ToolbarActions() {
  const { gutters } = useTheme();

  const saveProfile = () => {
    toast.show({ type: 'success', title: 'Profile saved' });
  };

  const deleteItem = () => {
    dialog.confirm('Delete item?', 'This action cannot be undone.', () => {
      toast.show({ type: 'success', title: 'Item deleted' });
    });
  };

  const openFilters = () => {
    bottomSheet.show({
      component: FilterSheet,
      componentProps: {
        selectedStatus: 'active',
        onApply: () => toast.show({ type: 'success', title: 'Filters applied' }),
      },
      options: {
        snapPoints: ['35%', '70%'],
        initialSnapIndex: 1,
      },
    });
  };

  const openMenu = () => {
    contextMenu.show({
      position: { x: 24, y: 120 },
      title: 'Row actions',
      items: [
        { id: 'save', label: 'Save', icon: 'check', onPress: saveProfile },
        {
          id: 'delete',
          label: 'Delete',
          destructive: true,
          onPress: deleteItem,
        },
      ],
    });
  };

  return (
    <View style={gutters.gap_12}>
      <Button text="Save" onPress={saveProfile} />
      <Button text="Filters" variant="outline" onPress={openFilters} />
      <Button text="More actions" variant="secondary" onPress={openMenu} />
    </View>
  );
}

Theme Usage

Use useTheme inside components rendered below ThemeProvider. Generated token groups can be composed in React Native style arrays.

import { View } from 'react-native';
import { Text, useTheme } from '@sohantalukder/rn-kit';

export function AccountSummary() {
  const { backgrounds, borders, fonts, gutters, layout, typographies } =
    useTheme();

  return (
    <View
      style={[
        layout.row,
        layout.itemsCenter,
        gutters.gap_12,
        gutters.padding_16,
        backgrounds.background,
        borders.rounded_16,
        borders.w_1,
        borders.gray8,
      ]}
    >
      <Text style={[typographies.heading3, fonts.primary]}>
        Account
      </Text>
      <Text color="secondary">Ready to review</Text>
    </View>
  );
}

Component Pages

Use the component pages while authoring components so examples, props, variants, and usage notes stay close to the implementation.

npm run docs:dev