Can't find variable: Symbol - react-native

I'm using create-react-native-app with expo's react-native v22.0.1. I've developed my app using the emulator, where it works properly. However, when I open it with the Expo app, I get a "Can't find variable: Symbol" error, occurring in assembleStyles (I've got no idea what that is that's just a function from the ansi-styles library, probably the error happens somewhere else).
I've tried importing babel-polyfill or es6-symbol to the first line of my App.js file (entrypoint), but with no success.
What can be going on here?
Edit: these are my dependencies
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-plugin-module-resolver": "^2.7.1",
"babel-plugin-transform-class-properties": "6.24.1",
"babel-plugin-transform-require-ignore": "^0.1.1",
"babel-preset-env": "^1.6.1",
"babel-preset-react-native": "^4.0.0",
"chai": "^4.1.1",
"chai-enzyme": "0.8.0",
"cross-env": "^5.1.0",
"enzyme": "3.1.0",
"ignore-styles": "5.0.1",
"jest-expo": "22.0.0",
"node-sass": "4.5.3",
"npm-run-all": "4.1.1",
"react-addons-test-utils": "15.6.2",
"react-native-scripts": "^1.5.0",
"react-scripts": "^1.0.14",
"react-test-renderer": "16.0.0",
"sw-precache": "5.2.0",
"watchman": "^0.1.8"
},
"dependencies": {
"babel-plugin-remove-nonjs": "0.1.1",
"babel-plugin-transform-inline-environment-variables": "^0.2.0",
"expo": "^22.0.0",
"nodemon": "^1.12.1",
"prop-types": "15.6.0",
"qs": "6.5.1",
"react": "16.0.0-beta.5",
"react-dom": "16.0.0",
"react-facebook-login": "3.6.2",
"react-google-login": "^3.0.1",
"react-helmet": "5.2.0",
"react-images": "^0.5.11",
"react-native":
"https://github.com/expo/react-native/archive/sdk-22.0.1.tar.gz",
"react-native-keyboard-spacer": "^0.4.1",
"react-native-snap-carousel": "^3.3.4",
"react-redux": "^5.0.6",
"react-router-dom": "^4.2.0",
"react-router-native": "^4.2.0",
"react-slick": "0.15.4",
"redux": "^3.7.2",
"redux-thunk": "2.2.0",
"slick-carousel": "^1.8.1",
"styled-components": "^2.2.1"
}

Related

cannot read properties of undefined (reading '1')at plugin.manipulateoptions

