Storybook para React Native: desarrollo basado en componentes

¿Por qué Storybook en mobile?

Storybook permite desarrollar y visualizar componentes de forma aislada, sin necesitar navegar por la app completa. Es especialmente valioso en teams grandes o con muchos componentes reutilizables. Deepyze usa Storybook en proyectos con design systems complejos.

Instalación

npx storybook@latest init

Estructura

src/
  components/
    Boton/
      Boton.tsx
      Boton.stories.tsx

Primera Story

// Boton.stories.tsx
import type { Meta, StoryObj } from '@storybook/react-native';
import { Boton } from './Boton';

const meta = {
  title: 'Componentes/Boton',
  component: Boton,
  parameters: { backgrounds: { default: 'white' } },
} satisfies Meta<typeof Boton>;

export default meta;
type Story = StoryObj<typeof meta>;

export const Primario: Story = {
  args: {
    label: 'Confirmar',
    variant: 'primary',
    onPress: () => console.log('presionado'),
  },
};

export const Secundario: Story = {
  args: {
    label: 'Cancelar',
    variant: 'secondary',
    onPress: () => console.log('cancelado'),
  },
};

export const Deshabilitado: Story = {
  args: {
    label: 'No disponible',
    disabled: true,
    onPress: () => {},
  },
};

Beneficios en equipos

• Designers pueden revisar componentes sin instalar la app
• QA puede testear edge cases de componentes aisladamente
• Documentación visual siempre actualizada
• Detectá regresiones visuales antes

¿Querés implementar un design system con Storybook? Deepyze puede ayudarte.