React Native Support

[RajeshPandey057]

Now that expo SDK 53 supports flat config, can someone help me how to set this up with expo SDK 53 ?

[yjose]

I'm not sure what you're looking for. I was using it before SDK 53, and it worked just fine. Here's how I had it set up:

import antfu from '@antfu/eslint-config';
import pluginQuery from '@tanstack/eslint-plugin-query';

import expoPlugin from 'eslint-plugin-expo';
import tailwindcss from 'eslint-plugin-tailwindcss';
import { globalIgnores } from 'eslint/config';

export default antfu(
  {
    react: true,
  },
  globalIgnores(['node_modules', '__tests__/', '.vscode/', 'android/', 'coverage/', 'ios/', '.expo/', '.expo-shared', 'docs/', '.github/PULL_REQUEST_TEMPLATE.md', '.github/ISSUE_TEMPLATE.md']),
  {
    plugins: {
      '@tanstack/query': pluginQuery,
      'expo': expoPlugin,
      'tailwindcss': tailwindcss,
    },
    rules: {
      'antfu/top-level-function': 'off',
      '@tanstack/query/exhaustive-deps': 'error',
      'style/semi': ['error', 'always'],
      'ts/no-use-before-define': 'warn',
      'no-console': 'warn',
      '@typescript-eslint/no-require-imports': 'off',
      'no-use-before-define': 'off',
      '@typescript-eslint/no-use-before-define': 'off',
      'unicorn/filename-case': [
        'error',
        {
          case: 'kebabCase',
          ignore: ['README.md', '.github/*'],
        },
      ],
      // expo plugin rules
      'expo/no-env-var-destructuring': ['error'],
      'expo/no-dynamic-env-var': ['error'],

      // tailwindcss plugin rules
      ...tailwindcss.configs.recommended.rules,
    },
  },
);

[RajeshPandey057]

SDK 53 supports flat es config and has also seems to have changed how packages are exported from metro so it is causing issues,
I will try this config with SDK53

[RajeshPandey057]

Checked it and it's working with SDK 53 flowlessly
Thanks @yjose 🙌

I don't use native wind and do like to keep prettier around so here's my config adapted in case someone needs it in future

import antfu from '@antfu/eslint-config';
import pluginQuery from '@tanstack/eslint-plugin-query';
import expoPlugin from 'eslint-plugin-expo';
import { globalIgnores } from 'eslint/config';

export default antfu(
	{
		react: true,
		type: 'app',
		typescript: true,
		formatters: true,
		stylistic: {
			semi: true,
			useTabs: true,
			indent: 'tab',
			quotes: 'single',
			avoidEscape: true,
			allowSingleLine: true
		}
	},

	globalIgnores([
		'node_modules/',
		'__tests__/',
		'.vscode/',
		'android/',
		'coverage/',
		'ios/',
		'.expo/',
		'.expo-shared/',
		'docs/',
		'.github/PULL_REQUEST_TEMPLATE.md',
		'.github/ISSUE_TEMPLATE.md',
		'.DS_Store',
		// Ignore env files
		'.env',
		'.env.*',
		'!.env.example',
		'!*.cjs',
		// Ignore next build and cache
		'.next/',
		'.cache/',
		'public/',
		'build/',
		'package/',
		'nativewind-env.d.ts',
		'expo-env.d.ts',
		// Ignore docker file
		'docker-data/',
		// Ignore config file
		'next.config.mjs',
		'postcss.config.mjs',
		'.eslintrc.cjs',
		// Ignore files for PNPM, NPM and YARN
		'pnpm-lock.yaml',
		'package-lock.json',
		'yarn.lock',
		// for testing
		'test-results/',
		'playwright-report/',
		'blob-report/',
		'playwright/.cache/',
		'*storybook.log',
		// Auto Generated PWA files
		'**/public/sw.js',
		'**/public/workbox-*.js',
		'**/public/worker-*.js',
		'**/public/sw.js.map',
		'**/public/workbox-*.js.map',
		'**/public/worker-*.js.map',
		'**/public/swe-worker-*'
	]),
	{
		plugins: {
			expo: expoPlugin,
			'@tanstack/query': pluginQuery
		},
		rules: {
			'no-console': ['warn'],
			'antfu/if-newline': 'off',
			'unicorn/filename-case': [
				'error',
				{
					case: 'kebabCase',
					ignore: ['README.md']
				}
			],
			'no-use-before-define': 'off',
			'node/no-process-env': ['error'],
			'antfu/top-level-function': 'off',
			'ts/no-use-before-define': 'warn',
			'style/semi': ['error', 'always'],
			'antfu/no-top-level-await': ['off'],
			'expo/no-dynamic-env-var': ['error'],
			'node/prefer-global/process': ['off'],
			'antfu/consistent-list-newline': ['off'],
			'@tanstack/query/exhaustive-deps': 'error',
			'expo/no-env-var-destructuring': ['error'],
			'@stylistic/eol-last': ['error', 'always'],
			'@stylistic/comma-dangle': ['error', 'never'],
			'@typescript-eslint/no-require-imports': 'off',
			'@stylistic/arrow-parens': ['error', 'always'],
			'@typescript-eslint/no-use-before-define': 'off',
			'@stylistic/quote-props': ['error', 'as-needed'],
			'@stylistic/operator-linebreak': ['off', 'none'],
			'@stylistic/jsx-closing-bracket-location': [
				1,
				{ selfClosing: 'line-aligned', nonEmpty: 'after-props' }
			],
			'@stylistic/quotes': ['error', 'single', { avoidEscape: true }],
			'perfectionist/sort-imports': ['error', { tsconfigRootDir: '.' }],
			'@stylistic/brace-style': ['error', '1tbs', { allowSingleLine: true }],
			'@stylistic/jsx-one-expression-per-line': ['error', { allow: 'non-jsx' }],
			'@stylistic/multiline-ternary': ['error', 'never', { ignoreJSX: true }]
		}
	}
);