feat: Support expo-router focus events

app.config.js

@@ -0,0 +1,4 @@
+module.exports = {
+ plugins: ['expo-router'],
+ platforms: ['android'],
+};

jest.config.js

@@ -94,7 +94,8 @@ const projects = [
  testEnvironment:
  '<rootDir>/node_modules/react-native/jest/react-native-env.js',
  transformIgnorePatterns: [
- 'node_modules\\/(?!(((jest-)?react-native)|@react-native(-community)?|react-navigation))', //from RN preset
+ //from RN preset
+ 'node_modules/(?!((jest-)?react-native|@react-native(-community)?)|react-navigation|expo(nent)?|@expo(nent)?/.*|@expo-google-fonts/.*|react-navigation|@react-navigation/.*|@unimodules/.*|unimodules|sentry-expo|native-base|react-native-svg)',
  '<rootDir>/.*__tests__/[^/]+\\.(web|node)\\.(j|t)sx?$',
  '<rootDir>/scripts',
  ],

package.json

@@ -60,6 +60,7 @@
  "@js-temporal/polyfill": "^0.4.4",
  "@react-navigation/native": "^6.0.13",
  "@react-navigation/native-stack": "^6.9.1",
+ "@testing-library/jest-native": "^5.4.3",
  "@testing-library/react": "15.0.5",
  "@testing-library/react-hooks": "8.0.1",
  "@testing-library/react-native": "12.4.5",
@@ -84,6 +85,11 @@
  "eslint-plugin-prettier": "5.1.3",
  "eslint-plugin-react": "7.34.1",
  "eslint-plugin-react-hooks": "4.6.1",
+ "expo": "50.0.17",
+ "expo-constants": "^15.4.6",
+ "expo-linking": "6.2.2",
+ "expo-modules-core": "1.11.13",
+ "expo-status-bar": "1.11.1",
  "ignore-styles": "^5.0.1",
  "jest": "29.7.0",
  "jest-environment-jsdom": "29.7.0",
@@ -95,6 +101,7 @@
  "react": "18.3.1",
  "react-dom": "18.3.1",
  "react-native": "0.74.0",
+ "react-native-reanimated": "^3.10.0",
  "react-native-safe-area-context": "^4.4.1",
  "react-native-screens": "^3.18.2",
  "react-test-renderer": "18.3.1",

packages/react/package.json

@@ -133,6 +133,7 @@
  "peerDependencies": {
  "@react-navigation/native": "^6.0.0",
  "@types/react": "^16.8.4 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+ "expo-router": "^3.0.0",
  "react": "^16.8.4 || ^17.0.0 || ^18.0.0 || ^19.0.0"
  },
  "peerDependenciesMeta": {
@@ -141,13 +142,25 @@
  },
  "@types/react": {
  "optional": true
+ },
+ "expo-router": {
+ "optional": true
  }
  },
  "devDependencies": {
  "@anansi/browserslist-config": "^1.4.2",
  "@react-navigation/native": "^6.1.6",
  "@types/node": "^20.0.0",
  "@types/react": "^18.0.30",
- "react-native": "^0.74.0"
+ "expo": ">=51.0.0-0 <52.0.0",
+ "expo-constants": "~15.4.6",
+ "expo-linking": "~6.2.2",
+ "expo-router": "~3.4.10",
+ "expo-status-bar": "~1.11.1",
+ "jest": "^29.7.0",
+ "jest-expo": "^50.0.4",
+ "react-native": "^0.74.0",
+ "react-native-safe-area-context": "4.8.2",
+ "react-native-screens": "~3.29.0"
  }
 }

packages/react/src/hooks/__tests__/expo-fixtures/_layout.tsx

@@ -0,0 +1,9 @@
+import { View, Text } from 'react-native';
+
+export default function Layout() {
+ return (
+ <View>
+ <Text>Auth Layout</Text>
+ </View>
+ );
+}

packages/react/src/hooks/__tests__/useSuspense.expo.native.tsx

