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

[passion0470]

"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.

[deathemperor]

Can confirm the error on 2.13.13. Someone said here https://github.com/APSL/react-native-keyboard-aware-scroll-view/issues/448 downgrading to 2.13.12 fixed the issue.

[OneHatRepo]

Anyone coming here looking for a solution, check this out: https://forums.expo.io/t/expo-start-web-failed-to-compile-after-import-native-base/40826/9

[tomvrampio]

Any news on this? It's a big problem for me, stopping me getting a web build out. I have to run on 2.13.8, and on that version there are plenty of other bugs still present.

[robertwt7]

Confirmed, not sure how to fix it though now :/

[nandhamkumar]

Same Issue :(

[matias91]

It seems they are already working on this issue: https://github.com/GeekyAnts/NativeBase/issues/3264#issuecomment-703404306

[EdinK1]

Has anyone found a temporary fix yet?

[matias91]

@EdinK1, I just forked it and fixed the issue there, until they release a new version with the fix.
It's not ideal, but it was a blocker for me.

[EdinK1]

@matias91 Can you expand more on how to fix it as I don't understand how to solve it. Thanks!

[matias91]

Sure, @EdinK1. That depends on the error you are receiving.
I was seeing this one: TypeError: Cannot read property 'style' of undefined
I left a comment with my solution here: https://github.com/GeekyAnts/NativeBase/issues/3264#issuecomment-711072981
I also created a pull request with my changes: https://github.com/GeekyAnts/NativeBase/pull/3280

Let me know if you have doubts. Hope this help.

[EdinK1]

~/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
~/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

This is the problem I have @matias91

[matias91]

Okay, @EdinK1.
I fixed that error with this solutions: https://forums.expo.io/t/expo-start-web-failed-to-compile-after-import-native-base/40826/9

I'm using expo, and that answer worked for me, but I don't know your tech stack.

[EdinK1]

Hey @matias91,

So, I went ahead did everything the forum told me and now I'm getting a different error.

TypeError: _utils.ViewPropTypes is undefined
../../../native-base/dist/src/basic/Tabs/DefaultTabBar.js
/src/basic/Tabs/DefaultTabBar.js:26

This is where I am stuck. Let me know if you know a way around it. Thank you!

[matias91]

@EdinK1, that's what I explained you here: https://github.com/GeekyAnts/NativeBase/issues/3231#issuecomment-716169721
It's a workaround until they fix this issue, but you would need to fork this repository, made the needed changes and install the dependency with the fix from your forked repo.
Again, this is not the perfect/recommended solution, but for me it was a blocker and I had to solve it asap.