chore: Update dependencies, RN 83 (#125)

* Update dependencies, RN 83

* Fix tests

* Update node, fix tests

Author: alexbrazier

.github/workflows/actions.yml

@@ -15,7 +15,7 @@ jobs:
         run: corepack enable
       - uses: actions/setup-node@v4
         with:
-          node-version: '20'
+          node-version: '24'
       - run: yarn install --frozen-lockfile
       - run: yarn prepare
       - run: yarn lint
@@ -29,6 +29,6 @@ jobs:
         run: corepack enable
       - uses: actions/setup-node@v4
         with:
-          node-version: '20'
+          node-version: '24'
       - run: yarn install --frozen-lockfile
       - run: yarn test --coverage

example/package.json

@@ -12,17 +12,19 @@
     "test": "jest"
   },
   "dependencies": {
-    "@apollo/client": "^3.13.8",
-    "expo": "~53.0.9",
+    "@apollo/client": "^4.1.6",
+    "expo": "~55.0.5",
     "graphql": "^16.11.0",
-    "react": "~19.0.0",
-    "react-native": "0.79.2"
+    "react": "19.2.0",
+    "react-native": "0.83.2",
+    "react-native-safe-area-context": "^5.7.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.27.1",
-    "@babel/runtime": "^7.27.1",
-    "@react-native/metro-config": "^0.79.2",
-    "react-native-builder-bob": "^0.40.10"
+    "@babel/core": "^7.29.0",
+    "@babel/runtime": "^7.28.6",
+    "@react-native/metro-config": "^0.84.1",
+    "babel-preset-expo": "^55.0.10",
+    "react-native-builder-bob": "^0.40.18"
   },
   "resolutions": {
     "semver": "^7.5.4"

example/src/App.tsx

@@ -2,7 +2,6 @@ import React, { useCallback, useLayoutEffect, useState } from 'react';
 import {
   StyleSheet,
   Button,
-  SafeAreaView,
   View,
   Text,
   TouchableOpacity,
@@ -14,11 +13,18 @@ import NetworkLogger, {
   startNetworkLogging,
   stopNetworkLogging,
 } from 'react-native-network-logger';
-import { getHero, getRates, getUser } from './apolloClient';
+import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
+import { getTodos } from './apolloClient';
 
 const formData = new FormData();
 formData.append('test', 'hello');
 
+const fetchStatus = async (status: number, sleepSeconds?: number) => {
+  return fetch(`https://httpbin.org/status/${status}`, {
+    headers: { 'X-HttpBin-Sleep': `${sleepSeconds || 0}` },
+  });
+};
+
 const requests = [
   async () =>
     fetch(
@@ -35,29 +41,27 @@ const requests = [
       method: 'POST',
       body: formData,
     }),
-  async () => fetch('https://httpstat.us/200', { method: 'HEAD' }),
+  async () => fetch('https://httpbin.org/status/200', { method: 'HEAD' }),
   async () =>
     fetch('https://postman-echo.com/put', {
       method: 'PUT',
       body: JSON.stringify({ test: 'hello' }),
     }),
-  async () => fetch('https://httpstat.us/200?sleep=300'),
-  async () => fetch('https://httpstat.us/204?sleep=200'),
-  async () => fetch('https://httpstat.us/302?sleep=200'),
-  async () => fetch('https://httpstat.us/400?sleep=200'),
-  async () => fetch('https://httpstat.us/401?sleep=200'),
-  async () => fetch('https://httpstat.us/403?sleep=200'),
-  async () => fetch('https://httpstat.us/404?sleep=400'),
-  async () => fetch('https://httpstat.us/500?sleep=5000'),
-  async () => fetch('https://httpstat.us/503?sleep=200'),
-  async () => fetch('https://httpstat.us/504?sleep=10000'),
+  async () => fetchStatus(200, 0.3),
+  async () => fetchStatus(204, 0.2),
+  async () => fetchStatus(302, 0.2),
+  async () => fetchStatus(400, 0.2),
+  async () => fetchStatus(401, 0.2),
+  async () => fetchStatus(403, 0.2),
+  async () => fetchStatus(404, 0.4),
+  async () => fetchStatus(500, 5),
+  async () => fetchStatus(503, 0.2),
+  async () => fetchStatus(504, 10),
 
   // Non JSON response
   async () => fetch('https://postman-echo.com/stream/2'),
 
-  async () => getRates(), // 405
-  async () => getHero(), // 400
-  async () => getUser(), // 200
+  async () => getTodos(),
   // Test requests that fail
   // async () => fetch('https://failingrequest'),
 ];
@@ -78,7 +82,7 @@ export default function App() {
     startNetworkLogging({
       ignoredHosts: ['127.0.0.1'],
       maxRequests,
-      ignoredUrls: ['https://httpstat.us/other'],
+      ignoredUrls: ['https://httpbin.org/status/other'],
       ignoredPatterns: [/^POST http:\/\/(192|10)/, /\/logs$/, /\/symbolicate$/],
     });
   }, []);
@@ -118,36 +122,38 @@ export default function App() {
   );
 
   return (
-    <SafeAreaView style={styles.container}>
-      <StatusBar
-        barStyle={isDark ? 'light-content' : 'dark-content'}
-        backgroundColor={isDark ? '#2d2a28' : 'white'}
-      />
-      <View style={styles.header}>
-        <TouchableOpacity
-          style={styles.navButton}
-          testID="backButton"
-          onPress={backHandler}
-          hitSlop={{ top: 20, left: 20, bottom: 20, right: 20 }}
-        >
-          <Text style={styles.backButtonText}>{'‹'}</Text>
-        </TouchableOpacity>
-        <Text style={styles.title} accessibilityRole="header">
-          react-native-network-logger
-        </Text>
-        <View style={styles.navButton} />
-      </View>
-      {(unmountNetworkLogger && remountButton) || (
-        <NetworkLogger theme={theme} maxRows={10} />
-      )}
-      <View style={styles.bottomView}>
-        <Button
-          title="Toggle Theme"
-          onPress={() => setTheme(theme === 'light' ? 'dark' : 'light')}
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <StatusBar
+          barStyle={isDark ? 'light-content' : 'dark-content'}
+          backgroundColor={isDark ? '#2d2a28' : 'white'}
         />
-        <Button title="Make request" onPress={makeRequest} />
-      </View>
-    </SafeAreaView>
+        <View style={styles.header}>
+          <TouchableOpacity
+            style={styles.navButton}
+            testID="backButton"
+            onPress={backHandler}
+            hitSlop={{ top: 20, left: 20, bottom: 20, right: 20 }}
+          >
+            <Text style={styles.backButtonText}>{'‹'}</Text>
+          </TouchableOpacity>
+          <Text style={styles.title} accessibilityRole="header">
+            react-native-network-logger
+          </Text>
+          <View style={styles.navButton} />
+        </View>
+        {(unmountNetworkLogger && remountButton) || (
+          <NetworkLogger theme={theme} maxRows={10} />
+        )}
+        <View style={styles.bottomView}>
+          <Button
+            title="Toggle Theme"
+            onPress={() => setTheme(theme === 'light' ? 'dark' : 'light')}
+          />
+          <Button title="Make request" onPress={makeRequest} />
+        </View>
+      </SafeAreaView>
+    </SafeAreaProvider>
   );
 }
 
