Start here

Getting Started

Set up the package, mount the required providers, and ship your first screen with typed React Native UI primitives.

Setup path

InstallPackage + native peersMountThemeProvider + portalsBuildUse exported components

npm install @sohantalukder/rn-kit

Overview

@sohantalukder/rn-kit packages common React Native UI patterns into a reusable component library with typed props, theme primitives, local icons, and app-level overlay providers.

Start by installing the package, mounting the providers once near the application root, then importing components from the package entry point. Component pages document props, variants, preview states, and practical usage notes.

Use ThemeProvider for color, typography, spacing, border, and layout tokens.
Use UiPortalProvider when the app renders toast, dialog, bottom sheet, or context menu flows.
Use component pages as the copy-ready source for imports, examples, props, variants, and best practices.

Install the Package

Install the library in the consuming React Native application. Add native peer dependencies when the app uses navigation, gestures, SVG icons, overlays, or image-heavy components.

npm install @sohantalukder/rn-kit

npm install \
  react-native-gesture-handler \
  react-native-reanimated \
  react-native-safe-area-context \
  react-native-svg

Root Setup

Wrap your app once with ThemeProvider. Add UiPortalProvider inside it when you need overlay managers such as toast, dialog, bottom sheet, or context menu.

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

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

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

Build a First Screen

This example includes imports, provider placement, local state, validation, a submit handler, and a toast so the pattern can be copied into a new screen.

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>
  );
}

Recommended Workflow

Install the package and peer dependencies in the app that consumes the UI kit.
Mount ThemeProvider once near the app root before rendering package components.
Mount UiPortalProvider when the app uses toast, dialog, bottom sheet, or context menu managers.
Build screens from package exports first, then add local layout styles around them.
Browse component pages for imports, examples, props, variants, and custom docs previews.
Run typecheck and preview the docs after adding or changing component usage.

Next Steps

After the first screen renders, use the Installation and Theming pages to tighten native setup and token usage. Component pages are the best place to confirm exact prop names and available variants.

Open Installation when native peers or app setup need a closer pass.
Open Theming before introducing custom colors, spacing, or typography choices.
Use the sidebar component list when you need exact imports, previews, props, and best practices.