search

kirillzyusko / react-native-keyboard-controller

Keyboard manager which works in identical way on both iOS and Android
https://kirillzyusko.github.io/react-native-keyboard-controller/
MIT License
1.51k stars 60 forks source link

Runtime Error on iOS #393

Closed arekkubaczkowski closed 5 months ago

arekkubaczkowski commented 5 months ago

Describe the bug I've installed the latest version of library and wrapped the app with Provider component which thrown the error right away. (See screenshots) I confirm that removing provider fixes both errors. I also tried to remove the entire components three from the app and the issue still exists.

Screenshot 2024-03-20 at 07 57 15

My tech stack is:

Screenshots

Screenshot 2024-03-20 at 07 53 55 Screenshot 2024-03-20 at 07 54 19

Smartphone (please complete the following information):

Additional context

kirillzyusko commented 5 months ago

@arekkubaczkowski can you try to use latest version of the library, for example 1.11.0?

arekkubaczkowski commented 5 months ago

sorry, it was a typo, I am already using 1.11.3

kirillzyusko commented 5 months ago

@arekkubaczkowski okay👍May I ask you to share your package.json?

I think the same problem has been reported here https://github.com/kirillzyusko/react-native-keyboard-controller/issues/294

But that project used many private deps so I couldn't reproduce the problem.

If you can create a small reproduction example that would be a dope!

arekkubaczkowski commented 5 months ago

