I'm using react-native-web and native-base to build an app (bootstrapped by CRA-typescript template) and the following error is thrown on the compilation.
I have followed the exact same steps mentioned in the official docs of native-base setup with web.
I would prefer not to downgrade the version of native-base/react-native-web.
Error Description:
./node_modules/@codler/react-native-keyboard-aware-scroll-view/lib/KeyboardAwareHOC.js
SyntaxError: \nativebase-app\node_modules\@codler\react-native-keyboard-aware-scroll-view\lib\KeyboardAwareHOC.js: Unexpected token (13:12)
11 | } from 'react-native'
12 | import { isIphoneX } from 'react-native-iphone-x-helper'
> 13 | import type { KeyboardAwareInterface } from './KeyboardAwareInterface'
| ^
14 |
15 | const _KAM_DEFAULT_TAB_BAR_HEIGHT: number = isIphoneX() ? 83 : 49
16 | const _KAM_KEYBOARD_OPENING_TIME: number = 250
My package.json
{
"name": "nativebase-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"@babel/plugin-proposal-class-properties": "^7.13.0",
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"@types/jest": "^26.0.15",
"@types/node": "^12.0.0",
"@types/react": "^17.0.0",
"@types/react-dom": "^17.0.0",
"customize-cra": "^1.0.0",
"native-base": "^2.15.2",
"react": "^17.0.1",
"react-app-rewired": "^2.1.8",
"react-art": "^17.0.1",
"react-dom": "^17.0.1",
"react-native-keyboard-aware-scroll-view": "^0.9.3",
"react-native-vector-icons": "^8.1.0",
"react-native-web": "^0.15.0",
"react-scripts": "4.0.3",
"typescript": "^4.1.2",
"web-vitals": "^1.0.1"
},
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-scripts eject"
},
...rest config
}
config-overrides.js
const path = require('path');
const {
override,
addWebpackAlias,
babelInclude,
addBabelPlugins
} = require('customize-cra');
module.exports = override(
addWebpackAlias({
"react-native/Libraries/Renderer/shims/ReactNativePropRegistry": "react-native-web/dist/modules/ReactNativePropRegistry",
"react-native": "react-native-web"
}),
babelInclude([
path.resolve('src'),
path.resolve('node_modules/native-base-shoutem-theme'),
path.resolve('node_modules/react-navigation'),
path.resolve('node_modules/react-native-easy-grid'),
path.resolve('node_modules/react-native-drawer'),
path.resolve('node_modules/react-native-safe-area-view'),
path.resolve('node_modules/react-native-vector-icons'),
path.resolve('node_modules/react-native-keyboard-aware-scroll-view'),
path.resolve('node_modules/react-native-web'),
path.resolve('node_modules/react-native-tab-view'),
path.resolve('node_modules/static-container'),
]),
addBabelPlugins(
"@babel/plugin-proposal-class-properties"
),
);