NativeBase: There is a compatibility problem with react-native-web in expo.

“react-native-web”: “^0.13.9”, “native-base”: “^2.13.14”, “expo”: “~38.0.8”, “react-native-keyboard-aware-scroll-view”: “^0.9.2”,

There is a compatibility problem with native-base and react-native-web. With the yarn web included in expo,

I used the code below. code-------------------------------

import React from 'react';
import { Container, Header, Tab, Tabs, ScrollableTab, Text } from 'native-base';
export default function TabsScrollableExample() {
    return (
        <Container>
          <Header hasTabs/>
          <Tabs renderTabBar={()=> <ScrollableTab />}>
            <Tab heading="Tab1">
              <Text>Tab1</Text>
            </Tab>
            <Tab heading="Tab2">
              <Text>Tab2</Text>
            </Tab>
            <Tab heading="Tab3">
              <Text>Tab3</Text>
            </Tab>
            <Tab heading="Tab4">
              <Text>Tab4</Text>
            </Tab>
            <Tab heading="Tab5">
              <Text>Tab5</Text>
            </Tab>
          </Tabs>
        </Container>
      );
}

---

yarn web

The following error occurs

error-----------------------------------------

~/node_modules/@codler/react-native-keyboard-aware-scroll-view/lib/KeyboardAwareHOC.js 13:12
Module parse failed: Unexpected token (13:12)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| } from 'react-native'
| import { isIphoneX } from 'react-native-iphone-x-helper'
> import type { KeyboardAwareInterface } from './KeyboardAwareInterface'
| 
| const _KAM_DEFAULT_TAB_BAR_HEIGHT: number = isIphoneX() ? 83 : 49

---

=> Temporarily modified through the forum… => Source: https://forums.expo.io/t/expo-start-web-failed-to-compile-after-import-native-base/40826 make sure you have react-native-keyboard-aware-scroll-view folder in your node_modules folder, not inside any other folder go to native base/dist/src/basic and open Content.js var _reactNativeKeyboardAwareScrollView=require(‘@codler/react-native-keyboard-aware-scroll-view’) var _reactNativeKeyboardAwareScrollView=require(‘react-native-keyboard-aware-scroll-view’)

=> However, another error occurs.

error------------------------------------------------

TypeError: Cannot read property 'style' of undefined
~/node_modules/native-base/dist/src/basic/Tabs/DefaultTabBar.js
C:/Users/src/basic/Tabs/DefaultTabBar.js:26
  23 | activeTextColor: PropTypes.string,
  24 | inactiveTextColor: PropTypes.string,
  25 | disabledTextColor: PropTypes.string,
> 26 | tabStyle: ViewPropTypes.style,
     | ^  27 | renderTab: PropTypes.func,
  28 | underlineStyle: ViewPropTypes.style,
  29 | tabContainerStyle: ViewPropTypes.style,

---

No more work. I wish you a quick solution. I love the web and native-base that I use with expo.