react-router-native 6.3.0 → 6.4.0-pre.3

package/.eslintrc

@@ -0,0 +1,5 @@
+{
+  "globals": {
+    "__DEV__": true
+  }
+}

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# react-router-native
+
+## 6.4.0-pre.3
+
+### Patch Changes
+
+- Updated dependencies

package/__tests__/__snapshots__/deep-linking-test.tsx.snap

@@ -0,0 +1,33 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`deep linking when a "url" event happens navigates to the matching route 1`] = `
+<View>
+  <Text>
+    Home
+  </Text>
+</View>
+`;
+
+exports[`deep linking when a "url" event happens navigates to the matching route 2`] = `
+<View>
+  <Text>
+    About
+  </Text>
+</View>
+`;
+
+exports[`deep linking when there is an initial URL navigates to the matching route 1`] = `
+<View>
+  <Text>
+    About
+  </Text>
+</View>
+`;
+
+exports[`deep linking when there is no initial URL stays on the initial route 1`] = `
+<View>
+  <Text>
+    Home
+  </Text>
+</View>
+`;

package/__tests__/__snapshots__/link-press-test.tsx.snap

@@ -0,0 +1,117 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`A <Link> press calls the custom onPress handler 1`] = `
+<View>
+  <Text>
+    Home
+  </Text>
+  <View
+    accessible={true}
+    focusable={true}
+    isTVSelectable={true}
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={null}
+  >
+    <Text
+      style={null}
+    >
+      About
+    </Text>
+  </View>
+</View>
+`;
+
+exports[`A <Link> press navigates to the new view 1`] = `
+<View>
+  <Text>
+    Home
+  </Text>
+  <View
+    accessible={true}
+    focusable={true}
+    isTVSelectable={true}
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={null}
+  >
+    <Text
+      style={null}
+    >
+      About
+    </Text>
+  </View>
+</View>
+`;
+
+exports[`A <Link> press navigates to the new view 2`] = `
+<View>
+  <Text>
+    About
+  </Text>
+</View>
+`;
+
+exports[`A <Link> press when event.preventDefault() is used in the onPress handler does not navigate to the new view 1`] = `
+<View>
+  <Text>
+    Home
+  </Text>
+  <View
+    accessible={true}
+    focusable={true}
+    isTVSelectable={true}
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={null}
+  >
+    <Text
+      style={null}
+    >
+      About
+    </Text>
+  </View>
+</View>
+`;
+
+exports[`A <Link> press when event.preventDefault() is used in the onPress handler does not navigate to the new view 2`] = `
+<View>
+  <Text>
+    Home
+  </Text>
+  <View
+    accessible={true}
+    focusable={true}
+    isTVSelectable={true}
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={null}
+  >
+    <Text
+      style={null}
+    >
+      About
+    </Text>
+  </View>
+</View>
+`;

package/__tests__/__snapshots__/search-params-test.tsx.snap

@@ -0,0 +1,39 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`useSearchParams reads and writes the search string 1`] = `
+<View>
+  <Text>
+    The current query is "
+    Michael Jackson
+    ".
+  </Text>
+  <View>
+    <TextInput
+      allowFontScaling={true}
+      onChangeText={[Function]}
+      rejectResponderTermination={true}
+      underlineColorAndroid="transparent"
+      value="Michael Jackson"
+    />
+  </View>
+</View>
+`;
+
+exports[`useSearchParams reads and writes the search string 2`] = `
+<View>
+  <Text>
+    The current query is "
+    Ryan Florence
+    ".
+  </Text>
+  <View>
+    <TextInput
+      allowFontScaling={true}
+      onChangeText={[Function]}
+      rejectResponderTermination={true}
+      underlineColorAndroid="transparent"
+      value="Ryan Florence"
+    />
+  </View>
+</View>
+`;

package/__tests__/__snapshots__/useLinkPressHandler-test.tsx.snap

