CraftReactNativeCraftReactNative

Styling

How styles are applied in CraftReactNative using Unistyles.

All components use Unistyles v3 for styling. Styles automatically update when themes change without causing re-renders.

Basic usage

Use StyleSheet.create with theme functions:

import { StyleSheet } from 'react-native-unistyles';
 
const styles = StyleSheet.create(theme => ({
  container: {
    backgroundColor: theme.colors.backgroundScreen,
    padding: theme.spacing.medium,
    borderRadius: theme.borderRadius.medium,
  },
}));

Dynamic styles

Create style functions for props-based styling:

const styles = StyleSheet.create(theme => ({
  button: ({ variant }: { variant: 'primary' | 'secondary' }) => ({
    backgroundColor:
      variant === 'primary'
        ? theme.colors.interactivePrimary
        : theme.colors.interactiveSecondary,
    padding: theme.spacing.medium,
  }),
}));
 
// Usage
<View style={styles.button({ variant: 'primary' })} />

Avoid useUnistyles

Don't use useUnistyles - it causes re-renders on every theme change. Only use it for:

  • Third-party components that don't accept style props
  • React Navigation configuration
// ✅ Good
const styles = StyleSheet.create(theme => ({
  container: {
    backgroundColor: theme.colors.backgroundScreen,
  },
}));
 
// ❌ Avoid
const { theme } = useUnistyles();
<View style={{ backgroundColor: theme.colors.backgroundScreen }} />

Project-specific notes

  • All components in @craftrn-ui use this pattern
  • Theme tokens are available: theme.colors, theme.spacing, theme.borderRadius, theme.textVariants
  • Styles update automatically when switching themes via UnistylesRuntime.setTheme()
  • TypeScript provides full autocomplete for theme properties

Using components

How to import, configure, and compose CraftReactNative UI components in your app.

Theming

Learn how to switch between themes and customize colors, typography, spacing, and more using Unistyles.

On this page