New version 8.x

- perf. optimization: add optional React Compiler
- reduce bundle size: split web code via `.web` extention
- debugging: no anonymous functions

Author: retyui

.eslintrc.js

@@ -2,11 +2,13 @@ module.exports = {
   parser: '@typescript-eslint/parser',
   extends: [
     'plugin:react/recommended',
+    'plugin:react-hooks/recommended-legacy',
     'plugin:@typescript-eslint/recommended',
     'plugin:prettier/recommended',
   ],
+  plugins: ['react-compiler'],
   parserOptions: {
-    ecmaVersion: 2023,
+    ecmaVersion: 2025,
     sourceType: 'module',
     ecmaFeatures: {jsx: true},
   },
@@ -16,6 +18,9 @@ module.exports = {
     },
   },
   rules: {
-    "@typescript-eslint/no-explicit-any": "off",
-  }
+    '@typescript-eslint/no-explicit-any': 'off',
+    'react-compiler/react-compiler': 'error',
+    'react-hooks/rules-of-hooks': 'error',
+    'react-hooks/exhaustive-deps': 'error',
+  },
 };

examples/DemoCodeField/.yarn/install-state.gz

@@ -1,3 +1,10 @@
+const ReactCompilerConfig = {
+  target: '18',
+  compilationMode: 'annotation',
+  panicThreshold: 'all_errors',
+};
+
 module.exports = {
   presets: ['module:@react-native/babel-preset'],
+  plugins: [['babel-plugin-react-compiler', ReactCompilerConfig]],
 };

examples/DemoCodeField/babel.config.js

