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
- 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."), }, - Data structure holding the patterns content, used by the handler to return tool output.
const pattern: PatternSections = { title: 'Component Patterns', sections, compactSections, };