Upgrade React Native to 0.83.1

.prettierrc.js

@@ -6,8 +6,6 @@ module.exports = {
   // trailingComma: 'all',
   // arrowParens: 'avoid',
   printWidth: 120,
-  bracketSpacing: true,
-  bracketSameLine: false,
   semi: false,
   singleQuote: true,
   trailingComma: 'all',

jest.config.js

@@ -1,7 +1,7 @@
 module.exports = {
   preset: 'react-native',
   transformIgnorePatterns: [
-    'node_modules/(?!((jest-)?react-native|@react-native(-community)?|@observation.org/react-native-image-viewing|i18n-js|react-native-scalable-image)/)',
+    'node_modules/(?!((jest-)?react-native|@react-native(-community)?|@observation.org/react-native-image-viewing|i18n-js|react-native-scalable-image|color|@react-navigation))',
   ],
   setupFiles: ['./jest.mocks.js'],
   collectCoverageFrom: ['**/src/**/*.{js,ts,tsx}'],
@@ -12,9 +12,9 @@ module.exports = {
       {
         tsconfig: 'tsconfig.spec.json',
         diagnostics: {
-          exclude: ['**/node_modules/**']
+          exclude: ['**/node_modules/**'],
         },
-      }
+      },
     ],
   },
 }

package.json

