Using components

CraftReactNative ships a set of ready‑made React Native components under the @craftrn-ui package. This guide explains how to bring them into your project, how they pick up theming and styling, and a few patterns for composing them together.

Installation recap

If you haven’t set up the library yet, follow the Demo setup guide first.

Each component is imported individually from your local craftrn-ui folder. For example:

import { Button } from '@/craftrn-ui/components/Button';
import { Card } from '@/craftrn-ui/components/Card';
import { Text } from '@/craftrn-ui/components/Text';

The general pattern is:

import { ComponentName } from '@/craftrn-ui/components/ComponentName';

All components are:

• Themed – colors, typography, spacing and radius come from the active Unistyles theme.
• Composable – you can combine them with each other and with your own primitives.
• Accessible – sensible defaults for roles, labels and touch targets.

Basic usage

Most components follow a simple pattern:

import { Button } from '@/craftrn-ui/components/Button';
 
export function SaveButton() {
  return (
    <Button variant="primary" onPress={() => {/* save */}}>
      Save changes
    </Button>
  );
}

• variant: chooses a visual style (for example primary, secondary, ghost depending on the component).
• size: adjusts padding and typography scale where supported.
• onPress / onChange: behave like standard React Native handlers.

Refer to each component page (for example Button) for its full prop list and available variants.

Theming and styling

You generally don’t need to pass colors or spacing directly. Components read from the active theme:

• Colors are documented in Colors.
• Typography is documented in Typography.
• Spacing and radius tokens are in Spacing and Border Radius.

If you need to adjust layout around a component, use StyleSheet.create with theme tokens as described in Styling:

import { StyleSheet } from 'react-native-unistyles';
import { Card } from '@/craftrn-ui/components/Card';
import { Text } from '@/craftrn-ui/components/Text';
 
const styles = StyleSheet.create(theme => ({
  container: {
    padding: theme.spacing.medium,
  },
  title: {
    marginBottom: theme.spacing.small,
  },
}));
 
export function ProfileCard() {
  return (
    <Card style={styles.container}>
      <Text variant="headline" style={styles.title}>
        Profile
      </Text>
      {/* content */}
    </Card>
  );
}

Composition patterns

• Wrap with your own containers: keep business logic and layout in your own components and render CraftReactNative primitives inside.
• Prefer props over cloning: when you need to tweak behavior, expose props on your wrapper rather than reaching inside the library component.
• Keep variants small: if you find yourself passing the same props over and over (for example a “danger” button), create a tiny wrapper (e.g. DangerButton) instead of duplicating props.

Accessibility considerations

Components are built with accessibility in mind, but you are still responsible for good labels and structure:

• Pass meaningful accessibilityLabel where the visible text is not enough.
• Use accessibilityRole only when changing the default semantics.
• Keep touch targets large enough when wrapping components in custom containers.

See the Accessibility guide for more details.

Where to go next

• Browse the Components section in the sidebar to see all available primitives.
• Use the Props tables on each component page to understand configuration options.
• Read Theming and Styling to understand how components react to theme changes.