NativeBase: VSCode high CPU when browse StyleProvider

Hi, I’ve isolated a weird behavior in my workflow. I’m using : Win10 vscode 1.36.1 RN 0.60.4 Native-base 2.13.4 with theme ejected and up to date As soon as i open the file that containing the styleProvider component and modify it, intellisence goes very slow on all the other files. When i look at my process explorer, it looks like this screenshot above and it never improve before i restart VScode even if i close the problematic file. Task Manager

Here a simple exemple that has the problem :

import React, { Component } from 'react';
import { Root, StyleProvider } from 'native-base';
import getTheme from '../native-base-theme/components';
import platform from '../native-base-theme/variables/platform';
import Main from './Main';
export default class App extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <Root>
        <StyleProvider style={getTheme(platform)}>
          <Main />
        </StyleProvider>
      </Root>
    );
  }
}

A workaround is to isolate this piece of code and never open it to keep vscode stable. I’ve no error or warning due to lint/flows/etc… It worked nice before my migration to RN 0.60.4 from RN 0.59.9

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 5
Comments: 15 (2 by maintainers)

Most upvoted comments

confirm on MacOS: vscode 1.37.1 RN 0.59.9 Native-base 2.13.4

workaroud .vscode/settings.json:

“typescript.disableAutomaticTypeAcquisition”: true

Aleksandern on Aug 21, 2019

workaroud .vscode/settings.json:

“typescript.disableAutomaticTypeAcquisition”: true

it’s works!

budoka on Oct 9, 2019

After trying for about 3 hours, I found it is the variable file (for me its platform.js and commonColor.js) leads 100% CPU, and I figured out tsserver cannot handle so much PLATFORM.IOS and it stucks at semanticDiag.

My workaround is to add a variable isIos to replace platform === PLATFORM.IOS, it works perfect.

const isIos = Platform.OS === PLATFORM.IOS;

I opened a PR #3024 for my fix, it should be an elegant way to resolve this.

kagurazakakotori on Dec 11, 2019

My project does not eject the theme but rather extends by spread operator (…) from native-base/src/theme/variables/platform before calling getTheme

Here is the variation of platform.js that eventually worked with Intellisense though I am unsure why refactoring all of the PLATFORM.IOS refs back to “ios” makes it work.

import color from "color"
import { Platform, Dimensions, PixelRatio } from "react-native"

const deviceHeight = Dimensions.get("window").height
const deviceWidth = Dimensions.get("window").width
const platformStyle = undefined
const isIphoneX =
  Platform.OS === "ios" &&
  (deviceHeight === 812 ||
    deviceWidth === 812 ||
    deviceHeight === 896 ||
    deviceWidth === 896)