@@ -0,0 +1,220 @@
+import {
+ State,
+ initialState,
+ Controller,
+ ActionTypes,
+ actionTypes,
+} from '@data-client/core';
+import { FetchAction } from '@data-client/core';
+import { Endpoint, FetchFunction, ReadEndpoint } from '@data-client/endpoint';
+import { normalize } from '@data-client/normalizr';
+import { makeRenderDataClient, mockInitialState } from '@data-client/test';
+import { jest } from '@jest/globals';
+import {
+ CoolerArticleResource,
+ InvalidIfStaleArticleResource,
+ GetNoEntities,
+ ArticleTimedResource,
+ ContextAuthdArticleResource,
+ AuthContext,
+ PaginatedArticleResource,
+ CoolerArticle,
+ PaginatedArticle,
+ FutureArticleResource,
+ ArticleTimed,
+} from '__tests__/new';
+import { createEntityMeta } from '__tests__/utils';
+import { Slot } from 'expo-router';
+import { ReactComponent } from 'expo-router/build/testing-library/context-stubs';
+import { renderRouter, screen, act } from 'expo-router/testing-library';
+import { SpyInstance } from 'jest-mock';
+import nock from 'nock';
+import React, { Suspense } from 'react';
+import { Text, View } from 'react-native';
+import { InteractionManager } from 'react-native';
+
+// relative imports to avoid circular dependency in tsconfig references
+import {
+ CacheProvider,
+ useController,
+ ControllerContext,
+ StateContext,
+ AsyncBoundary,
+} from '../..';
+import { articlesPages, payload, users, nested } from '../test-fixtures';
+import useSuspense from '../useSuspense';
+
+function ArticleComponentTester() {
+ const invalidIfStale = false,
+ schema = true;
+ let endpoint =
+ invalidIfStale ?
+ InvalidIfStaleArticleResource.get
+ : CoolerArticleResource.get;
+ if (!schema) {
+ endpoint = (endpoint as any).extend({ schema: undefined }) as any;
+ }
+ const article = useSuspense(endpoint, {
+ id: payload.id,
+ });
+ return (
+ <View testID="article">
+ <Text>{article.title}</Text>
+ <Text>{article.content}</Text>
+ </View>
+ );
+}
+
+describe('useSuspense()', () => {
+ let renderDataClient: ReturnType<typeof makeRenderDataClient>;
+ const fbmock = jest.fn();
+
+ async function testMalformedResponse(
+ payload: any,
+ endpoint: ReadEndpoint<FetchFunction, any> = CoolerArticleResource.get,
+ ) {
+ nock(/.*/)
+ .persist()
+ .defaultReplyHeaders({
+ 'Access-Control-Allow-Origin': '*',
+ 'Access-Control-Allow-Headers': '*',
+ 'Content-Type': 'application/json',
+ })
+ .get(`/article-cooler/400`)
+ .reply(200, payload);
+
+ const { result, waitForNextUpdate } = renderDataClient(() => {
+ return useSuspense(endpoint, {
+ id: 400,
+ });
+ });
+ expect(result.current).toBeUndefined();
+ await waitForNextUpdate();
+ expect(result.error).toBeDefined();
+ expect((result.error as any).status).toBeGreaterThan(399);
+ expect(result.error).toMatchSnapshot();
+ }
+
+ function Fallback() {
+ fbmock();
+ return null;
+ }
+
+ beforeAll(() => {
+ nock(/.*/)
+ .persist()
+ .defaultReplyHeaders({
+ 'Access-Control-Allow-Origin': '*',
+ 'Access-Control-Allow-Headers': 'Access-Token',
+ 'Content-Type': 'application/json',
+ })
+ .options(/.*/)
+ .reply(200)
+ .get(`/article-cooler/${payload.id}`)
+ .reply(200, payload)
+ .get(`/article-time/${payload.id}`)
+ .reply(200, { ...payload, createdAt: '2020-06-07T02:00:15+0000' })
+ .delete(`/article-cooler/${payload.id}`)
+ .reply(204, '')
+ .delete(`/article/${payload.id}`)
+ .reply(200, {})
+ .get(`/article-cooler/0`)
+ .reply(403, {})
+ .get(`/article-cooler/666`)
+ .reply(200, '')
+ .get(`/article-cooler`)
+ .reply(200, nested)
+ .get(`/user`)
+ .reply(200, users);
+ });
+
+ afterAll(() => {
+ nock.cleanAll();
+ });
+
+ beforeEach(() => {
+ renderDataClient = makeRenderDataClient(CacheProvider);
+ fbmock.mockReset();
+ });
+
+ afterEach(() => {
+ try {
+ screen.unmount();
+ // eslint-disable-next-line no-empty
+ } catch (e) {}
+ });
+
+ describe('result is stale and options.invalidIfStale is false', () => {
+ const { entities, result } = normalize(payload, CoolerArticle);
+ const fetchKey = CoolerArticleResource.get.key({ id: payload.id });
+ const state = {
+ ...initialState,
+ entities,
+ entityMeta: createEntityMeta(entities),
+ results: {
+ [fetchKey]: result,
+ },
+ meta: {
+ [fetchKey]: {
+ date: 0,
+ expiresAt: 0,
+ },
+ },
+ };
+ let thenavigation: any;
+ function Home() {
+ return <Text>Home</Text>;
+ }
+
+ const dispatch = jest.fn(() => Promise.resolve());
+ const controller = new Controller({ dispatch });
+ // const Stack = createNativeStackNavigator();
+
+ function Layout() {
+ return (
+ <StateContext.Provider value={state}>
+ <ControllerContext.Provider value={controller}>
+ <AsyncBoundary fallback={<Fallback />}>
+ <Slot />
+ </AsyncBoundary>
+ </ControllerContext.Provider>
+ </StateContext.Provider>
+ );
+ }
+ it('should fetch expo route changes and results are stale', async () => {
+ dispatch.mockClear();
+
+ const { getByText, getByTestId } = renderRouter(
+ {
+ _layout: Layout,
+ index: Home,
+ article: ArticleComponentTester,
+ },
+ {
+ initialUrl: '/article',
+ },
+ );
+
+ // expect(fbmock).not.toBeCalled();
+ // await new Promise(resolve =>
+ // InteractionManager.runAfterInteractions(() => {
+ // resolve(null);
+ // }),
+ // );
+ // // still should revalidate
+ // expect(dispatch.mock.calls.length).toBe(1);
+ // act(() => thenavigation.navigate('Home'));
+ // expect(getByText('Home')).toBeDefined();
+
+ // act(() => thenavigation.goBack());
+ // await new Promise(resolve =>
+ // InteractionManager.runAfterInteractions(() => {
+ // resolve(null);
+ // }),
+ // );
+ // expect(getByTestId('article')).toBeDefined();
+ // // since we got focus back we should have called again
+ // expect(dispatch.mock.calls.length).toBe(2);
+ });
+ });
+});

