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 APSL/react-native-keyboard-aware-scroll-view#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: #3264 (comment)

[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: #3264 (comment)
I also created a pull request with my changes: #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: #3231 (comment)
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.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[darynmitchell]

A note for anyone else using expo web and looking for workaround to the @codler/react-native-keyboard-aware-scroll-view/lib/KeyboardAwareHOC.js that OP had and @EdinK1 expanded on:

@matias91 mentioned workaround https://forums.expo.io/t/expo-start-web-failed-to-compile-after-import-native-base/40826/9, but I think there's a simpler solution if you didn't already need to customize your webpack.
Learning from an earlier native-base in expo problem, https://forums.expo.io/t/how-to-use-native-base-components-with-expo-sdk-33-for-web/23711/16),
add the following to your App.json:

{
  "expo": {
    "web": {
      "build": {
        "babel": {
          "include": ["@codler/react-native-keyboard-aware-scroll-view"]
        }
      }
    }
  }
}

This made the KeyboardAwareHOC error go away for me.

However I should note that as of this date that just leads to the next problem with native-base and expo web, #3280, which is not currently merged. It has had activity in the past week so that may happen soon, or you can see that discussion for some possible workarounds if you need solutions before it gets merged.

[tauruscch]

This is the problem I have too. Finally, how to solve it

[Rananjaya]

I've this error
error node_modules/react-native-keyboard-aware-scroll-view/lib/KeyboardAwareHOC.js: # could not be cloned.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.