Theme is not applied when using native-base-web with native-base-shoutem-theme

[flipflopapp]

I am using native-base-web with native-base-shoutem-theme ; but the custom theme changes are not applied to the DOM.

More details

I have customised the theme and have used console to see that it is loaded properly, when I do below at init.

import { Theme } from 'native-base-shoutem-theme';
import getThemeStyle from '../theme/components';

export default function setDefaultThemeStyle() {
  const theme = getThemeStyle();
  Theme.setDefaultThemeStyle(theme);
}

I have wrapped my code in a Style Provider.

import { StyleProvider } from 'native-base-shoutem-theme';
import getTheme from '../theme/components';
import variables from '../theme/variables/platform';

<StyleProvider style={getTheme(variables)}>
        <>
              {this.props.children}
        </>
</StyleProvider>

So I suspect that there is some fix which is needed in react-native-web.

Can I provide any more information or can you suggest me more ways to debug?

[flipflopapp]

By comparing native-base and native-base-web, I see that the support for native-base-shoutem-theme is missing. For instance, in file native-base/src/button.js; the following code is added to support shoutem-theme.

import { connectStyle } from "native-base-shoutem-theme";
...
// and at the end...
const StyledButton = connectStyle(
  "NativeBase.Button",
  {},
  mapPropsToStyleNames
)(Button);
export { StyledButton as Button };

The component file Components/Widgets/Button.js in 'native-base-web' is missing this connector.

I am trying to add this.

[flipflopapp]

I have created a PR with above changes - https://github.com/Chion82/native-base-web/pull/18

• see the top two commits
• i have tested them to work

I request anyone who wants to use native-base-web with themes to try them out aswell.