@@ -0,0 +1,36 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Custom link with useLinkPressHandler navigates to the new view 1`] = `
+<View>
+  <Text>
+    Home
+  </Text>
+  <View
+    accessible={true}
+    focusable={true}
+    isTVSelectable={true}
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={null}
+  >
+    <Text
+      style={null}
+    >
+      About
+    </Text>
+  </View>
+</View>
+`;
+
+exports[`Custom link with useLinkPressHandler navigates to the new view 2`] = `
+<View>
+  <Text>
+    About
+  </Text>
+</View>
+`;

package/__tests__/deep-linking-test.tsx

@@ -0,0 +1,157 @@
+import * as React from "react";
+import { mocked } from "ts-jest/utils";
+import { Linking as _Linking, Text, View } from "react-native";
+import * as TestRenderer from "react-test-renderer";
+import {
+  NativeRouter,
+  Routes,
+  Route,
+  useDeepLinking,
+} from "react-router-native";
+import { MockEvent, mockPromiseThatResolvesImmediatelyWith } from "./utils";
+
+// Ensures TypeScript understands that Linking is a mock
+const Linking = mocked(_Linking);
+
+describe("deep linking", () => {
+  describe("when there is no initial URL", () => {
+    it("stays on the initial route", () => {
+      Linking.getInitialURL.mockImplementation(() => {
+        return mockPromiseThatResolvesImmediatelyWith<string>();
+      });
+
+      function Home() {
+        useDeepLinking();
+        return (
+          <View>
+            <Text>Home</Text>
+          </View>
+        );
+      }
+
+      function About() {
+        return (
+          <View>
+            <Text>About</Text>
+          </View>
+        );
+      }
+
+      let renderer: TestRenderer.ReactTestRenderer;
+      TestRenderer.act(() => {
+        renderer = TestRenderer.create(
+          <NativeRouter initialEntries={["/home"]}>
+            <Routes>
+              <Route path="home" element={<Home />} />
+              <Route path="about" element={<About />} />
+            </Routes>
+          </NativeRouter>
+        );
+      });
+
+      expect(renderer.toJSON()).toMatchSnapshot();
+
+      Linking.getInitialURL.mockRestore();
+    });
+  });
+
+  describe("when there is an initial URL", () => {
+    it("navigates to the matching route", () => {
+      Linking.getInitialURL.mockImplementation(() => {
+        return mockPromiseThatResolvesImmediatelyWith("app:///about");
+      });
+
+      function Home() {
+        useDeepLinking();
+        return (
+          <View>
+            <Text>Home</Text>
+          </View>
+        );
+      }
+
+      function About() {
+        return (
+          <View>
+            <Text>About</Text>
+          </View>
+        );
+      }
+
+      let renderer: TestRenderer.ReactTestRenderer;
+      TestRenderer.act(() => {
+        renderer = TestRenderer.create(
+          <NativeRouter initialEntries={["/home"]}>
+            <Routes>
+              <Route path="home" element={<Home />} />
+              <Route path="about" element={<About />} />
+            </Routes>
+          </NativeRouter>
+        );
+      });
+
+      expect(renderer!.toJSON()).toMatchSnapshot();
+
+      Linking.getInitialURL.mockRestore();
+    });
+  });
+
+  describe('when a "url" event happens', () => {
+    it("navigates to the matching route", () => {
+      Linking.getInitialURL.mockImplementation(() => {
+        return mockPromiseThatResolvesImmediatelyWith<string>();
+      });
+
+      let listeners: Array<(...args: any[]) => any> = [];
+      Linking.addEventListener.mockImplementation((type, listener) => {
+        if (type !== "url") throw new Error(`Invalid event type: ${type}`);
+        listeners.push(listener);
+      });
+
+      function changeURL(url: string) {
+        let event = new MockEvent("url", { url });
+        listeners.forEach((listener) => listener(event));
+      }
+
+      function Home() {
+        useDeepLinking();
+        return (
+          <View>
+            <Text>Home</Text>
+          </View>
+        );
+      }
+
+      function About() {
+        return (
+          <View>
+            <Text>About</Text>
+          </View>
+        );
+      }
+
+      let renderer: TestRenderer.ReactTestRenderer;
+      TestRenderer.act(() => {
+        renderer = TestRenderer.create(
+          <NativeRouter initialEntries={["/home"]}>
+            <Routes>
+              <Route path="home" element={<Home />} />
+              <Route path="about" element={<About />} />
+            </Routes>
+          </NativeRouter>
+        );
+      });
+
+      expect(renderer.toJSON()).toMatchSnapshot();
+
+      TestRenderer.act(() => {
+        changeURL("app:///about");
+      });
+
+      expect(renderer.toJSON()).toMatchSnapshot();
+
+      Linking.addEventListener.mockRestore();
+      Linking.getInitialURL.mockRestore();
+    });
+  });
+});

package/__tests__/exports-test.tsx

@@ -0,0 +1,10 @@
+import * as ReactRouter from "react-router";
+import * as ReactRouterNative from "react-router-native";
+
+describe("react-router-native", () => {
+  for (let key in ReactRouter) {
+    it(`re-exports ${key} from react-router`, () => {
+      expect(ReactRouterNative[key]).toBe(ReactRouter[key]);
+    });
+  }
+});

package/__tests__/link-press-test.tsx

@@ -0,0 +1,147 @@
+import * as React from "react";
+import { Text, TouchableHighlight, View } from "react-native";
+import { Link, NativeRouter, Routes, Route } from "react-router-native";
+import * as TestRenderer from "react-test-renderer";
+
+import { press } from "./utils";
+
+describe("A <Link> press", () => {
+  it("navigates to the new view", () => {
+    function Home() {
+      return (
+        <View>
+          <Text>Home</Text>
+          <Link to="../about">
+            <Text>About</Text>
+          </Link>
+        </View>
+      );
+    }
+
+    function About() {
+      return (
+        <View>
+          <Text>About</Text>
+        </View>
+      );
+    }
+
+    let renderer: TestRenderer.ReactTestRenderer;
+    TestRenderer.act(() => {
+      renderer = TestRenderer.create(
+        <NativeRouter initialEntries={["/home"]}>
+          <Routes>
+            <Route path="home" element={<Home />} />
+            <Route path="about" element={<About />} />
+          </Routes>
+        </NativeRouter>
+      );
+    });
+
+    expect(renderer.toJSON()).toMatchSnapshot();
+
+    let touchable = renderer.root.findByType(TouchableHighlight);
+
+    TestRenderer.act(() => {
+      press(touchable);
+    });
+
+    expect(renderer.toJSON()).toMatchSnapshot();
+  });
+
+  it("calls the custom onPress handler", () => {
+    let spy = jest.fn();
+
+    function Home() {
+      return (
+        <View>
+          <Text>Home</Text>
+          <Link to="../about" onPress={spy}>
+            <Text>About</Text>
+          </Link>
+        </View>
+      );
+    }
+
+    function About() {
+      return (
+        <View>
+          <Text>About</Text>
+        </View>
+      );
+    }
+
+    let renderer: TestRenderer.ReactTestRenderer;
+    TestRenderer.act(() => {
+      renderer = TestRenderer.create(
+        <NativeRouter initialEntries={["/home"]}>
+          <Routes>
+            <Route path="home" element={<Home />} />
+            <Route path="about" element={<About />} />
+          </Routes>
+        </NativeRouter>
+      );
+    });
+
+    expect(renderer.toJSON()).toMatchSnapshot();
+
+    let touchable = renderer.root.findByType(TouchableHighlight);
+
+    let pressEvent;
+    TestRenderer.act(() => {
+      pressEvent = press(touchable);
+    });
+
+    expect(spy).toHaveBeenCalledWith(pressEvent);
+  });
+
+  describe("when event.preventDefault() is used in the onPress handler", () => {
+    it("does not navigate to the new view", () => {
+      function Home() {
+        return (
+          <View>
+            <Text>Home</Text>
+            <Link
+              to="../about"
+              onPress={(event) => {
+                event.preventDefault();
+              }}
+            >
+              <Text>About</Text>
+            </Link>
+          </View>
+        );
+      }
+
+      function About() {
+        return (
+          <View>
+            <Text>About</Text>
+          </View>
+        );
+      }
+
+      let renderer: TestRenderer.ReactTestRenderer;
+      TestRenderer.act(() => {
+        renderer = TestRenderer.create(
+          <NativeRouter initialEntries={["/home"]}>
+            <Routes>
+              <Route path="home" element={<Home />} />
+              <Route path="about" element={<About />} />
+            </Routes>
+          </NativeRouter>
+        );
+      });
+
+      expect(renderer.toJSON()).toMatchSnapshot();
+
+      let touchable = renderer.root.findByType(TouchableHighlight);
+
+      TestRenderer.act(() => {
+        press(touchable);
+      });
+
+      expect(renderer.toJSON()).toMatchSnapshot();
+    });
+  });
+});

package/__tests__/search-params-test.tsx

@@ -0,0 +1,68 @@
+import * as React from "react";
+import { View, Text, TextInput } from "react-native";
+import {
+  NativeRouter,
+  Routes,
+  Route,
+  useSearchParams,
+} from "react-router-native";
+import * as TestRenderer from "react-test-renderer";
+
+describe("useSearchParams", () => {
+  function SearchForm({
+    children,
+  }: {
+    children: React.ReactNode;
+    onSubmit?: any;
+  }) {
+    return <View>{children}</View>;
+  }
+
+  function SearchPage() {
+    let [searchParams, setSearchParams] = useSearchParams({ q: "" });
+    let [query, setQuery] = React.useState(searchParams.get("q")!);
+
+    function handleSubmit() {
+      setSearchParams({ q: query });
+    }
+
+    return (
+      <View>
+        <Text>The current query is "{searchParams.get("q")}".</Text>
+
+        <SearchForm onSubmit={handleSubmit}>
+          <TextInput value={query} onChangeText={setQuery} />
+        </SearchForm>
+      </View>
+    );
+  }
+
+  it("reads and writes the search string", () => {
+    let renderer: TestRenderer.ReactTestRenderer;
+    TestRenderer.act(() => {
+      renderer = TestRenderer.create(
+        <NativeRouter initialEntries={["/search?q=Michael+Jackson"]}>
+          <Routes>
+            <Route path="search" element={<SearchPage />} />
+          </Routes>
+        </NativeRouter>
+      );
+    });
+
+    expect(renderer.toJSON()).toMatchSnapshot();
+
+    let textInput = renderer.root.findByType(TextInput);
+
+    TestRenderer.act(() => {
+      textInput.props.onChangeText("Ryan Florence");
+    });
+
+    let searchForm = renderer.root.findByType(SearchForm);
+
+    TestRenderer.act(() => {
+      searchForm.props.onSubmit();
+    });
+
+    expect(renderer.toJSON()).toMatchSnapshot();
+  });
+});

package/__tests__/setup.ts

@@ -0,0 +1,9 @@
+jest.mock("react-native/Libraries/Linking/Linking", () => {
+  return {
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    openURL: jest.fn(),
+    canOpenURL: jest.fn(),
+    getInitialURL: jest.fn(),
+  };
+});

package/__tests__/useLinkPressHandler-test.tsx

@@ -0,0 +1,61 @@
+import * as React from "react";
+import { Text, TouchableHighlight, View } from "react-native";
+import type { LinkProps } from "react-router-native";
+import {
+  NativeRouter,
+  Route,
+  Routes,
+  useLinkPressHandler,
+} from "react-router-native";
+import * as TestRenderer from "react-test-renderer";
+
+import { press } from "./utils";
+
+describe("Custom link with useLinkPressHandler", () => {
+  function Link({ to, replace, state, ...rest }: LinkProps) {
+    let handlePress = useLinkPressHandler(to, { replace, state });
+    return <TouchableHighlight {...rest} onPress={handlePress} />;
+  }
+  it("navigates to the new view", () => {
+    function Home() {
+      return (
+        <View>
+          <Text>Home</Text>
+          <Link to="../about">
+            <Text>About</Text>
+          </Link>
+        </View>
+      );
+    }
+
+    function About() {
+      return (
+        <View>
+          <Text>About</Text>
+        </View>
+      );
+    }
+
+    let renderer: TestRenderer.ReactTestRenderer;
+    TestRenderer.act(() => {
+      renderer = TestRenderer.create(
+        <NativeRouter initialEntries={["/home"]}>
+          <Routes>
+            <Route path="home" element={<Home />} />
+            <Route path="about" element={<About />} />
+          </Routes>
+        </NativeRouter>
+      );
+    });
+
+    expect(renderer.toJSON()).toMatchSnapshot();
+
+    let touchable = renderer.root.findByType(TouchableHighlight);
+
+    TestRenderer.act(() => {
+      press(touchable);
+    });
+
+    expect(renderer.toJSON()).toMatchSnapshot();
+  });
+});