as my app is under quite big monorepo there are also many dependencies:

 "devDependencies": {
        "@aws-sdk/client-s3": "^3.295.0",
        "@aws-sdk/credential-providers": "^3.299.0",
        "@babel/core": "^7.14.5",
        "@babel/preset-react": "^7.14.5",
        "@bahmutov/cypress-code-coverage": "^2.6.1",
        "@config-plugins/detox": "~6.0.0",
        "@ctrl/tinycolor": "^4.0.3",
        "@cypress/webpack-dev-server": "^3.6.1",
        "@expo/cli": "0.16.8",
        "@expo/metro-config": "0.17.5",
        "@expo/metro-runtime": "3.1.3",
        "@expo/ngrok": "^4.1.3",
        "@expo/webpack-config": "^19.0.0",
        "@nx/cypress": "18.0.7",
        "@nx/detox": "18.0.7",
        "@nx/eslint": "18.0.7",
        "@nx/eslint-plugin": "18.0.7",
        "@nx/expo": "18.0.7",
        "@nx/express": "18.0.7",
        "@nx/jest": "18.0.7",
        "@nx/js": "18.0.7",
        "@nx/node": "18.0.7",
        "@nx/react": "18.0.7",
        "@nx/storybook": "18.0.7",
        "@nx/vite": "18.0.7",
        "@nx/web": "18.0.7",
        "@nx/webpack": "18.0.7",
        "@nx/workspace": "18.0.7",
        "@sentry/vite-plugin": "^2.10.2",
        "@storybook/addon-a11y": "7.6.17",
        "@storybook/addon-docs": "7.6.17",
        "@storybook/addon-essentials": "7.6.17",
        "@storybook/addon-interactions": "7.6.17",
        "@storybook/addon-links": "7.6.17",
        "@storybook/addon-storysource": "7.6.17",
        "@storybook/addon-themes": "^7.5.2",
        "@storybook/core-server": "7.6.17",
        "@storybook/jest": "0.2.3",
        "@storybook/react-vite": "7.6.17",
        "@storybook/test-runner": "0.13.0",
        "@storybook/testing-library": "0.2.2",
        "@swc-node/register": "1.8.0",
        "@nx/linter": "18.0.7",
        "@nx/react-native": "18.0.7",
        "@react-native-community/slider": "4.5.0",
        "@react-native-community/datetimepicker": "7.6.2",
        "@react-native-async-storage/async-storage": "1.21.0",
        "@react-native/babel-preset": "0.73.18",
        "@storybook/addon-ondevice-actions": "^7.6.17",
        "@storybook/addon-ondevice-backgrounds": "^7.6.17",
        "@storybook/addon-ondevice-controls": "^7.6.17",
        "@storybook/addon-ondevice-notes": "^7.6.17",
        "@storybook/global": "^5.0.0",
        "@storybook/addon-controls": "^7.6.17",
        "@storybook/addon-react-native-web": "0.0.23",
        "@storybook/react-native": "^7.6.17",
        "@storybook/addon-react-native-server": "^0.0.5",
        "@storybook/addon-actions": "^7.6.17",
        "@swc/cli": "~0.1.62",
        "@swc/core": "~1.3.85",
        "@testing-library/cypress": "^9.0.0",
        "@testing-library/jest-dom": "^6.1.3",
        "@testing-library/jest-native": "~5.4.3",
        "@testing-library/react": "^14.1.0",
        "@testing-library/react-native": "12.4.3",
        "@testing-library/user-event": "^14.4.3",
        "@tokens-studio/sd-transforms": "^0.11.3",
        "@types/base-64": "^1.0.2",
        "@types/express": "4.17.17",
        "@types/google.maps": "^3.54.3",
        "@types/jest": "^29.5.4",
        "@types/node": "18.16.9",
        "@types/react": "18.2.62",
        "@types/react-dom": "18.2.9",
        "@types/uuid": "^9.0.1",
        "@typescript-eslint/eslint-plugin": "6.13.2",
        "@typescript-eslint/parser": "6.13.2",
        "@vitejs/plugin-react": "4.2.1",
        "@vitest/coverage-c8": "~0.32.0",
        "@vitest/coverage-istanbul": "0.34.6",
        "@vitest/ui": "1.3.1",
        "autoprefixer": "^10.4.16",
        "babel-jest": "29.6.4",
        "babel-plugin-istanbul": "^6.1.1",
        "babel-plugin-react-native-web": "0.19.10",
        "babel-plugin-transform-inline-environment-variables": "0.4.4",
        "babel-preset-expo": "10.0.1",
        "chai": "^4.3.7",
        "class-variance-authority": "^0.7.0",
        "clsx": "^2.0.0",
        "cross-var": "^1.1.0",
        "cy-spok": "^1.5.2",
        "cypress": "^13.6.6",
        "cypress-file-upload": "^5.0.8",
        "cypress-plugin-api": "^2.11.0",
        "cypress-recurse": "^1.26.0",
        "dotenv-flow-cli": "^1.0.0",
        "ejs": "^3.1.9",
        "env-cmd": "^10.1.0",
        "eslint": "8.48.0",
        "eslint-config-airbnb": "^19.0.4",
        "eslint-config-airbnb-base": "^15.0.0",
        "eslint-config-prettier": "9.0.0",
        "eslint-formatter-summary": "^1.1.0",
        "eslint-plugin-cypress": "^2.13.4",
        "eslint-plugin-import": "^2.28.1",
        "eslint-plugin-jsx-a11y": "6.7.1",
        "eslint-plugin-react": "7.33.2",
        "eslint-plugin-react-hooks": "4.6.0",
        "eslint-plugin-react-redux": "^4.0.0",
        "eslint-plugin-storybook": "^0.6.15",
        "glob": "^10.2.2",
        "husky": "^8.0.0",
        "jest": "^29.6.4",
        "jest-circus": "^29.4.1",
        "jest-environment-jsdom": "29.6.4",
        "jest-environment-node": "^29.4.1",
        "jest-expo": "50.0.2",
        "jest-junit": "^13.0.0",
        "jsdom": "~22.1.0",
        "json-server": "^0.17.1",
        "lint-staged": "^14.0.1",
        "msw-storybook-addon": "^1.10.0",
        "nx-cloud": "18.0.0",
        "postcss": "^8.4.31",
        "prettier": "^2.8.8",
        "react-native-svg-transformer": "1.3.0",
        "react-refresh": "^0.14.0",
        "react-test-renderer": "18.2.0",
        "rollup-plugin-visualizer": "^5.9.0",
        "style-dictionary": "^3.8.0",
        "superagent": "^8.1.2",
        "tailwind": "^4.0.0",
        "tailwind-merge": "^1.14.0",
        "tailwindcss": "3.4.1",
        "tailwindcss-animate": "^1.0.7",
        "ts-jest": "29.1.1",
        "ts-node": "10.9.1",
        "typescript": "5.3.3",
        "url-loader": "^4.1.1",
        "uuid": "^9.0.0",
        "vite": "5.1.6",
        "vite-plugin-dts": "~3.5.3",
        "vite-plugin-eslint": "^1.8.1",
        "vite-plugin-html": "^3.2.0",
        "vite-plugin-import": "^0.4.0",
        "vite-plugin-istanbul": "^5.0.0",
        "vite-plugin-pwa": "^0.16.4",
        "vite-tsconfig-paths": "4.3.1",
        "vitest": "1.3.1",
        "vitest-axe": "^0.1.0",
        "workbox-background-sync": "^7.0.0",
        "workbox-broadcast-update": "^7.0.0",
        "workbox-build": "^7.0.0",
        "workbox-cacheable-response": "^7.0.0",
        "workbox-core": "^7.0.0",
        "workbox-expiration": "^7.0.0",
        "workbox-google-analytics": "^7.0.0",
        "workbox-navigation-preload": "^7.0.0",
        "workbox-precaching": "^7.0.0",
        "workbox-range-requests": "^7.0.0",
        "workbox-routing": "^7.0.0",
        "workbox-strategies": "^7.0.0",
        "workbox-streams": "^7.0.0",
        "workbox-window": "^7.0.0",
        "@react-native/metro-config": "^0.73.2"
    },
    "dependencies": {
        "@devexpress/dx-react-core": "^2.7.5",
        "@devexpress/dx-react-grid": "^2.7.5",
        "@devexpress/dx-react-grid-bootstrap4": "2.7.6",
        "@emotion/react": "^11.10.5",
        "@emotion/styled": "^11.10.5",
        "@expo-google-fonts/figtree": "^0.2.3",
        "@expo-google-fonts/inter": "^0.2.3",
        "@faker-js/faker": "^8.3.1",
        "@gorhom/portal": "^1.0.14",
        "@googlemaps/react-wrapper": "^1.1.35",
        "react-native-keyboard-controller": "1.11.3",
        "@hookform/error-message": "^2.0.1",
        "@hookform/resolvers": "^3.3.1",
        "@icon/open-iconic": "^1.1.1-alpha.2",
        "@monaco-editor/react": "^4.5.1",
        "@mui/icons-material": "^5.11.0",
        "@mui/material": "^5.11.12",
        "@mui/system": "^5.11.0",
        "@mui/utils": "^5.10.14",
        "@mui/x-date-pickers": "^6.5.0",
        "@radix-ui/react-accordion": "^1.1.2",
        "@radix-ui/react-alert-dialog": "^1.0.4",
        "@radix-ui/react-aspect-ratio": "^1.0.3",
        "@radix-ui/react-avatar": "^1.0.4",
        "@radix-ui/react-checkbox": "^1.0.4",
        "@radix-ui/react-collapsible": "^1.0.3",
        "@radix-ui/react-context-menu": "^2.1.5",
        "@radix-ui/react-dialog": "^1.0.5",
        "@radix-ui/react-dropdown-menu": "^2.0.6",
        "@radix-ui/react-hover-card": "^1.0.7",
        "@radix-ui/react-label": "^2.0.2",
        "@radix-ui/react-menubar": "^1.0.4",
        "@radix-ui/react-navigation-menu": "^1.1.4",
        "@radix-ui/react-popover": "^1.0.7",
        "@radix-ui/react-progress": "^1.0.3",
        "@radix-ui/react-radio-group": "^1.1.3",
        "@radix-ui/react-scroll-area": "^1.0.5",
        "@radix-ui/react-select": "^2.0.0",
        "@radix-ui/react-separator": "^1.0.3",
        "@radix-ui/react-slider": "^1.1.2",
        "@radix-ui/react-slot": "^1.0.2",
        "@radix-ui/react-switch": "^1.0.3",
        "@radix-ui/react-tabs": "^1.0.4",
        "@radix-ui/react-toast": "^1.1.5",
        "@radix-ui/react-toggle": "^1.0.3",
        "@radix-ui/react-tooltip": "^1.0.7",
        "@react-native-community/netinfo": "11.3.0",
        "@react-native-masked-view/masked-view": "0.3.1",
        "@react-navigation/drawer": "^6.6.11",
        "@redux-saga/core": "^1.2.3",
        "@sentry/react": "^7.36.0",
        "@sentry/tracing": "^7.36.0",
        "@swc/helpers": "~0.5.2",
        "tamagui": "1.91.4",
        "@tamagui/animations-moti": "1.91.4",
        "@tamagui/babel-plugin": "1.91.4",
        "@tamagui/build": "1.91.4",
        "@tamagui/config": "1.91.4",
        "@tamagui/font-inter": "1.91.4",
        "@tamagui/lucide-icons": "1.91.4",
        "@tamagui/react-native-media-driver": "1.91.4",
        "expo-linear-gradient": "12.7.2",
        "@tamagui/metro-plugin": "1.91.4",
        "@tanstack/query-sync-storage-persister": "^5.13.4",
        "@tanstack/react-query": "^5.13.4",
        "@tanstack/react-query-devtools": "^5.13.5",
        "@tanstack/react-query-persist-client": "^5.13.4",
        "@tanstack/react-table": "^8.10.6",
        "@tanstack/react-virtual": "^3.0.2",
        "@testing-library/dom": "^9.3.1",
        "@txtextcontrol/tx-react-ds-document-editor": "^3.1.1",
        "@types/react-window": "^1.8.5",
        "@types/react-window-infinite-loader": "^1.0.6",
        "atob": "^2.1.1",
        "axios": "1.6.7",
        "base-64": "^1.0.0",
        "body-parser": "^1.20.1",
        "chroma-js": "^2.0.3",
        "classnames": "^2.3.2",
        "cmdk": "^0.2.0",
        "core-js": "^3.6.5",
        "cron-parser": "^2.12.0",
        "cross-env": "^7.0.3",
        "csstype": "^3.1.2",
        "cypress-plugin-steps": "^1.1.1",
        "date-fns": "^2.30.0",
        "expo": "50.0.14",
        "expo-build-properties": "~0.11.1",
        "expo-constants": "~15.4.5",
        "expo-dev-client": "~3.3.9",
        "expo-linking": "~6.2.2",
        "expo-router": "^2.0.13",
        "expo-splash-screen": "0.26.4",
        "expo-status-bar": "1.11.1",
        "react-native-mask-input": "1.2.3",
        "express": "^4.18.1",
        "express-jwt": "^8.3.0",
        "flag-icon-css": "^4.1.7",
        "font-awesome": "4.7.0",
        "grapesjs": "^0.21.3",
        "grapesjs-mjml": "^1.0.5",
        "grapesjs-preset-newsletter": "^1.0.2",
        "history": "^5.3.0",
        "http-proxy-middleware": "^2.0.6",
        "i18n-react": "^0.7.0",
        "i18next": "^22.4.9",
        "i18next-browser-languagedetector": "^7.0.1",
        "infinite-react-carousel": "^1.2.11",
        "invariant": "^2.2.4",
        "ky": "^1.1.3",
        "lodash-es": "^4.17.21",
        "lucide-react": "^0.284.0",
        "metro-config": "~0.80.4",
        "moment": "2.29.4",
        "moment-duration-format": "^2.2.2",
        "msw": "^1.2.1",
        "nanoid": "^4.0.2",
        "next-themes": "^0.2.1",
        "normalize.scss": "^0.1.0",
        "oidc-client-ts": "^2.2.1",
        "papaparse": "^5.3.2",
        "path-to-regexp": "^1.8.0",
        "prop-types": "^15.8.1",
        "qs": "^6.11.2",
        "prettier-eslint": "16.3.0",
        "react": "18.2.0",
        "react-addons-css-transition-group": "^15.6.2",
        "react-autocomplete": "^1.5.6",
        "react-beautiful-dnd": "^13.1.0",
        "react-bootstrap-table-next": "^4.0.3",
        "react-bootstrap-table2-paginator": "^2.1.0",
        "react-cropper": "^2.3.3",
        "react-css-collapse": "^3.1.0",
        "react-day-picker": "^8.10.0",
        "react-dom": "^18.2.0",
        "react-error-boundary": "^3.1.4",
        "react-file-input-previews-base64": "^1.0.5",
        "react-helmet": "^6.1.0",
        "react-helmet-async": "^1.3.0",
        "react-hook-form": "^7.47.0",
        "react-i18next": "^12.1.5",
        "react-international-phone": "^4.0.0",
        "react-measure": "^2.0.2",
        "react-native": "0.73.6",
        "react-native-gesture-handler": "~2.14.0",
        "react-native-mmkv": "^2.11.0",
        "react-native-reanimated": "3.8.0",
        "react-native-safe-area-context": "4.8.2",
        "react-native-screens": "~3.29.0",
        "react-native-size-matters": "^0.4.2",
        "react-native-svg": "14.1.0",
        "react-native-theme-switch-animation": "^0.5.2",
        "react-native-web": "0.19.10",
        "react-oidc-context": "^2.2.1",
        "react-query": "^3.39.2",
        "react-radio-group": "^3.0.2",
        "react-redux": "^7.2.2",
        "react-router-dom": "^6.14.2",
        "react-select": "^5.7.3",
        "react-tiny-virtual-list": "^2.2.0",
        "react-toggle-button": "^2.2.0",
        "react-transition-group": "^4.4.1",
        "react-virtuoso": "^4.0.7",
        "react-vis": "^1.12.1",
        "react-window": "^1.8.9",
        "react-window-infinite-loader": "^1.0.9",
        "redux": "^4.0.0",
        "redux-saga": "^1.2.3",
        "regenerator-runtime": "0.13.7",
        "reselect": "^3.0.1",
        "sass": "^1.65.1",
        "sass-migrator": "^1.7.3",
        "sonner": "^1.4.0",
        "tslib": "^2.3.0",
        "use-deep-compare-effect": "^1.8.1",
        "use-local-storage-state": "^18.1.2",
        "use-places-autocomplete": "^4.0.1",
        "vite-plugin-svgr": "^2.4.0",
        "yup": "^1.2.0",
        "zod": "^3.22.4",
        "zustand": "^4.4.6"
    },