@@ -1,42 +1,44 @@
 {
   "name": "@observation.org/react-native-components",
-  "version": "1.63.0",
+  "version": "1.64.0",
   "main": "src/index.ts",
   "repository": "[email protected]:observation/react-native-components.git",
   "author": "Observation.org",
   "license": "MIT",
   "devDependencies": {
-    "@eslint/compat": "^1.2.4",
-    "@eslint/eslintrc": "^3.2.0",
-    "@eslint/js": "^9.17.0",
-    "@react-native/eslint-config": "0.79.1",
-    "@react-native/metro-config": "0.79.1",
-    "@react-native/typescript-config": "0.79.1",
-    "@react-navigation/native": "^6.1.18",
-    "@rnx-kit/align-deps": "^3.0.5",
-    "@testing-library/react-native": "^13.2.0",
+    "@eslint/compat": "^2.0.0",
+    "@eslint/eslintrc": "^3.3.3",
+    "@eslint/js": "^9.39.2",
+    "@react-native/eslint-config": "0.83.1",
+    "@react-native/metro-config": "0.83.1",
+    "@react-native/typescript-config": "0.83.1",
+    "@react-navigation/native": "^7.1.26",
+    "@rnx-kit/align-deps": "^3.3.4",
+    "@testing-library/react-native": "^13.3.3",
     "@types/color": "^4.2.0",
     "@types/jest": "^29.5.14",
-    "@types/react": "^19.0.0",
-    "eslint": "^9.17.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-import": "^2.31.0",
+    "@types/react": "^19.2.0",
+    "eslint": "^9.39.2",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-observation": "https://github.com/observation/eslint-rules.git",
-    "eslint-plugin-prettier": "^5.2.1",
-    "eslint-plugin-react": "^7.37.2",
-    "eslint-plugin-react-hooks": "^5.1.0",
-    "eslint-plugin-react-native": "^4.1.0",
-    "globals": "^15.14.0",
+    "eslint-plugin-prettier": "^5.5.4",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-native": "^5.0.0",
+    "globals": "^16.5.0",
     "jest": "^29.7.0",
-    "prettier": "^3.4.2",
-    "react": "19.0.0",
-    "react-native": "0.79.1",
+    "prettier": "^3.7.4",
+    "react": "19.2.0",
+    "react-native": "0.83.1",
     "react-native-render-html": "^6.3.4",
-    "react-test-renderer": "19.0.0",
-    "ts-jest": "^29.2.5",
-    "typescript": "5.0.4",
-    "typescript-eslint": "^8.18.1"
+    "react-test-renderer": "19.2.0",
+    "ts-jest": "^29.4.6",
+    "typescript": "5.8.3",
+    "typescript-eslint": "^8.50.0"
+  },
+  "engines": {
+    "node": ">=20"
   },
   "react-native": "src/index.ts",
   "scripts": {
@@ -50,21 +52,21 @@
   ],
   "peerDependencies": {
     "@react-navigation/native": "^6.0.8",
-    "react": "19.0.0",
-    "react-native": "0.79.1",
+    "react": "19.2.0",
+    "react-native": "0.83.1",
     "react-native-render-html": "^6.1.0"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^6.7.2",
-    "@fortawesome/free-brands-svg-icons": "6.7.2",
-    "@fortawesome/pro-light-svg-icons": "^6.7.2",
-    "@fortawesome/pro-solid-svg-icons": "^6.7.2",
+    "@fortawesome/fontawesome-svg-core": "^7.1.0",
+    "@fortawesome/free-brands-svg-icons": "7.1.0",
+    "@fortawesome/pro-light-svg-icons": "^7.1.0",
+    "@fortawesome/pro-solid-svg-icons": "^7.1.0",
     "@fortawesome/react-native-fontawesome": "^0.3.2",
     "@observation.org/react-native-image-viewing": "https://github.com/observation/react-native-image-viewing",
     "@react-native-community/blur": "^4.4.1",
     "accordion-collapse-react-native": "^1.1.1",
-    "color": "^4.2.3",
-    "react-native-logs": "^5.3.0",
+    "color": "^5.0.3",
+    "react-native-logs": "^5.5.0",
     "react-native-scalable-image": "^1.1.0"
   },
   "packageManager": "[email protected]",
@@ -73,10 +75,10 @@
     "alignDeps": {
       "requirements": {
         "development": [
-          "react-native@0.79"
+          "react-native@0.83"
         ],
         "production": [
-          "react-native@>=0.79"
+          "react-native@>=0.83"
         ]
       },
       "capabilities": [

src/components/Accordion.tsx

@@ -14,11 +14,11 @@ type Item = {
 
 type Props<T extends Item> = {
   list: T[]
-  header: (item: T, index: number, isActive: boolean) => void
-  footer: (item: T, index: number, isActive: boolean) => void
-  body: (item: T) => React.ReactElement
+  header: (item: T, index: number, isActive: boolean) => React.ReactNode
+  footer: (item: T, index: number, isActive: boolean) => React.ReactNode
+  body: (item: T) => React.ReactNode
   onOpen: (index: number) => void
-  ListEmptyComponent?: () => React.ReactElement
+  ListEmptyComponent?: () => React.ReactNode
 }
 
 const Accordion = <T extends Item>({ list, header, footer, body, onOpen, ListEmptyComponent }: Props<T>) => {

src/components/__tests__/BottomSheet.test.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import { Text } from 'react-native'
 
+import { NavigationContainer } from '@react-navigation/native'
 import { fireEvent, render } from '@testing-library/react-native'
 
 import BottomSheet from '../BottomSheet'
@@ -9,7 +10,11 @@ describe('BottomSheet', () => {
   describe('Rendering', () => {
     test('Without icon', () => {
       // GIVEN
-      const { toJSON } = render(<BottomSheet title="Title" text="Text" />)
+      const { toJSON } = render(
+        <NavigationContainer>
+          <BottomSheet title="Title" text="Text" />
+        </NavigationContainer>,
+      )
 
       // THEN
       expect(toJSON()).toMatchSnapshot()
@@ -18,25 +23,33 @@ describe('BottomSheet', () => {
     test('With button', () => {
       // GIVEN
       const { toJSON } = render(
-        <BottomSheet title="Title" text="Text" buttons={[{ onPress: () => {}, title: 'Action!' }]} />,
+        <NavigationContainer>
+          <BottomSheet title="Title" text="Text" buttons={[{ onPress: () => {}, title: 'Action!' }]} />
+        </NavigationContainer>,
       )
       // THEN
       expect(toJSON()).toMatchSnapshot()
     })
 
     test('Only buttons', () => {
       // GIVEN
-      const { toJSON } = render(<BottomSheet buttons={[{ onPress: () => {}, title: 'Action!' }]} />)
+      const { toJSON } = render(
+        <NavigationContainer>
+          <BottomSheet buttons={[{ onPress: () => {}, title: 'Action!' }]} />
+        </NavigationContainer>,
+      )
       // THEN
       expect(toJSON()).toMatchSnapshot()
     })
 
     test('With children', () => {
       // GIVEN
       const { queryByText, toJSON } = render(
-        <BottomSheet>
-          <Text>Hello world!</Text>
-        </BottomSheet>,
+        <NavigationContainer>
+          <BottomSheet>
+            <Text>Hello world!</Text>
+          </BottomSheet>
+        </NavigationContainer>,
       )
 
       // THEN
@@ -49,7 +62,11 @@ describe('BottomSheet', () => {
     test('Click on a button', () => {
       // GIVEN
       const onPress = jest.fn()
-      const { getByText } = render(<BottomSheet title="Title" text="Text" buttons={[{ onPress, title: 'Action!' }]} />)
+      const { getByText } = render(
+        <NavigationContainer>
+          <BottomSheet title="Title" text="Text" buttons={[{ onPress, title: 'Action!' }]} />
+        </NavigationContainer>,
+      )
 
       // WHEN
       fireEvent.press(getByText('Action!'))

src/components/__tests__/__snapshots__/NotificationPopup.test.tsx.snap

@@ -3,7 +3,6 @@
 exports[`NotificationPopup Rendering Left and right buttons 1`] = `
 <Modal
   animationType="fade"
-  hardwareAccelerated={false}
   style={
     {
       "flex": 1,
@@ -288,7 +287,6 @@ exports[`NotificationPopup Rendering Left and right buttons 1`] = `
 exports[`NotificationPopup Rendering Only left button 1`] = `
 <Modal
   animationType="fade"
-  hardwareAccelerated={false}
   style={
     {
       "flex": 1,
@@ -498,7 +496,6 @@ exports[`NotificationPopup Rendering Only left button 1`] = `
 exports[`NotificationPopup Rendering With close button 1`] = `
 <Modal
   animationType="fade"
-  hardwareAccelerated={false}
   style={
     {
       "flex": 1,

src/components/__tests__/__snapshots__/Popup.test.tsx.snap

@@ -3,7 +3,6 @@
 exports[`Popup Rendering 1`] = `
 <Modal
   animationType="fade"
-  hardwareAccelerated={false}
   style={
     {
       "flex": 1,

tsconfig.json

@@ -1,3 +1,8 @@
 {
-  "extends": "@react-native/typescript-config/tsconfig.json"
+  "extends": "@react-native/typescript-config",
+  "compilerOptions": {
+    "types": ["jest"],
+  },
+  "include": ["**/*.ts", "**/*.tsx"],
+  "exclude": ["**/node_modules", "**/Pods"]
 }