Babel configuration for react-native Expo - react-native

Question

so i am trying to run this react-native app built on expo i am having trouble configuring things.
here's my .babelrc
{
"presets": ["#babel/preset-env","#babel/react"],
"plugins": [
"#babel/plugin-proposal-class-properties"
]
}
my package.json
{
"name": "APP NAME",
"version": "0.1.0",
"private": true,
"devDependencies": {
"#babel/preset-react": "^7.9.4",
"babel-eslint": "^10.0.1",
"babel-preset-env": "^1.7.0",
"eslint": "^5.7.0",
"eslint-config-airbnb": "^17.1.0",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-jest": "^21.25.1",
"eslint-plugin-jsx-a11y": "^6.1.2",
"eslint-plugin-react": "^7.11.1",
"jest-expo": "^37.0.0",
"react-native-debugger-open": "^0.3.17",
"react-native-scripts": "1.11.1",
"react-test-renderer": "16.2.0"
},
"main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
"scripts": {
"start": "react-native-scripts start",
"eject": "react-native-scripts eject",
"android": "react-native-scripts android",
"lint": "eslint --ignore-path .gitignore .",
"lint:fix": "eslint --fix --ignore-path .gitignore .",
"ios": "react-native-scripts ios",
"test": "node node_modules/jest/bin/jest.js",
"debug": "open 'rndebugger://set-debugger-loc?host=localhost&port=19001'"
},
"jest": {
"preset": "jest-expo"
},
"dependencies": {
"#react-native-community/viewpager": "^3.3.0",
"axios": "^0.18.0",
"babel-preset-react-native": "^4.0.1",
"date-fns": "^1.29.0",
"enzyme": "^3.7.0",
"enzyme-adapter-react-16": "^1.6.0",
"expo": "^37.0.0",
"lodash": "^4.17.10",
"prop-types": "^15.6.2",
"react": "16.9.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz",
"react-native-app-intro-slider": "^0.2.4",
"react-native-chart-kit": "^1.2.1",
"react-native-datepicker": "^1.7.2",
"react-native-hr-component": "^1.0.6",
"react-native-mock-render": "^0.1.2",
"react-native-modal-datetime-picker": "^6.0.0",
"react-native-paystack": "^3.1.4",
"react-native-picker-select": "^5.1.0",
"react-native-scrollable-tab-view": "^1.0.0",
"react-native-tab-view": "^2.14.0",
"react-native-vector-icons": "^4.6.0",
"react-native-webview-bridge": "^0.33.0",
"react-navigation": "^2.9.3",
"react-redux": "^5.0.7",
"redux": "^4.0.0",
"redux-devtools-extension": "^2.13.5",
"redux-logger": "^3.0.6",
"redux-mock-store": "^1.5.3",
"redux-persist": "^5.10.0",
"redux-thunk": "^2.2.0",
"styled-components": "^3.2.3",
"whatwg-fetch": "^2.0.4"
}
}
so at first i had an error like
node_modules/react-native-scrollable-tab-view/node_modules/#react-native-community/viewpager/js/index.js: Plugin/Preset files are not allowed to export objects, only functions. In node_modules/babel-preset-expo/index.js
this got fixed when i remove "babel-preset-expo" from my .babelrc and replaced it with the above content now i am having another error like this:
SyntaxError: /node_modules/react-native-scrollable-tab-view/node_modules/#react-native-community/viewpager/js/index.js: Unexpected token (10:12)
8 | */
9 |
> 10 | import type {PageScrollState as _PageScrollState} from './types';
| ^
11 | import type {PageScrollEvent as _PageScrollEvent} from './types';
12 | import type {PageScrollStateChangedEvent as _PageScrollStateChangedEvent} from './types';
13 | import type {PageSelectedEvent as _PageSelectedEvent} from './types';
Failed building JavaScript bundle
so any ideas why this is happening and how to fix it would be appreciated. Thanks
EDIT:
okay so i have added "react-native" to the babel presets array and the previous error i gone but now i got a new error saying:
node_modules/react-navigation-deprecated-tab-navigator/node_modules/react-native-tab-view/src/TabViewPagerExperimental.js: Cannot read property 'bindings' of null

Answer 1

If there is no .babel.rc present, you can create your own. Add whatever else you may need in there just as you would with .babelrc and it should work. I tried this out yesterday on my Expo managed RN app and it seems to have worked.
// Filename: .babelrc
{
"presets": ["babel-preset-expo"],
"plugins": ["transform-decorators-legacy"],
"env": {
"development": {
"plugins": ["transform-react-jsx-source"]
}
}
}
Edit: This was initial answer...
Expo can be created with two workflows. You would get a .babelrc for a bare workflow, and a babel.config.js for a managed workflow.
If you have "babel.config.js" you could try the following instead of worrying about .babelrc
module.exports = function (api) {
api.cache(true);
return {
presets: ["babel-preset-expo"],
plugins: ["babel-plugin-proposal-class-properties"]
};
};