kirillzyusko commented 5 months ago

@arekkubaczkowski at least no private dependencies 😅 I'll try to create a new app and install all these deps today - I'll let you know how it's going 👍

arekkubaczkowski commented 5 months ago

thanks, appreciate it!

arekkubaczkowski commented 5 months ago

In the meantime I am trying to get some cleanup in packages, turn on new architecture etc. will see if anything helps

kirillzyusko commented 5 months ago

@arekkubaczkowski I create empty expo project with all your deps and I can not see the error 🤔

Here is App.js code:

import { KeyboardProvider } from 'react-native-keyboard-controller';
import { StyleSheet, Text } from 'react-native';

export default function App() {
  return (
    <KeyboardProvider>
      <Text style={{color: 'black', fontSize: 24, marginTop: 40}}>123</Text>
    </KeyboardProvider>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Simulator:

Maybe you imported something globally like import 'react-native-gesture-handler'; and it somehow produces a conflict between libraries?

arekkubaczkowski commented 5 months ago

@kirillzyusko I tried to cleanup everything around and nothing worked, now I tried to enable new architecture and this is what I get right now:

Screenshot 2024-03-20 at 15 53 03
kirillzyusko commented 5 months ago

@arekkubaczkowski another potential approach would be to debug this problem is opening this file: https://github.com/kirillzyusko/react-native-keyboard-controller/blob/main/src/animated.tsx and removing one-by-one all handlers and see when problem disappears.

I have a strong feeling that the problem is somewhere with workletization - according to the message it looks like REA is trying to workletize PushNotifiicationIOS - but I don't have any ideas why it's trying to do so.

By the way my discord is https://discordapp.com/users/973642097888489512 - feel free to drop me a message there. I feel like this error is pretty annoying and want to solve it - and I think faster communication will help us 😊

P. S. if it complains on createAnimatedComponent - can you try to remove wrappers here and see whether the issue gone? If it present - maybe it's worth to log KeyboardControllerView?.. Maybe this view can not be exported and is null somehow?

arekkubaczkowski commented 5 months ago

@kirillzyusko the link for discord doesn't work for some reason 🤔

kirillzyusko commented 5 months ago

@arekkubaczkowski can you try to find 973642097888489512 or kiryl.ziusko or kiryl.ziusko#8496 using search?