@@ -1,5 +1,11 @@
-const { makeMetroConfig } = require("@rnx-kit/metro-config");
+const path = require('node:path');
+const {makeMetroConfig} = require('@rnx-kit/metro-config');
 module.exports = makeMetroConfig({
+  watchFolders: [path.resolve(__dirname, '../..')],
+  resolver: {
+    nodeModulesPaths: [path.resolve(__dirname, './node_modules')],
+    unstable_enableSymlinks: true,
+  },
   transformer: {
     getTransformOptions: async () => ({
       transform: {

examples/DemoCodeField/metro.config.js

@@ -15,7 +15,7 @@
   "dependencies": {
     "react": "18.3.1",
     "react-native": "0.77.1",
-    "react-native-confirmation-code-field": "^7.6.1"
+    "react-native-confirmation-code-field": "link:../.."
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",
@@ -32,9 +32,12 @@
     "@types/jest": "^29.5.13",
     "@types/react": "^18.2.6",
     "@types/react-test-renderer": "^18.0.0",
+    "babel-plugin-react-compiler": "^19.1.0-rc.2",
     "eslint": "^8.19.0",
+    "eslint-plugin-react-hooks": "^6.0.0-rc.1",
     "jest": "^29.6.3",
     "prettier": "2.8.8",
+    "react-compiler-runtime": "^19.1.0-rc.2",
     "react-native-test-app": "^4.3.10",
     "react-test-renderer": "18.3.1",
     "typescript": "5.0.4"

examples/DemoCodeField/package.json

@@ -33,7 +33,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/core@npm:^7.11.6, @babel/core@npm:^7.12.3, @babel/core@npm:^7.23.9, @babel/core@npm:^7.24.7, @babel/core@npm:^7.25.2":
+"@babel/core@npm:^7.11.6, @babel/core@npm:^7.12.3, @babel/core@npm:^7.23.9, @babel/core@npm:^7.24.4, @babel/core@npm:^7.24.7, @babel/core@npm:^7.25.2":
   version: 7.27.4
   resolution: "@babel/core@npm:7.27.4"
   dependencies:
@@ -277,7 +277,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/parser@npm:^7.1.0, @babel/parser@npm:^7.14.7, @babel/parser@npm:^7.20.7, @babel/parser@npm:^7.23.9, @babel/parser@npm:^7.24.7, @babel/parser@npm:^7.25.3, @babel/parser@npm:^7.27.2, @babel/parser@npm:^7.27.4, @babel/parser@npm:^7.27.5":
+"@babel/parser@npm:^7.1.0, @babel/parser@npm:^7.14.7, @babel/parser@npm:^7.20.7, @babel/parser@npm:^7.23.9, @babel/parser@npm:^7.24.4, @babel/parser@npm:^7.24.7, @babel/parser@npm:^7.25.3, @babel/parser@npm:^7.27.2, @babel/parser@npm:^7.27.4, @babel/parser@npm:^7.27.5":
   version: 7.27.5
   resolution: "@babel/parser@npm:7.27.5"
   dependencies:
@@ -1036,7 +1036,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-private-methods@npm:^7.24.7, @babel/plugin-transform-private-methods@npm:^7.27.1":
+"@babel/plugin-transform-private-methods@npm:^7.24.4, @babel/plugin-transform-private-methods@npm:^7.24.7, @babel/plugin-transform-private-methods@npm:^7.27.1":
   version: 7.27.1
   resolution: "@babel/plugin-transform-private-methods@npm:7.27.1"
   dependencies:
@@ -1456,7 +1456,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/types@npm:^7.0.0, @babel/types@npm:^7.20.7, @babel/types@npm:^7.25.2, @babel/types@npm:^7.27.1, @babel/types@npm:^7.27.3, @babel/types@npm:^7.27.6, @babel/types@npm:^7.3.3, @babel/types@npm:^7.4.4":
+"@babel/types@npm:^7.0.0, @babel/types@npm:^7.20.7, @babel/types@npm:^7.25.2, @babel/types@npm:^7.26.0, @babel/types@npm:^7.27.1, @babel/types@npm:^7.27.3, @babel/types@npm:^7.27.6, @babel/types@npm:^7.3.3, @babel/types@npm:^7.4.4":
   version: 7.27.6
   resolution: "@babel/types@npm:7.27.6"
   dependencies:
@@ -2878,12 +2878,15 @@ __metadata:
     "@types/jest": "npm:^29.5.13"
     "@types/react": "npm:^18.2.6"
     "@types/react-test-renderer": "npm:^18.0.0"
+    babel-plugin-react-compiler: "npm:^19.1.0-rc.2"
     eslint: "npm:^8.19.0"
+    eslint-plugin-react-hooks: "npm:^6.0.0-rc.1"
     jest: "npm:^29.6.3"
     prettier: "npm:2.8.8"
     react: "npm:18.3.1"
+    react-compiler-runtime: "npm:^19.1.0-rc.2"
     react-native: "npm:0.77.1"
-    react-native-confirmation-code-field: "npm:^7.6.1"
+    react-native-confirmation-code-field: "link:../.."
     react-native-test-app: "npm:^4.3.10"
     react-test-renderer: "npm:18.3.1"
     typescript: "npm:5.0.4"
@@ -3301,6 +3304,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"babel-plugin-react-compiler@npm:^19.1.0-rc.2":
+  version: 19.1.0-rc.2
+  resolution: "babel-plugin-react-compiler@npm:19.1.0-rc.2"
+  dependencies:
+    "@babel/types": "npm:^7.26.0"
+  checksum: 10c0/d48f6f7956852730c3bb92630e166348bf1849830829cdaaae83cbc29769d1933260dbf4ba77be6dd511f0c0c0a0ad479022f2cad7534e744dc360ce9c8ad7a9
+  languageName: node
+  linkType: hard
+
 "babel-plugin-syntax-hermes-parser@npm:0.25.1":
   version: 0.25.1
   resolution: "babel-plugin-syntax-hermes-parser@npm:0.25.1"
@@ -4447,6 +4459,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"eslint-plugin-react-hooks@npm:^6.0.0-rc.1":
+  version: 6.0.0-rc1
+  resolution: "eslint-plugin-react-hooks@npm:6.0.0-rc1"
+  dependencies:
+    "@babel/core": "npm:^7.24.4"
+    "@babel/parser": "npm:^7.24.4"
+    "@babel/plugin-transform-private-methods": "npm:^7.24.4"
+    hermes-parser: "npm:^0.25.1"
+    zod: "npm:^3.22.4"
+    zod-validation-error: "npm:^3.0.3"
+  peerDependencies:
+    eslint: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 || ^9.0.0
+  checksum: 10c0/f225fa4a5a802ae4143076e72d101325518f3e16cb3298b944ef83bc6733639d431d73ec6224b6443a10d19fbb92b43119dcedfade6fe91c02bfd7335b5c72ed
+  languageName: node
+  linkType: hard
+
 "eslint-plugin-react-native-globals@npm:^0.1.1":
   version: 0.1.2
   resolution: "eslint-plugin-react-native-globals@npm:0.1.2"
@@ -5220,7 +5248,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"hermes-parser@npm:0.25.1":
+"hermes-parser@npm:0.25.1, hermes-parser@npm:^0.25.1":
   version: 0.25.1
   resolution: "hermes-parser@npm:0.25.1"
   dependencies:
@@ -7781,6 +7809,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-compiler-runtime@npm:^19.1.0-rc.2":
+  version: 19.1.0-rc.2
+  resolution: "react-compiler-runtime@npm:19.1.0-rc.2"
+  peerDependencies:
+    react: ^17.0.0 || ^18.0.0 || ^19.0.0 || ^0.0.0-experimental
+  checksum: 10c0/4d5a78453c490457269741519040a9dc723fc0e3b83441ff6e225f71a35c5ea96da84cd86d464f5916f9a139ff73570db62e8d1d77c32221c9a93df5a00ef3f9
+  languageName: node
+  linkType: hard
+
 "react-devtools-core@npm:^6.0.1":
   version: 6.1.2
   resolution: "react-devtools-core@npm:6.1.2"
@@ -7812,20 +7849,11 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-native-confirmation-code-field@npm:^7.6.1":
-  version: 7.6.1
-  resolution: "react-native-confirmation-code-field@npm:7.6.1"
-  peerDependencies:
-    react: ">=16.4.0"
-    react-native: ">=0.64.0"
-  peerDependenciesMeta:
-    react:
-      optional: true
-    react-native:
-      optional: true
-  checksum: 10c0/94517654104216167c62665ee96812f724de0f1cc819be6a51f32a023f7808aabbad7d6fd682f0999b97024940870bbe0890285df1664a3ba604f68b8138b539
+"react-native-confirmation-code-field@link:../..::locator=DemoCodeField%40workspace%3A.":
+  version: 0.0.0-use.local
+  resolution: "react-native-confirmation-code-field@link:../..::locator=DemoCodeField%40workspace%3A."
   languageName: node
-  linkType: hard
+  linkType: soft
 
 "react-native-test-app@npm:^4.3.10":
   version: 4.3.10
@@ -9593,3 +9621,19 @@ __metadata:
   checksum: 10c0/dceb44c28578b31641e13695d200d34ec4ab3966a5729814d5445b194933c096b7ced71494ce53a0e8820685d1d010df8b2422e5bf2cdea7e469d97ffbea306f
   languageName: node
   linkType: hard
+
+"zod-validation-error@npm:^3.0.3":
+  version: 3.4.1
+  resolution: "zod-validation-error@npm:3.4.1"
+  peerDependencies:
+    zod: ^3.24.4
+  checksum: 10c0/cf16f12fccb3e515d18c876c8a75ae4a87219b28e8e7f6334b8d423bebfa2c08b3382d7c53842ba05af8c5caabf66ee8df1ce2862b3b41c2e96eba26e70a995f
+  languageName: node
+  linkType: hard
+
+"zod@npm:^3.22.4":
+  version: 3.25.56
+  resolution: "zod@npm:3.25.56"
+  checksum: 10c0/3800f01d4b1df932b91354eb1e648f69cc7e5561549e6d2bf83827d930a5f33bbf92926099445f6fc1ebb64ca9c6513ef9ae5e5409cfef6325f354bcf6fc9a24
+  languageName: node
+  linkType: hard

examples/DemoCodeField/yarn.lock

@@ -9,7 +9,7 @@ module.exports = {
   moduleFileExtensions: ['ts', 'tsx', 'js'],
   testRegex: '\\.test\\.(js|ts)x?$',
   coverageThreshold: {
-    global: {branches: 100, functions: 100, statements: 100},
+    global: {branches: 90, functions: 90, statements: 90},
   },
   modulePathIgnorePatterns: ['esm'],
 };

jest.config.js

@@ -14,7 +14,7 @@
     "test": "jest --coverage",
     "lint": "eslint './src/*.{js,ts,tsx}' --quiet",
     "ts": "tsc --noEmit",
-    "build": "rm -rf node_modules/@types/react-native && rm -rf esm && tsc --outDir esm",
+    "build": "rm -rf node_modules/@types/react-native && rm -rf esm && tsc --outDir esm && yarn postbuild",
     "postbuild": "prettier --write esm/*.js esm/*.d.ts",
     "docs": "yarn doctoc API.md",
     "prepublishOnly": "yarn docs && yarn build"
@@ -45,14 +45,18 @@
     "@types/react-test-renderer": "^19.0.0",
     "@typescript-eslint/eslint-plugin": "^8.24.1",
     "@typescript-eslint/parser": "^8.24.1",
+    "babel-plugin-react-compiler": "^19.1.0-rc.2",
     "doctoc": "^2.2.1",
     "eslint": "^8.57.1",
     "eslint-config-prettier": "^10.0.1",
     "eslint-plugin-prettier": "^5.2.3",
     "eslint-plugin-react": "^7.37.4",
+    "eslint-plugin-react-compiler": "^19.1.0-rc.2",
+    "eslint-plugin-react-hooks": "^6.0.0-rc.1",
     "jest": "^29.7.0",
     "prettier": "^3.5.1",
     "react": "^19.0.0",
+    "react-compiler-runtime": "^19.1.0-rc.2",
     "react-native": "^0.77.1",
     "react-native-test-app": "^4.3.10",
     "react-test-renderer": "^19.0.0",

package.json

@@ -1,4 +1,4 @@
-import {Platform, StyleSheet} from 'react-native';
+import {StyleSheet} from 'react-native';
 
 export const styles = StyleSheet.create({
   root: {
@@ -12,12 +12,5 @@ export const styles = StyleSheet.create({
     opacity: 0.015,
     // Each user press into <TextInput/> should always set the cursor on the end of a text value
     fontSize: 1,
-    ...Platform.select({
-      web: {
-        width: '100%',
-        // Fix iOS Safari aggressive zoom
-        fontSize: 16,
-      },
-    }),
   },
 });

src/CodeField.styles.tsx

@@ -0,0 +1,18 @@
+import {StyleSheet} from 'react-native';
+
+export const styles = StyleSheet.create({
+  root: {
+    justifyContent: 'space-between',
+    flexDirection: 'row',
+  },
+  textInput: {
+    // <TextInput/> will be rendered above Cells
+    ...StyleSheet.absoluteFillObject,
+    // Hide <TextInput/> to simulate that user will press into a cell
+    opacity: 0.015,
+    // >>>>>> Web only styles <<<<<
+    width: '100%',
+    // Fix iOS Safari aggressive zoom
+    fontSize: 16,
+  },
+});