chore(examples/react/react-native): add a flat config and run 'test:eslint'

examples/react/react-native/App.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { AppStateStatus, Platform } from 'react-native'
+import { Platform } from 'react-native'
 import { NavigationContainer } from '@react-navigation/native'
 import {
   QueryClient,
@@ -10,6 +10,7 @@ import {
 import { useAppState } from './src/hooks/useAppState'
 import { MoviesStack } from './src/navigation/MoviesStack'
 import { useOnlineManager } from './src/hooks/useOnlineManager'
+import type { AppStateStatus } from 'react-native'
 
 function onAppStateChange(status: AppStateStatus) {
   // React Query already supports in web browser refetch on window focus by default

examples/react/react-native/eslint.config.mjs

@@ -0,0 +1,12 @@
+// @ts-check
+
+import { tanstackConfig } from '@tanstack/eslint-config'
+import pluginQuery from '@tanstack/eslint-plugin-query'
+import pluginReact from '@eslint-react/eslint-plugin'
+import { defineConfig } from 'eslint/config'
+
+export default defineConfig([
+  ...tanstackConfig,
+  ...pluginQuery.configs['flat/recommended'],
+  pluginReact.configs.recommended,
+])

examples/react/react-native/package.json

@@ -8,6 +8,7 @@
     "ios": "expo start --ios",
     "web": "expo start --web",
     "eject": "expo eject",
+    "test:eslint": "eslint ./App.tsx ./src",
     "test:types": "tsc --noEmit"
   },
   "dependencies": {
@@ -30,7 +31,9 @@
   },
   "devDependencies": {
     "@babel/core": "^7.24.9",
+    "@eslint-react/eslint-plugin": "^5.21.0",
     "@expo/config": "^57.0.9",
+    "@tanstack/eslint-plugin-query": "^5.104.3",
     "@types/react": "^19.2.7",
     "typescript": "5.8.3"
   }

examples/react/react-native/src/lib/api.ts

@@ -8,7 +8,7 @@ export type Movie = {
 export type MovieDetails = Movie & {
   info: {
     plot: string
-    actors: string[]
+    actors: Array<string>
   }
 }
 
@@ -18,7 +18,7 @@ function delay(t: number) {
   })
 }
 
-export async function fetchMovies(): Promise<Movie[]> {
+export async function fetchMovies(): Promise<Array<Movie>> {
   console.log('fetchMovies')
 
   await delay(200 + Math.floor(Math.random() * 2000))

examples/react/react-native/src/screens/MoviesListScreen.tsx

@@ -22,12 +22,13 @@ type Props = {
 }
 
 export function MoviesListScreen({ navigation }: Props) {
-  const { isPending, isError, error, data, refetch } = useQuery<Movie[], Error>(
-    {
-      queryKey: ['movies'],
-      queryFn: fetchMovies,
-    },
-  )
+  const { isPending, isError, error, data, refetch } = useQuery<
+    Array<Movie>,
+    Error
+  >({
+    queryKey: ['movies'],
+    queryFn: fetchMovies,
+  })
   const { isRefetchingByUser, refetchByUser } = useRefreshByUser(refetch)
   useRefreshOnFocus(refetch)