this react native app was working perfectly and a week or so ago it just start throwing this arror cannot read properties of undefined (reading '1')at plugin.manipulateoptions.
you can view more detail in the attached photo here error message
Here is my package json:
"dependencies": {
"#react-native-async-storage/async-storage": "^1.17.11",
"#react-navigation/bottom-tabs": "^6.5.1",
"#react-navigation/drawer": "^6.5.5",
"#react-navigation/native": "^6.1.1",
"#react-navigation/stack": "^6.3.9",
"dayjs": "^1.11.7",
"express": "^4.18.2",
"firebase": "^9.15.0",
"morgan": "^1.10.0",
"peerjs": "^1.4.7",
"react": "18.1.0",
"react-native": "^0.70.6",
"react-native-animatable": "^1.3.3",
"react-native-dotenv": "^3.4.7",
"react-native-event-listeners": "^1.0.7",
"react-native-gesture-handler": "^2.8.0",
"react-native-incall-manager": "^4.0.1",
"react-native-paper": "^5.0.2",
"react-native-reanimated": "^2.13.0",
"react-native-safe-area-context": "^4.4.1",
"react-native-screens": "^3.18.2",
"react-native-slider": "^0.11.0",
"react-native-track-player": "^3.2.0",
"react-native-vector-icons": "^9.2.0",
"react-native-webview": "^11.26.0",
"socket.io": "^4.5.4",
"socket.io-client": "^4.5.4"
"devDependencies": {
"#babel/core": "^7.12.9",
"#babel/preset-flow": "^7.0.0",
"#babel/runtime": "^7.20.7",
"#react-native-community/eslint-config": "^2.0.0",
"babel-jest": "^29.3.1",
"babel-plugin-module-resolver": "^4.1.0",
"eslint": "^7.32.0",
"jest": "^26.6.3",
"metro": "^0.73.7",
"metro-core": "^0.73.7",
"metro-react-native-babel-preset": "^0.73.7",
"react-test-renderer": "18.1.0"
},
I've tried uninstall nodemodule and packagelock, I even initialize another application, I upgraded babel plugins, but none of it works.

Getting error of "Tried to register two views with the same name RNCViewpager

Hi, I am getting the error, but i don't know how to solve it.
I think it caused by the conflicts between react-native-tab-view and react-native-pager-view
I tried
remove node_modules and re-install.
installed different versions of react-native-pager-view
added "resolutions" in package.json.
My package.json is
"dependencies": {
"#invertase/react-native-apple-authentication": "^2.1.2",
"#react-native-community/blur": "^3.6.0",
"#react-native-community/geolocation": "^2.0.2",
"#react-native-community/masked-view": "^0.1.10",
"#react-native-community/toolbar-android": "0.1.0-rc.2",
"#react-native-firebase/analytics": "^11.3.2",
"#react-native-firebase/app": "^11.3.2",
"#react-native-google-signin/google-signin": "^6.0.0",
"#react-navigation/bottom-tabs": "^5.11.8",
"#react-navigation/native": "^5.9.3",
"#react-navigation/stack": "^5.14.3",
"dateformat": "^3.0.3",
"filter-obj": "^2.0.2",
"lodash": "^4.17.15",
"lottie-ios": "^3.1.8",
"lottie-react-native": "^3.5.0",
"moment": "^2.29.1",
"patch-package": "^6.2.2",
"payment": "^2.3.0",
"react": "17.0.1",
"react-content-loader": "^6.0.3",
"react-native": "0.64.1",
"react-native-background-upload": "^5.6.1",
"react-native-base64": "0.0.2",
"react-native-bootsplash": "^2.2.4",
"react-native-check-box": "^2.1.7",
"react-native-checkbox-form": "^1.1.5",
"react-native-checkbox-group": "^1.0.3",
"react-native-credit-card-input-fullpage": "^0.2.0",
"react-native-device-info": "^8.0.5",
"react-native-dialog": "^5.6.0",
"react-native-drawer-layout-polyfill": "^2.0.0",
"react-native-fbsdk": "^1.1.2",
"react-native-gesture-handler": "^1.10.3",
"react-native-google-places-autocomplete": "^1.8.0",
"react-native-image-picker": "^2.3.3",
"react-native-key-value-storage": "^3.1.0",
"react-native-keyboard-accessory": "^0.1.12",
"react-native-loading-spinner-overlay": "^1.1.0",
"react-native-material-buttons": "^0.6.0",
"react-native-material-textfield": "^0.16.1",
"react-native-no-flicker-image": "^1.0.2",
"react-native-pager-view": "^5.1.3",
"react-native-paper": "^4.7.2",
"react-native-phone-input": "^0.2.4",
"react-native-picker-select": "^8.0.4",
"react-native-ratings": "^7.4.0",
"react-native-reanimated": "^1.10.1",
"react-native-responsive-screen": "^1.4.1",
"react-native-safe-area-context": "^0.7.3",
"react-native-screens": "^2.10.1",
"react-native-scrollable-tab-view": "^1.0.0",
"react-native-section-list-get-item-layout": "^2.2.3",
"react-native-secure-storage": "^0.1.2",
"react-native-simple-radio-button": "^2.7.4",
"react-native-star-rating": "^1.1.0",
"react-native-super-grid": "^3.2.0",
"react-native-svg": "^12.1.1",
"react-native-swipe-gestures": "^1.0.5",
"react-native-tab-view": "^3.0.1",
"react-native-vector-icons": "^7.0.0",
"react-native-version-check": "^3.4.2",
"react-native-webview": "^10.3.3",
"react-native-windows": "^0.62.4",
"react-navigation": "^4.4.0",
"react-navigation-drawer": "^2.5.0",
"react-navigation-material-bottom-tabs": "^2.3.0",
"react-navigation-stack": "^2.8.2",
"string": "^3.3.3",
"tipsi-stripe": "^7.5.3",
"typescript": "^3.9.7" },
"devDependencies": {
"#babel/core": "^7.12.9",
"#babel/runtime": "^7.12.5",
"#react-native-community/eslint-config": "^2.0.0",
"babel-jest": "^26.6.3",
"eslint": "^7.14.0",
"jest": "^26.6.3",
"jetifier": "^1.6.6",
"metro-react-native-babel-preset": "^0.64.0",
"react-native-dotenv": "0.2.0",
"react-test-renderer": "17.0.1" },
"jest": {
"preset": "react-native" }
}
I clone the repo and modified the ViewManger Name and it worked fine for me you may try it.
past following, to roo dir in package.json and run command yarn install
"react-native-pager-view": "git://github.com/AtaMuhiuldin/react-native-view-pager.git"
it's working for me!
Here there is small issue in lib i guess.
If you import like below
import PagerView from 'react-native-pager-view';
It will not work, but if you try to import like below, it will work.
import { PagerView } from 'react-native-pager-view';
npm uninstall react-native-pager-view
then
npx react-naive run-android
i notice that the problem is that when you install the library and this library exist already on some other libraries dependencies
you can import it without install it again
check package-lock.json you can find it already

