FIX[react-community-cli-plugin]: Node v20+ Text Style Error in Metro

[admirsaheta]

Summary:

This pull request fixes a Node.js 20+ compatibility issue with the styleText utility function in the React Native CLI. In Node.js 20+, passing an array of styles to styleText throws an ERR_INVALID_ARG_VALUE error. The fix introduces a compatibleStyleText helper function that detects the Node.js version and handles array styles by applying them individually for Node.js 20+, while maintaining backward compatibility with older versions.

Additionally, this PR adds proper Flow type annotations to resolve missing annotation linting errors in the affected files.

Changelog:

[GENERAL] [FIXED] - Fix Node.js 20+ compatibility issue with styleText array formatting in CLI

Test Plan:

1. Reproduce the Node.js 20+ Issue:

cd /Users/admirsaheta/Desktop/opensource/react-native && node -e "const {styleText} = require('util'); console.log('Node version:', process.version); try { console.log('Array test:', styleText(['bold', 'inverse'], 'test')); } catch(e) { console.log('Array failed:', e.message); } try { console.log('Single test:', styleText('bold', 'test')); } catch(e) { console.log('Single failed:', e.message); }"

Expected output on Node.js 20+:

Node version: v20.x.x
Array failed: The "format" argument must be of type string or an instance of Array. Received an instance of Array
Single test: [styled text]

2. Test the Fix:

cd /Users/admirsaheta/Desktop/opensource/react-native && node -e "const {styleText} = require('util'); function compatibleStyleText(text, styles) { const nodeVersion = parseInt(process.version.slice(1).split('.')[0], 10); if (nodeVersion >= 20 && Array.isArray(styles)) { let styledText = text; for (const style of styles) { styledText = styleText(style, styledText); } return styledText; } return styleText(styles, text); } console.log('Test result:', compatibleStyleText(' r ', ['bold', 'inverse']));"

Expected output on Node.js 20+:

Test result: [properly styled text with bold and inverse formatting]

3. Manual Testing:

• Node.js 20+ Environment:

  node --version  # Verify Node.js 20+
  npx react-native start

  • Verify that the CLI starts without throwing ERR_INVALID_ARG_VALUE errors
  • Confirm that key command help text displays with proper styling:

    Key commands available:
    
      r  - reload app(s)
      d  - open Dev Menu  
      j  - open DevTools
    

• Node.js <20 Environment:

  nvm use 18  # or any version < 20
  npx react-native start

  • Verify backward compatibility - CLI should work as before
  • Confirm styling still appears correctly

4. Flow Type Checking:

npx flow check packages/community-cli-plugin/src/utils/styleConfig.js
npx flow check packages/community-cli-plugin/src/commands/start/attachKeyHandlers.js

• Verify no Flow type annotation errors
• Confirm all parameters have proper type annotations

Code Changes:

• Created compatibleStyleText function in that detects Node.js version and handles array styles appropriately
• Updated to use the new compatible function
• Added comprehensive Flow type annotations for all function parameters

Expected Behavior:

• Node.js 20+: Array styles ['bold', 'inverse'] are applied individually via multiple styleText calls
• Node.js <20: Original behavior maintained using direct styleText call with array
• All environments: Proper styling of CLI help text without runtime errors