Add same change to react router native

Author: brophdawg11

packages/react-router-native/__tests__/__snapshots__/search-params-test.tsx.snap

@@ -1,5 +1,30 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`useSearchParams allows removal of search params when a default is provided 1`] = `
+<View>
+  <Text>
+    The current query is "
+    initial
+    ".
+  </Text>
+  <View>
+    Click
+  </View>
+</View>
+`;
+
+exports[`useSearchParams allows removal of search params when a default is provided 2`] = `
+<View>
+  <Text>
+    The current query is "
+    ".
+  </Text>
+  <View>
+    Click
+  </View>
+</View>
+`;
+
 exports[`useSearchParams reads and writes the search string (functional update) 1`] = `
 <View>
   <Text>

packages/react-router-native/__tests__/search-params-test.tsx

@@ -18,6 +18,10 @@ describe("useSearchParams", () => {
     return <View>{children}</View>;
   }
 
+  function Button({ children }: { children: React.ReactNode; onClick?: any }) {
+    return <View>{children}</View>;
+  }
+
   it("reads and writes the search string", () => {
     function SearchPage() {
       let [searchParams, setSearchParams] = useSearchParams({ q: "" });
@@ -112,4 +116,40 @@ describe("useSearchParams", () => {
 
     expect(renderer.toJSON()).toMatchSnapshot();
   });
+
+  it("allows removal of search params when a default is provided", () => {
+    function SearchPage() {
+      let [searchParams, setSearchParams] = useSearchParams({
+        value: "initial",
+      });
+
+      return (
+        <View>
+          <Text>The current query is "{searchParams.get("value")}".</Text>
+          <Button onClick={() => setSearchParams({})}>Click</Button>
+        </View>
+      );
+    }
+
+    let renderer: TestRenderer.ReactTestRenderer;
+    TestRenderer.act(() => {
+      renderer = TestRenderer.create(
+        <NativeRouter initialEntries={["/search?value=initial"]}>
+          <Routes>
+            <Route path="search" element={<SearchPage />} />
+          </Routes>
+        </NativeRouter>
+      );
+    });
+
+    expect(renderer.toJSON()).toMatchSnapshot();
+
+    let button = renderer.root.findByType(Button);
+
+    TestRenderer.act(() => {
+      button.props.onClick();
+    });
+
+    expect(renderer.toJSON()).toMatchSnapshot();
+  });
 });

packages/react-router-native/index.tsx

@@ -288,16 +288,19 @@ export function useSearchParams(
   defaultInit?: URLSearchParamsInit
 ): [URLSearchParams, SetURLSearchParams] {
   let defaultSearchParamsRef = React.useRef(createSearchParams(defaultInit));
+  let hasSetSearchParamsRef = React.useRef(false);
 
   let location = useLocation();
   let searchParams = React.useMemo(() => {
     let searchParams = createSearchParams(location.search);
 
-    for (let key of defaultSearchParamsRef.current.keys()) {
-      if (!searchParams.has(key)) {
-        defaultSearchParamsRef.current.getAll(key).forEach((value) => {
-          searchParams.append(key, value);
-        });
+    if (!hasSetSearchParamsRef.current) {
+      for (let key of defaultSearchParamsRef.current.keys()) {
+        if (!searchParams.has(key)) {
+          defaultSearchParamsRef.current.getAll(key).forEach((value) => {
+            searchParams.append(key, value);
+          });
+        }
       }
     }
 
@@ -310,6 +313,7 @@ export function useSearchParams(
       const newSearchParams = createSearchParams(
         typeof nextInit === "function" ? nextInit(searchParams) : nextInit
       );
+      hasSetSearchParamsRef.current = true;
       navigate("?" + newSearchParams, navigateOpts);
     },
     [navigate, searchParams]