Invariant Violation: ViewPagerAndroid has been removed from React Native. Expo v35 to v39 Migration

Tried most of the solutions and even updated all the packages but none of them is working for me.
Touching this project after a while so was migrating from
React Native Expo v35 to v39.
Error Stack Trace:
My list of packages:
package.json
"dependencies": {
"#apollo/react-components": "^3.0.1",
"#apollo/react-hoc": "^3.1.1",
"#apollo/react-hooks": "^3.0.0",
"#react-native-community/async-storage": "~1.12.0",
"#react-native-community/viewpager": "^4.1.6",
"apollo-boost": "^0.4.4",
"apollo-fetch": "^0.7.0",
"apollo-link": "^1.2.13",
"apollo-link-context": "^1.0.19",
"crypto": "^1.0.1",
"crypto-js": "^4.0.0",
"expo": "^39.0.3",
"expo-facebook": "~9.0.0",
"expo-font": "~8.3.0",
"expo-google-app-auth": "^8.0.0",
"expo-image-picker": "~9.1.0",
"expo-notifications": "~0.7.2",
"graphql": "^14.4.2",
"moment": "^2.24.0",
"native-base": "^2.13.8",
"react": "16.13.1",
"react-apollo": "^3.1.3",
"react-dom": "16.13.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-39.0.0.tar.gz",
"react-native-aws3": "^0.0.9",
"react-native-gesture-handler": "~1.7.0",
"react-native-google-places-autocomplete": "^1.4.1",
"react-native-material-ripple": "^0.9.1",
"react-native-modal": "^11.5.6",
"react-native-modal-datetime-picker": "^7.6.0",
"react-native-multiple-select": "^0.5.3",
"react-native-paper": "^3.0.0",
"react-native-picker-select": "^6.3.3",
"react-native-screens": "~2.10.1",
"react-native-status-bar-height": "^2.4.0",
"react-native-vector-icons": "^6.6.0",
"react-native-web": "~0.13.7",
"react-navigation": "^4.4.2",
"react-navigation-drawer": "^1.4.0",
"react-navigation-stack": "^1.7.3",
"react-navigation-tabs": "^1.2.0",
"react-redux": "^7.1.1",
"redux": "^4.0.4",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.3.0"
},
"devDependencies": {
"#graphql-codegen/introspection": "^1.12.2",
"#types/react": "~16.9.35",
"#types/react-native": "~0.63.2",
"babel-jest": "^24.9.0",
"babel-preset-expo": "^8.3.0",
"enzyme": "^3.10.0",
"enzyme-adapter-react-16": "^1.15.1",
"jest": "^24.9.0",
"jest-environment-enzyme": "^7.1.1",
"jest-enzyme": "^7.1.1",
"react-test-renderer": "16.8.3",
"typescript": "~3.9.2"
},
"private": true
}
Based on what I read, it's some package that is causing this issue.
Can someone please help me find the package based on the Trace Stack?
I was unable to find it.
Package Name: react-navigation.
How to search:
Search for ViewPagerAndroid in your VS Code and don't exclude node_modules.
What you need to replace?
import {ViewPagerAndroid} from 'react-native'
with
import ViewPagerAndroid from '#react-native-community/viewpager'
NOTE:
You will need to add #react-native-community/viewpager package

