React-native-web: native-base and react-native-web compatibility problem

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

[necolas]

You need to run a compiler over the RN modules that haven't been compiled before publish to npm. This is described in the docs. https://necolas.github.io/react-native-web/docs/?path=/docs/guides-multi-platform--page#web-packaging-for-existing-react-native-apps

And PropTypes are no longer supported in this library. They have also been deprecated from RN and will be removed, so Native Base will need to migrate off PropTypes.

[andywong418]

@necolas I'm having the same issue with react-native-modal-selector. How does your method work with the universal method described here?

[megauspexx]

There is a difference between "no longer supported" and "deprecated from RN and will be removed".
You created a lot of problems with your stupidity