React Native MCP Server

Instructions

Implementation Reference

• src/tools.ts:155-161 (handler)

  The MCP tool handler function that takes fromVersion and toVersion, calls getDiff service, and returns the diff as text content.

  async ({ fromVersion, toVersion }) => {
      const diffData = await getDiff(fromVersion, toVersion);
  
      return {
          content: [{ type: "text", text: diffData }]
      }
  })

• src/tools.ts:150-153 (schema)

  Zod input schema defining parameters for the tool: optional fromVersion and required toVersion.

  inputSchema: {
      fromVersion: z.string().describe("The current React Native version to compare from (defaults to version in package.json)"),
      toVersion: z.string().describe("The target React Native version to upgrade to")
  }

• src/tools.ts:89-161 (registration)

  Full registration of the 'get-react-native-diff' tool with title, description, schema, and handler on the MCP server.

  server.registerTool('get-react-native-diff', {
      title: "Get React Native Diff",
      description: `Gets the React Native diff between the current version and the user provided version.
  
  OVERVIEW:
  This diff will show all changes needed to upgrade React Native, including:
  • Package.json dependencies and their versions
  • iOS configuration changes (Podfile, xcodeproj settings)
  • Android configuration (build.gradle, settings.gradle)
  • Project structure changes
  • Binary files that need to be updated
  • Template files modifications
  • Native code changes
  • Troubleshooting steps if any
  
  USAGE:
  • If no fromVersion is provided, the current version from package.json will be used
  • The diff follows standard git diff format and should be carefully analyzed
  
  ANALYSIS STEPS:
  1. Review the diff to identify dependency version changes
  2. Carefully analyze configuration changes in iOS and Android files
     • Preserve custom settings in Podfile, build.gradle, etc.
     • Keep user-defined code blocks intact
     • Only update version numbers and required configurations
  3. Handle binary and template file updates
     • Note which binary files need updating
     • Back up modified template files before updating
     • Merge changes while preserving customizations
  4. Maintain code integrity
     • Preserve custom code in native iOS/Android files
     • Keep modifications in JavaScript/TypeScript files (App.tsx, etc.)
     • Only update required React Native specific code
  5. Update build tooling
     • Match Gradle version from diff
     • Update CocoaPods version if specified
     • Keep existing build customizations
  6. Package management
     • Only update versions of existing dependencies
     • Do not add new packages
     • Maintain current package structure
     • Preserve custom package configurations
     • Existing package version should be the same in all package.json files
     • DO NOT fall back to rc versions, always use the stable version of React Native unless the user explicitly asks for a rc version.
  
  TROUBLESHOOTING STEPS:
  At the end of the process, provide instructions for troubleshooting steps (detect user's package manager and run the correct command):
  • DELETE Pod and Podfile.lock file in iOS folder
  • Run pod install to prevent errors in iOS folder
  • Run this command to update android binary: ./gradlew wrapper --gradle-version {{CURRENT_GRADLE_VERSION_FROM_DIFF}} --distribution-type {{DISTRIBUTION_TYPE_FROM_DIFF}} in android folder
  • Run {{CURRENT_PACKAGE_MANAGER}} install to install the correct version of the dependencies
  
  IMPORTANT NOTES:
  • Make sure not to edit existing ts/js files unless it's necessary.
  • Make sure not to add new packages, only update the existing ones based on the diff.
  • Make sure to only update package.json for dependencies which are defined in the diff.
  • YOU MUST call "get-stable-version" tool to get the stable version of React Native before calling this tool.
  • DO NOT fallback to rc versions, always use the stable version of React Native unless the user explicitly asks for a rc version.
  • If no diff exit and inform the user that the diff is empty, you can't proceed with the upgrade.
  • If a user asked to provide a version, call the "get-user-version" tool to get the version of React Native that the user wants to upgrade to.
      `,
      inputSchema: {
          fromVersion: z.string().describe("The current React Native version to compare from (defaults to version in package.json)"),
          toVersion: z.string().describe("The target React Native version to upgrade to")
      }
  },
      async ({ fromVersion, toVersion }) => {
          const diffData = await getDiff(fromVersion, toVersion);
  
          return {
              content: [{ type: "text", text: diffData }]
          }
      })

• src/services.ts:11-21 (helper)

  Core helper function that fetches the git diff between two React Native versions from the rn-diff-purge GitHub repo, with fallback if direct diff fails.

  export const getDiff = async (currentVersion: string, toVersion: string): Promise<string> => {
      const url = `https://raw.githubusercontent.com/react-native-community/rn-diff-purge/diffs/diffs/${currentVersion}..${toVersion}.diff`
      const response = await fetch(url);
      if (!response.ok) {
          console.error(`Failed to fetch diff for ${currentVersion} to ${toVersion} let's try getting diff for ${toVersion} to ${currentVersion}`);
          const diff = await getDiff(toVersion, currentVersion);
          return diff;
      }
      const diffData = await response.text();
      return diffData;
  }