packages/react/src/hooks/__tests__/useSuspense.native.tsx

@@ -283,6 +283,8 @@ describe('useSuspense()', () => {
  });
  });
 
+});
+
  it('should NOT suspend if result is not stale and options.invalidIfStale is true', () => {
  const { entities, result } = normalize(payload, CoolerArticle);
  const fetchKey = InvalidIfStaleArticleResource.get.key({ id: payload.id });
@@ -473,19 +475,19 @@ describe('useSuspense()', () => {
  });*/
  });
 
- /*it('should not suspend with null params to useSuspense()', () => {
+ it('should not suspend with null params to useSuspense()', () => {
  let article: CoolerArticle | undefined;
  const { result } = renderDataClient(() => {
  const a = useSuspense(CoolerArticleResource.get, null);
- a.tags;
+ a?.tags;
  article = a;
  // @ts-expect-error
  const b: CoolerArticleResource = a;
  return 'done';
  });
  expect(result.current).toBe('done');
  expect(article).toBeUndefined();
- });*/
+ });
 
  it('should maintain schema structure even with null params', () => {
  let articles: PaginatedArticle[] | undefined;

packages/react/src/hooks/useFocusEffect.native.ts

@@ -1,25 +1,40 @@
-import type { useNavigation, NavigationProp } from '@react-navigation/native';
 import {
  type DependencyList,
  type EffectCallback,
  useEffect,
  useRef,
 } from 'react';
 
-const fakeNavigation = { addListener(name: string) {} } as any;
-let _useNavigation: typeof useNavigation = () => fakeNavigation;
-import('@react-navigation/native')
- .then(rn => {
- _useNavigation = rn.useNavigation;
+const fakeNavigation = {
+ addListener(name: string, cb: () => void) {
+ return () => {};
+ },
+};
+let _useNavigation = () => fakeNavigation;
+
+console.log('>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>');
+// if they are using expo-router they are more likely wanting to use that implementation
+// as react-navigation can often appear in node_modules when not used
+import('expo-router')
+ .then(router => {
+ _useNavigation = router.useNavigation;
+ console.log('hi', _useNavigation, router);
  })
- .catch(() => {});
+ .catch(e => {
+ console.log('caught error', e);
+ import('@react-navigation/native')
+ .then(rn => {
+ _useNavigation = rn.useNavigation;
+ })
+ .catch(() => {});
+ });
 
 function useFocusEffect(
  effect: EffectCallback,
  deps?: DependencyList,
  runOnMount = false,
 ) {
- let navigation: NavigationProp<ReactNavigation.RootParamList>;
+ let navigation: typeof fakeNavigation;
  // if we aren't in react-navigation context, just ignore focus events
  try {
  navigation = _useNavigation();