@@ -156,7 +162,6 @@ const themedStyles = (dark = false) =>
     container: {
       flex: 1,
       backgroundColor: dark ? '#2d2a28' : 'white',
-      paddingTop: 0,
     },
     header: {
       flexDirection: 'row',

example/src/apolloClient.ts

@@ -1,52 +1,20 @@
-import { ApolloClient, InMemoryCache, gql } from '@apollo/client';
-
-const sandboxClient = new ApolloClient({
-  uri: 'https://48p1r2roz4.sse.codesandbox.io',
-  cache: new InMemoryCache(),
-});
-
-export const getRates = async () => {
-  return sandboxClient
-    .query({
-      query: gql`
-        query GetRates {
-          rates(currency: "USD") {
-            currency
-          }
-        }
-      `,
-      fetchPolicy: 'network-only',
-    })
-    .catch((e: any) => console.log(e.message));
-};
+import { ApolloClient, HttpLink, InMemoryCache, gql } from '@apollo/client';
 
 const gqlZeroClient = new ApolloClient({
-  uri: 'https://graphqlzero.almansi.me/api',
+  link: new HttpLink({ uri: 'https://graphqlzero.almansi.me/api' }),
   cache: new InMemoryCache(),
 });
 
-export const getUser = async () => {
-  return gqlZeroClient
-    .query({
-      query: gql`
-        query getUser {
-          user(id: 1) {
-            id
-            name
-          }
-        }
-      `,
-    })
-    .catch((e: any) => console.log(e.message));
-};
-
-export const getHero = async () => {
+export const getTodos = async () => {
   return gqlZeroClient
     .query({
       query: gql`
-        query getHero {
-          hero(class: "Human") {
-            health
+        query getTodos {
+          todos {
+            data {
+              id
+              title
+            }
           }
         }
       `,

package.json

@@ -56,22 +56,23 @@
     "@eslint/compat": "^1.2.9",
     "@eslint/eslintrc": "^3.3.1",
     "@eslint/js": "^9.26.0",
-    "@react-native/babel-preset": "0.78.2",
+    "@react-native/babel-preset": "0.84.1",
     "@react-native/eslint-config": "^0.78.0",
+    "@react-native/jest-preset": "^0.85.0-rc.0",
     "@release-it/conventional-changelog": "^10.0.1",
-    "@testing-library/react-native": "~13.1.1",
+    "@testing-library/react-native": "~13.3.3",
     "@types/jest": "^29.5.13",
-    "@types/react": "^19.1.3",
+    "@types/react": "^19.2.14",
     "eslint": "^9.26.0",
     "eslint-config-prettier": "^10.1.5",
     "eslint-plugin-prettier": "^5.4.0",
     "husky": "^9.1.6",
     "jest": "^29.7.0",
     "metro-react-native-babel-preset": "^0.77.0",
     "prettier": "^3.5.3",
-    "react": "~19.0.0",
-    "react-native": "0.79.2",
-    "react-native-builder-bob": "^0.40.10",
+    "react": "~19.2.0",
+    "react-native": "0.83.3",
+    "react-native-builder-bob": "^0.40.18",
     "react-test-renderer": "^19.1.0",
     "release-it": "^19.0.2",
     "rimraf": "^6.0.1",
@@ -85,7 +86,7 @@
     "registry": "https://registry.npmjs.org/"
   },
   "jest": {
-    "preset": "react-native",
+    "preset": "@react-native/jest-preset",
     "modulePathIgnorePatterns": [
       "<rootDir>/example/node_modules",
       "<rootDir>/lib/"

src/components/RequestDetails.tsx

@@ -151,6 +151,7 @@ const themedStyles = (theme: Theme) =>
     },
     info: {
       margin: 0,
+      maxHeight: 150,
     },
     close: {
       position: 'absolute',
@@ -174,6 +175,7 @@ const themedStyles = (theme: Theme) =>
     },
     largeContent: {
       maxHeight: 300,
+      flex: 1,
     },
   });