React Native Configuration

// Traditional ESLint config (.eslintrc.js)
module.exports = {
  extends: ['universe/native']
};

// Package.json configuration
{
  "eslintConfig": {
    "extends": "universe/native"
  }
}

// eslint.config.js
const { defineConfig } = require('eslint/config');
const config = require('eslint-config-universe/flat/native');
module.exports = defineConfig(config);

// Or with ES modules
import { defineConfig } from 'eslint/config';
import config from 'eslint-config-universe/flat/native';
export default defineConfig(config);

// Basic React Native project
// .eslintrc.js
module.exports = {
  extends: ['universe/native']
};

// Expo project with custom React rules
// .eslintrc.js
module.exports = {
  extends: ['universe/native'],
  rules: {
    'react/prop-types': 'off', // Often disabled in TypeScript projects
    'react-hooks/exhaustive-deps': 'warn'
  }
};

// Multi-platform project combining native and web
// .eslintrc.js
module.exports = {
  extends: ['universe/native'],
  overrides: [
    {
      files: ['**/*.web.*'],
      env: { browser: true }
    }
  ]
};

// Available globals (no need to declare)
__DEV__: boolean;           // Development mode flag
ErrorUtils: object;         // React Native error handling
FormData: constructor;      // Form data API
XMLHttpRequest: constructor; // HTTP request API
fetch: function;           // Network request function
navigator: object;         // Navigator API
alert: function;           // Alert dialog
window: object;            // Global window (when available)

// Timer functions
setTimeout: function;
setInterval: function;
clearTimeout: function;
clearInterval: function;
setImmediate: function;
clearImmediate: function;

// Animation functions
requestAnimationFrame: function;
cancelAnimationFrame: function;
requestIdleCallback: function;
cancelIdleCallback: function;

// Base extensions
.js, .jsx, .ts, .tsx, .d.ts

// Platform-specific extensions (computed automatically)
.android.js, .android.jsx, .android.ts, .android.tsx
.ios.js, .ios.jsx, .ios.ts, .ios.tsx
.web.js, .web.jsx, .web.ts, .web.tsx
.native.js, .native.jsx, .native.ts, .native.tsx

// Expo-specific extensions
.expo.js, .expo.jsx, .expo.ts, .expo.tsx
.expo.android.js, .expo.ios.ts, .expo.web.jsx
// ... and all other combinations

// JSX formatting and structure
'react/jsx-boolean-value': ['warn', 'never']
'react/jsx-closing-bracket-location': ['warn', { nonEmpty: 'after-props', selfClosing: 'tag-aligned' }]
'react/jsx-curly-brace-presence': ['warn', 'never']
'react/jsx-first-prop-new-line': ['warn', 'multiline']
'react/jsx-indent': ['warn', 2]
'react/jsx-wrap-multilines': 'warn'

// Component best practices
'react/no-access-state-in-setstate': 'warn'
'react/no-did-mount-set-state': 'warn'
'react/no-direct-mutation-state': 'warn'
'react/self-closing-comp': 'warn'
'react/require-render-return': 'warn'

// Hooks rules
'react-hooks/rules-of-hooks': 'error'        // Enforce hooks rules
'react-hooks/exhaustive-deps': 'off'         // Disabled by default for flexibility

// Import settings
settings: {
  'import/extensions': ['.js', '.jsx', '.ts', '.tsx', '.android.js', '.ios.ts', /* ... all platform extensions */],
  'import/resolver': {
    node: { extensions: [/* all supported extensions */] }
  },
  'import/ignore': [
    'node_modules[\\\/]+@?react-native' // Ignore Flow-based react-native modules
  ]
}

// Traditional config
overrides: [
  {
    files: ['*.web.*'],
    env: { browser: true }
  }
]

// Flat config
{
  files: ['**/*.web.*'],
  languageOptions: {
    globals: { ...globals.browser }
  }
}