RN Kit Components

Shared UI comes from @sohantalukder/rn-kit

UI Kit First

This boilerplate does not maintain a separate internal component library. Most shared UI should be imported from @sohantalukder/rn-kit, while feature-specific composition stays inside each module.

Import reusable UI primitives from @sohantalukder/rn-kit.

Create small module-level components for feature-specific layouts.

Keep API calls and screen behavior in services, TanStack hooks, and controller hooks.

Use the RN Kit website for complete prop, theme, and overlay documentation.

Open RN Kit Components Docs

Screen and Layout

Use RN Kit wrappers and theme helpers for app screens.

ScreenContainer

Card

Divider

Skeleton

Loader

Typography and Actions

Build common interactions with theme-aware primitives.

Text

Button

IconButton

TextInput

Switch

Media and Icons

Render images and local SVG icons through the kit.

Image

IconByVariant

Badge

Checkbox

Radio

Overlays

Use the portal-backed overlay helpers for global feedback.

Toast

Dialog

BottomSheet

ContextMenu

toast.show

Basic Usage

Import RN Kit primitives directly and compose feature UI from those building blocks.

import {
  Button,
  Card,
  Image,
  ScreenContainer,
  Text,
} from '@sohantalukder/rn-kit';

export function ProfileSummary() {
  return (
    <ScreenContainer>
      <Card variant="elevated" padding={20}>
        <Image
          source={{ uri: 'https://example.com/avatar.png' }}
          style={{ width: 64, height: 64, borderRadius: 32 }}
        />
        <Text variant="heading2" weight="bold">
          Sohan Talukder
        </Text>
        <Button text="Continue" onPress={() => undefined} />
      </Card>
    </ScreenContainer>
  );
}

Icons and Theme Values

IconByVariant and useTheme keep feature components aligned with the active design system.

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

export function FeatureAction() {
  const { colors, gutters, layout } = useTheme();

  return (
    <View style={[layout.row, layout.itemsCenter, gutters.gap_16]}>
      <IconByVariant path="send" stroke={colors.text} />
      <Text variant="body1">API integration</Text>
      <Button text="Fetch user" icon="send" onPress={() => undefined} />
    </View>
  );
}

Toast and Overlay APIs

Add UiPortalProvider at the root, then call RN Kit overlay helpers from controllers or action handlers.

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

toast.show({
  type: 'success',
  title: 'Profile updated',
});

toast.show({
  type: 'error',
  title: 'Something went wrong',
});

Feature Component Pattern

The example module follows this pattern: RN Kit primitives, module components for repeated JSX, services for API calls, and controller hooks for screen behavior.

src/modules/example/
├── components/       # Feature-specific composition
├── constants/        # Static feature lists and labels
├── hooks/            # Controller + TanStack Query hooks
├── services/         # API service calls
├── types/            # Feature types
└── Example.tsx       # Screen composition only

Need Full Component Details?

The RN Kit website is the canonical source for component props, theme APIs, overlay helpers, and usage examples.

Visit RN Kit Website