get-component-patterns

Retrieve React Native component patterns for creating buttons, cards, list items, images, and form inputs. Covers Pressable, expo-image, React.memo, React Compiler, composable patterns, and uncontrolled TextInput.

Instructions

Get React Native component patterns. Call this when creating any component: button, card, list item, image, form input. Covers Pressable, expo-image, React.memo, React Compiler, composable pattern, and uncontrolled TextInput. Use topic to get a specific section only.

Input Schema

TableJSON Schema

Name	Required	Description	Default
`topic`	No	Get a specific section only. Available: pressable, expo-image, react-memo, react-compiler, composable, uncontrolled-textinput. Omit for full content.
`compact`	No	If true, returns rules only without code examples. Much shorter.

Implementation Reference

src/content/patterns/component-patterns.ts:232-233 (handler)
The handler function that executes the logic for the "get-component-patterns" tool, utilizing the `resolvePattern` helper.
```
export const getComponentPatterns = (topic?: string, compact?: boolean): string =>
  resolvePattern(pattern, topic, compact);
```

src/index.ts:31-49 (registration)

Registration of the "get-component-patterns" tool in the MCP server instance.

server.tool(
  "get-component-patterns",
  "Get React Native component patterns. Call this when creating any component: button, card, list item, image, form input. Covers Pressable, expo-image, React.memo, React Compiler, composable pattern, and uncontrolled TextInput. Use `topic` to get a specific section only.",
  {
    topic: z
      .string()
      .optional()
      .describe(
        "Get a specific section only. Available: pressable, expo-image, react-memo, react-compiler, composable, uncontrolled-textinput. Omit for full content."
      ),
    compact: z
      .boolean()
      .optional()
      .describe("If true, returns rules only without code examples. Much shorter."),
  },
  async ({ topic, compact }) => ({
    content: [{ type: "text", text: getComponentPatterns(topic, compact) }],
  })
);

src/index.ts:34-45 (schema)

Zod schema definitions for the "get-component-patterns" tool inputs (topic and compact).

{
  topic: z
    .string()
    .optional()
    .describe(
      "Get a specific section only. Available: pressable, expo-image, react-memo, react-compiler, composable, uncontrolled-textinput. Omit for full content."
    ),
  compact: z
    .boolean()
    .optional()
    .describe("If true, returns rules only without code examples. Much shorter."),
},

src/content/patterns/component-patterns.ts:226-230 (helper)
Data structure holding the patterns content, used by the handler to return tool output.
```
const pattern: PatternSections = {
  title: 'Component Patterns',
  sections,
  compactSections,
};
```

React Native Expo MCP