export default {
  platformStyle,
  platform: Platform.OS,

  // Accordion
  accordionBorderColor: "#d3d3d3",
  accordionContentPadding: 10,
  accordionIconFontSize: 18,
  contentStyle: "#f5f4f5",
  expandedIconStyle: "#000",
  headerStyle: "#edebed",
  iconStyle: "#000",

  // ActionSheet
  elevation: 4,
  containerTouchableBackgroundColor: "rgba(0,0,0,0.4)",
  innerTouchableBackgroundColor: "#fff",
  listItemHeight: 50,
  listItemBorderColor: "transparent",
  marginHorizontal: -15,
  marginLeft: 14,
  marginTop: 15,
  minHeight: 56,
  padding: 15,
  touchableTextColor: "#757575",

  // Android
  androidRipple: true,
  androidRippleColor: "rgba(256, 256, 256, 0.3)",
  androidRippleColorDark: "rgba(0, 0, 0, 0.15)",
  buttonUppercaseAndroidText: true,

  // Badge
  badgeBg: "#ED1727",
  badgeColor: "#fff",
  badgePadding: Platform.OS === "ios" ? 3 : 0,

  // Button
  buttonFontFamily: Platform.OS === "ios" ? "System" : "Roboto_medium",
  buttonDisabledBg: "#b5b5b5",
  buttonPadding: 6,
  buttonDefaultActiveOpacity: 0.5,
  buttonDefaultFlex: 1,
  buttonDefaultBorderRadius: 2,
  buttonDefaultBorderWidth: 1,
  get buttonPrimaryBg() {
    return this.brandPrimary
  },
  get buttonPrimaryColor() {
    return this.inverseTextColor
  },
  get buttonInfoBg() {
    return this.brandInfo
  },
  get buttonInfoColor() {
    return this.inverseTextColor
  },
  get buttonSuccessBg() {
    return this.brandSuccess
  },
  get buttonSuccessColor() {
    return this.inverseTextColor
  },
  get buttonDangerBg() {
    return this.brandDanger
  },
  get buttonDangerColor() {
    return this.inverseTextColor
  },
  get buttonWarningBg() {
    return this.brandWarning
  },
  get buttonWarningColor() {
    return this.inverseTextColor
  },
  get buttonTextSize() {
    return Platform.OS === "ios"
      ? this.fontSizeBase * 1.1
      : this.fontSizeBase - 1
  },
  get buttonTextSizeLarge() {
    return this.fontSizeBase * 1.5
  },
  get buttonTextSizeSmall() {
    return this.fontSizeBase * 0.8
  },
  get borderRadiusLarge() {
    return this.fontSizeBase * 3.8
  },
  get iconSizeLarge() {
    return this.iconFontSize * 1.5
  },
  get iconSizeSmall() {
    return this.iconFontSize * 0.6
  },

  // Card
  cardDefaultBg: "#fff",
  cardBorderColor: "#ccc",
  cardBorderRadius: 2,
  cardItemPadding: Platform.OS === "ios" ? 10 : 12,

  // CheckBox
  CheckboxRadius: Platform.OS === "ios" ? 13 : 0,
  CheckboxBorderWidth: Platform.OS === "ios" ? 1 : 2,
  CheckboxPaddingLeft: Platform.OS === "ios" ? 4 : 2,
  CheckboxPaddingBottom: Platform.OS === "ios" ? 0 : 5,
  CheckboxIconSize: Platform.OS === "ios" ? 21 : 16,
  CheckboxIconMarginTop: Platform.OS === "ios" ? undefined : 1,
  CheckboxFontSize: Platform.OS === "ios" ? 23 / 0.9 : 17,
  checkboxBgColor: "#039BE5",
  checkboxSize: 20,
  checkboxTickColor: "#fff",
  checkboxDefaultColor: "transparent",
  checkboxTextShadowRadius: 0,

  // Color
  brandPrimary: Platform.OS === "ios" ? "#007aff" : "#3F51B5",
  brandInfo: "#62B1F6",
  brandSuccess: "#5cb85c",
  brandDanger: "#d9534f",
  brandWarning: "#f0ad4e",
  brandDark: "#000",
  brandLight: "#f4f4f4",

  // Container
  containerBgColor: "#fff",

  // Date Picker
  datePickerFlex: 1,
  datePickerPadding: 10,
  datePickerTextColor: "#000",
  datePickerBg: "transparent",

  // FAB
  fabBackgroundColor: "blue",
  fabBorderRadius: 28,
  fabBottom: 0,
  fabButtonBorderRadius: 20,
  fabButtonHeight: 40,
  fabButtonLeft: 7,
  fabButtonMarginBottom: 10,
  fabContainerBottom: 20,
  fabDefaultPosition: 20,
  fabElevation: 4,
  fabIconColor: "#fff",
  fabIconSize: 24,
  fabShadowColor: "#000",
  fabShadowOffsetHeight: 2,
  fabShadowOffsetWidth: 0,
  fabShadowOpacity: 0.4,
  fabShadowRadius: 2,
  fabWidth: 56,

  // Font
  DefaultFontSize: 16,
  fontFamily: Platform.OS === "ios" ? "System" : "Roboto",
  fontSizeBase: 15,
  get fontSizeH1() {
    return this.fontSizeBase * 1.8
  },
  get fontSizeH2() {
    return this.fontSizeBase * 1.6
  },
  get fontSizeH3() {
    return this.fontSizeBase * 1.4
  },

  // Footer
  footerHeight: 55,
  footerDefaultBg: Platform.OS === "ios" ? "#F8F8F8" : "#3F51B5",
  footerPaddingBottom: 0,

  // FooterTab
  tabBarTextColor: Platform.OS === "ios" ? "#6b6b6b" : "#b3c7f9",
  tabBarTextSize: Platform.OS === "ios" ? 14 : 11,
  activeTab: Platform.OS === "ios" ? "#007aff" : "#fff",
  sTabBarActiveTextColor: "#007aff",
  tabBarActiveTextColor: Platform.OS === "ios" ? "#007aff" : "#fff",
  tabActiveBgColor: Platform.OS === "ios" ? "#cde1f9" : "#3F51B5",

  // Header
  toolbarBtnColor: Platform.OS === "ios" ? "#007aff" : "#fff",
  toolbarDefaultBg: Platform.OS === "ios" ? "#F8F8F8" : "#3F51B5",
  toolbarHeight: Platform.OS === "ios" ? 44 : 56,
  toolbarSearchIconSize: Platform.OS === "ios" ? 20 : 23,
  toolbarInputColor: Platform.OS === "ios" ? "#CECDD2" : "#fff",
  searchBarHeight: Platform.OS === "ios" ? 30 : 40,
  searchBarInputHeight: Platform.OS === "ios" ? 30 : 50,
  toolbarBtnTextColor: Platform.OS === "ios" ? "#007aff" : "#fff",
  toolbarDefaultBorder: Platform.OS === "ios" ? "#a7a6ab" : "#3F51B5",
  iosStatusbar: Platform.OS === "ios" ? "dark-content" : "light-content",
  get statusBarColor() {
    return color(this.toolbarDefaultBg)
      .darken(0.2)
      .hex()
  },
  get darkenHeader() {
    return color(this.tabBgColor)
      .darken(0.03)
      .hex()
  },

  // Icon
  iconFamily: "Ionicons",
  iconFontSize: Platform.OS === "ios" ? 30 : 28,
  iconHeaderSize: Platform.OS === "ios" ? 33 : 24,

  // InputGroup
  inputFontSize: 17,
  inputBorderColor: "#D9D5DC",
  inputSuccessBorderColor: "#2b8339",
  inputErrorBorderColor: "#ed2f2f",
  inputHeightBase: 50,
  get inputColor() {
    return this.textColor
  },
  get inputColorPlaceholder() {
    return "#575757"
  },

  // Line Height
  buttonLineHeight: 19,
  lineHeightH1: 32,
  lineHeightH2: 27,
  lineHeightH3: 22,
  lineHeight: Platform.OS === "ios" ? 20 : 24,
  listItemSelected: Platform.OS === "ios" ? "#007aff" : "#3F51B5",

  // List
  listBg: "transparent",
  listBorderColor: "#c9c9c9",
  listDividerBg: "#f4f4f4",
  listBtnUnderlayColor: "#DDD",
  listItemPadding: Platform.OS === "ios" ? 10 : 12,
  listNoteColor: "#808080",
  listNoteSize: 13,

  // Progress Bar
  defaultProgressColor: "#E4202D",
  inverseProgressColor: "#1A191B",

  // Radio Button
  radioBtnSize: Platform.OS === "ios" ? 25 : 23,
  radioSelectedColorAndroid: "#3F51B5",
  radioBtnLineHeight: Platform.OS === "ios" ? 29 : 24,
  get radioColor() {
    return this.brandPrimary
  },

  // Segment
  segmentBackgroundColor: Platform.OS === "ios" ? "#F8F8F8" : "#3F51B5",
  segmentActiveBackgroundColor: Platform.OS === "ios" ? "#007aff" : "#fff",
  segmentTextColor: Platform.OS === "ios" ? "#007aff" : "#fff",
  segmentActiveTextColor: Platform.OS === "ios" ? "#fff" : "#3F51B5",
  segmentBorderColor: Platform.OS === "ios" ? "#007aff" : "#fff",
  segmentBorderColorMain: Platform.OS === "ios" ? "#a7a6ab" : "#3F51B5",

  // Spinner
  defaultSpinnerColor: "#45D56E",
  inverseSpinnerColor: "#1A191B",

  // Tab
  tabBarDisabledTextColor: "#BDBDBD",
  tabDefaultBg: Platform.OS === "ios" ? "#F8F8F8" : "#3F51B5",
  topTabBarTextColor: Platform.OS === "ios" ? "#6b6b6b" : "#b3c7f9",
  topTabBarActiveTextColor: Platform.OS === "ios" ? "#007aff" : "#fff",
  topTabBarBorderColor: Platform.OS === "ios" ? "#a7a6ab" : "#fff",
  topTabBarActiveBorderColor: Platform.OS === "ios" ? "#007aff" : "#fff",

  // Tabs
  tabBgColor: "#F8F8F8",
  tabFontSize: 15,

  // Text
  textColor: "#000",
  inverseTextColor: "#fff",
  noteFontSize: 14,
  get defaultTextColor() {
    return this.textColor
  },

  // Title
  titleFontfamily: Platform.OS === "ios" ? "System" : "Roboto_medium",
  titleFontSize: Platform.OS === "ios" ? 17 : 19,
  subTitleFontSize: Platform.OS === "ios" ? 11 : 14,
  subtitleColor: Platform.OS === "ios" ? "#8e8e93" : "#FFF",
  titleFontColor: Platform.OS === "ios" ? "#000" : "#FFF",

  // Other
  borderRadiusBase: Platform.OS === "ios" ? 5 : 2,
  borderWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1),
  contentPadding: 10,
  dropdownLinkColor: "#414142",
  inputLineHeight: 24,
  deviceWidth,
  deviceHeight,
  isIphoneX,
  inputGroupRoundedBorderRadius: 30,

  // iPhoneX SafeArea
  Inset: {
    portrait: {
      topInset: 24,
      leftInset: 0,
      rightInset: 0,
      bottomInset: 34
    },
    landscape: {
      topInset: 0,
      leftInset: 44,
      rightInset: 44,
      bottomInset: 21
    }
  }
}

jamesholcomb on Oct 16, 2019

Try npm install typescript@next and tell VSCode to use the local Typescript-Version. That fixed it for me.

SimonErm on Feb 3, 2020

For some reason, a simple replacement of PLATFORM.* constants with string values works, like suggested in this comment.

@kagurazakakotori Sadly, PR stuck on formatting issues. I shortly reviewed changes, IIUC this will prevent another platform from being injected like getTheme(variables). The platform was originally provided via DI, const platform = variables.platform; ... platform === PLATFORM.IOS. And now isIos is hard-coded to current platform. This doesn’t seem to affect the lib itself but could affect theme customization in third-party code.

bisubus on Dec 23, 2019

I’ve spent a whole day in finding out why TS is broken, so created a JSON file having theme variables & then passing it to StyleProvider

saggiyogesh on Aug 9, 2019

This is probably the same… I’m happy not to be alone on this case 💃 I’ve decided to touch theme files the less i can !

grean on Aug 9, 2019