Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6287

React Native App using native-base and react-native-web fails to compile on web

$
0
0

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.jsSyntaxError: \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"  ),);

Viewing all articles
Browse latest Browse all 6287

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>