Error: Plugin/Presets are not allowed to export objects, only functions. After update to react native 0.57

I am trying to upgrade my app from react native 0.56 to 0.57.3, but I'm getting the following issue when my app is loading:
error: bundling failed: Error: Plugin/Preset files are not allowed to export objects, only functions. In /Users/otaviogaiao/Projetos/citsmart/citsmart-itsm-mobile-field-service/node_modules/babel-preset-react-native/index.js
at createDescriptor (/Users/otaviogaiao/Projetos/citsmart/citsmart-itsm-mobile-field-service/node_modules/#babel/core/lib/config/config-descriptors.js:178:11)
at items.map (/Users/otaviogaiao/Projetos/citsmart/citsmart-itsm-mobile-field-service/node_modules/#babel/core/lib/config/config-descriptors.js:109:50)
at Array.map (<anonymous>)
at createDescriptors (/Users/otaviogaiao/Projetos/citsmart/citsmart-itsm-mobile-field-service/node_modules/#babel/core/lib/config/config-descriptors.js:109:29)
at createPresetDescriptors (/Users/otaviogaiao/Projetos/citsmart/citsmart-itsm-mobile-field-service/node_modules/#babel/core/lib/config/config-descriptors.js:101:10)
at presets (/Users/otaviogaiao/Projetos/citsmart/citsmart-itsm-mobile-field-service/node_modules/#babel/core/lib/config/config-descriptors.js:47:19)
at mergeChainOpts (/Users/otaviogaiao/Projetos/citsmart/citsmart-itsm-mobile-field-service/node_modules/#babel/core/lib/config/config-chain.js:315:26)
at /Users/otaviogaiao/Projetos/citsmart/citsmart-itsm-mobile-field-service/node_modules/#babel/core/lib/config/config-chain.js:278:7
at mergeExtendsChain (/Users/otaviogaiao/Projetos/citsmart/citsmart-itsm-mobile-field-service/node_modules/#babel/core/lib/config/config-chain.js:294:21)
I have tried deleting node_modules, cleaning the build folder, etc.
My package.json file is:
"dependencies": {
"axios": "^0.18.0",
"date-fns": "^1.29.0",
"lodash.intersection": "^4.4.0",
"lodash.isempty": "^4.4.0",
"lodash.pick": "^4.4.0",
"normalizr": "^3.2.4",
"prop-types": "^15.6.1",
"react": "16.5",
"react-native": "0.57.3",
"react-native-actionsheet": "^2.4.2",
"react-native-code-push": "^5.4.2",
"react-native-datepicker": "^1.7.2",
"react-native-elements": "^0.19.1",
"react-native-geolocation-service": "^1.1.0",
"react-native-i18n": "^2.0.12",
"react-native-image-picker": "^0.26.10",
"react-native-map-link": "^2.0.1",
"react-native-maps": "git+https://github.com/otaviogaiao/react-native-maps#master",
"react-native-maps-super-cluster": "git+https://github.com/otaviogaiao/react-native-maps-super-cluster.git#1.4.2",
"react-native-material-dropdown": "^0.11.1",
"react-native-modal": "^6.5.0",
"react-native-nested-scroll-view": "^7.0.0",
"react-native-responsive-screen": "^1.1.6",
"react-native-splash-screen": "3.0.9",
"react-native-sqlite-storage": "^3.3.5",
"react-native-text-input-mask": "^0.7.0",
"react-native-vector-icons": "^4.6.0",
"react-navigation": "2.0.4",
"react-navigation-redux-helpers": "1.1.2",
"react-redux": "^5.0.7",
"redux": "^4.0.0",
"redux-logger": "^3.0.6",
"redux-persist": "^5.10.0",
"redux-saga": "^0.16.0",
"remove-accents": "^0.4.2",
"rn-fetch-blob": "^0.10.13",
"url": "^0.11.0"
},
"devDependencies": {
"#babel/core": "^7.0.0",
"babel-core": "^7.0.0-bridge.0",
"babel-eslint": "^8.2.3",
"babel-jest": "22.4.4",
"eslint": "^4.19.1",
"eslint-config-airbnb": "^16.1.0",
"eslint-plugin-import": "^2.12.0",
"eslint-plugin-jsx-a11y": "^6.0.3",
"eslint-plugin-prettier": "^2.6.0",
"eslint-plugin-react": "^7.8.2",
"jest": "22.4.4",
"metro-react-native-babel-preset": "^0.45.0",
"prettier": "1.12.1",
"prettier-eslint": "^8.8.1",
"react-test-renderer": "16.5"
},
and this is my .babelrc file:
{
"presets": [
"react-native",
"module:metro-react-native-babel-preset"
],
"env": {
"development": {
"plugins": [
"#babel/plugin-transform-react-jsx-source"
]
}
},
"retainLines": true
}
I looked around for answers, but couldn't find anything that helped me.
Any help is appreciated.

React-Native: Constantly get XCode break stops

I have upgraded an older React Native project to 0.47, 0.48 and then 0.49.x. Since I've done so, I keep getting XCode breaking at random moments with the following breakpoint (sometimes others).
My dependencies
"dependencies": {
"autobind-decorator": "^2.1.0",
"cheerio-without-node-native": "^0.20.2",
"diacritic": "0.0.2",
"expect": "^1.20.2",
"harmony-proxy": "^1.0.1",
"hoist-non-react-statics": "^2.3.1",
"immutable": "^3.8.1",
"lodash": "^4.17.4",
"lodash-es": "^4.17.4",
"lodash.debounce": "^4.0.8",
"lodash.memoize": "^4.1.2",
"lodash.mergewith": "^4.6.0",
"lodash.sorteduniq": "^4.2.0",
"lodash.sorteduniqby": "^4.7.0",
"lodash.union": "^4.6.0",
"lodash.unionwith": "^4.6.0",
"lodash.uniqby": "^4.7.0",
"mime-types": "^2.1.17",
"moment": "^2.18.1",
"normalizr": "^3.2.3",
"normalizr-immutable": "0.0.4-beta12",
"path": "^0.12.7",
"react": "16.0.0-alpha.12",
"react-immutable-proptypes": "^2.1.0",
"react-intl": "^2.4.0",
"react-intl-redux": "^0.6.0",
"react-native": "^0.49.3",
"react-native-action-button": "^2.7.2",
"react-native-animatable": "^1.2.3",
"react-native-autolink": "^1.1.1",
"react-native-code-push": "5.1.3-beta",
"react-native-cookies": "^3.2.0",
"react-native-deprecated-custom-components": "^0.1.1",
"react-native-drawer": "^2.3.0",
"react-native-fetch-blob": "^0.10.8",
"react-native-fs": "^2.5.2",
"react-native-google-analytics-bridge": "^5.3.3",
"react-native-image-crop-picker": "^0.17.2",
"react-native-image-picker": "^0.26.7",
"react-native-immutable-list-view": "^0.6.2",
"react-native-invertible-scroll-view": "^1.0.0",
"react-native-keyboard-aware-scroll-view": "0.3.0",
"react-native-keychain": "2.0.0-rc",
"react-native-lightbox": "^0.7.0",
"react-native-linear-gradient": "^2.3.0",
"react-native-material-kit": "^0.4.1",
"react-native-modalbox": "^1.4.1",
"react-native-parallax-scroll-view": "^0.19.0",
"react-native-photo-view": "^1.5.2",
"react-native-popup-menu": "^0.8.0",
"react-native-progress": "^3.3.0",
"react-native-scrollable-tab-view": "^0.6.7",
"react-native-sglistview": "^0.4.3",
"react-native-share": "^1.0.23",
"react-native-store": "^0.4.1",
"react-native-swiper": "^1.5.12",
"react-native-vector-icons": "^4.2.0",
"react-navigation": "1.0.0-beta.13",
"react-redux": "^5.0.5",
"react-swipeable-views": "^0.12.5",
"react-swipeable-views-native": "^0.12.5",
"realm": "^1.13.0",
"redux": "^3.7.2",
"redux-form": "^7.0.3",
"redux-logger": "^3.0.6",
"redux-middleware-oneshot": "^0.1.1",
"redux-persist": "^4.8.2",
"redux-persist-immutable": "^4.3.0",
"redux-persist-transform-immutable": "^4.3.0",
"redux-thunk": "^2.2.0",
"reselect": "^3.0.1",
"route-parser": "0.0.5",
"webstomp-client": "^1.0.8"
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-core": "^6.26.0",
"babel-eslint": "^7.2.3",
"babel-jest": "^21.2.0",
"babel-plugin-module-resolver": "3.0.0-beta.5",
"babel-plugin-react-intl": "^2.3.1",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-es2015-modules-commonjs": "^6.24.1",
"babel-preset-airbnb": "^2.4.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-react-native": "^4.0.0",
"babel-preset-react-native-stage-0": "^1.0.1",
"babel-register": "^6.24.1",
"chai": "^4.1.0",
"chai-as-promised": "^7.1.1",
"chai-enzyme": "^0.8.0",
"chai-immutable": "^1.6.0",
"commitizen": "^2.9.6",
"cz-conventional-changelog": "^2.0.0",
"enzyme": "^3.0.0",
"eslint": "^4.7.2",
"eslint-config-airbnb": "^15.1.0",
"eslint-plugin-babel": "^4.1.2",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-jsx-a11y": "^6.0.2",
"eslint-plugin-prettier": "^2.3.1",
"eslint-plugin-react": "^7.4.0",
"eslint-plugin-react-native": "^3.1.0",
"expect.js": "^0.3.1",
"flow": "^0.2.3",
"flow-bin": "^0.56.0",
"immutablediff": "^0.4.3",
"jest": "^21.2.1",
"jest-serializer-enzyme": "^1.0.0",
"jshint": "^2.9.5",
"mocha": "^3.4.2",
"react-addons-test-utils": "^15.6.2",
"react-dom": "16.0.0-beta.5",
"react-intl-cra": "^0.2.8",
"react-native-mock": "^0.3.1",
"react-test-renderer": "^16.0.0",
"redux-debounce": "^1.0.1",
"redux-debounced": "^0.4.0",
"redux-devtools": "^3.4.0",
"redux-devtools-dock-monitor": "^1.1.2",
"redux-devtools-log-monitor": "^1.3.0",
"redux-mock-store": "^1.2.3",
"remote-redux-devtools": "^0.5.12",
"sinon": "^4.0.0",
"why-did-you-update": "0.0.8"
}
Other symptoms:
- react-native run-ios completes with BUILD SUCCEEDED but the app opens and immediately closes on the simulator (works ok from Xcode)
In order to eliminate "old file issues", I created a new react-native project and copied over the newly created xcodeproj file over. To no avail.
Any suggestions?
So, the resolution was executing pod init in the ios directory.
The script identifies some erroneous links that don't become apparent in Xcode. Probably the result of react-native upgrades over a significant amount of time.