Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6214

Type for material from './native-base-theme';

$
0
0

I am using a custom native-base style theme. It was created using this method:

https://docs.nativebase.io/Customize.html#theaming-nb-headref

import material from './native-base-theme/variables/material';import getTheme from './native-base-theme/components';
return (<Suspense fallback="loading"><Provider store={store}><StyleProvider style={getTheme(material)}>

When I use material, I get such Type errors:

Argument of type '{ platformStyle: string; platform: "ios" | "android" | "windows" | "macos" | "web"; headerStyle: string; iconStyle: string; contentStyle: string; expandedIconStyle: string; accordionBorderColor: string; ... 151 more ...; Inset: { ...; }; }' is not assignable to parameter of type '{ platformStyle: any; platform: "ios" | "android" | "windows" | "macos" | "web"; accordionBorderColor: string; accordionContentPadding: number; accordionIconFontSize: number; contentStyle: string; ... 180 more ...; Inset: { ...; }; }'.Type '{ platformStyle: string; platform: "ios" | "android" | "windows" | "macos" | "web"; headerStyle: string; iconStyle: string; contentStyle: string; expandedIconStyle: string; accordionBorderColor: string; ... 151 more ...; Inset: { ...; }; }' is missing the following properties from type '{platformStyle: any; platform: "ios" | "android" | "windows" | "macos" | "web";

How can I get rid of this?

material.js inside the native-base-themes folder looks like this:

import color from 'color';import { Platform, Dimensions, PixelRatio } from 'react-native';import { PLATFORM } from './commonColor';const deviceHeight = Dimensions.get('window').height;const deviceWidth = Dimensions.get('window').width;const platform = Platform.OS;const platformStyle = PLATFORM.MATERIAL;const isIphoneX =  platform === PLATFORM.IOS &&  (deviceHeight === 812 ||    deviceWidth === 812 ||    deviceHeight === 896 ||    deviceWidth === 896);export default {  platformStyle,  platform,  // Android  androidRipple: true,  androidRippleColor: 'rgba(256, 256, 256, 0.3)',  androidRippleColorDark: 'rgba(0, 0, 0, 0.15)',  buttonUppercaseAndroidText: true,  // Button  buttonFontFamily: 'Roboto',  get buttonPrimaryBg() {    return this.brandPrimary;  },  get buttonTextSizeLarge() {    return this.fontSizeBase * 1.5;  },  // Header  toolbarBtnColor: '#fff',  toolbarDefaultBg: '#3F51B5',  toolbarHeight: 56,  toolbarSearchIconSize: 23,  toolbarInputColor: '#fff',  searchBarHeight: platform === PLATFORM.IOS ? 30 : 40,  searchBarInputHeight: platform === PLATFORM.IOS ? 40 : 50,  toolbarBtnTextColor: '#fff',  toolbarDefaultBorder: '#3F51B5',  iosStatusbar: 'light-content',  get statusBarColor() {    return color(this.toolbarDefaultBg)      .darken(0.2)      .hex();  },  get darkenHeader() {    return color(this.tabBgColor)      .darken(0.03)      .hex();  },  // Text  textColor: '#000',  inverseTextColor: '#fff',  noteFontSize: 14,  get defaultTextColor() {    return this.textColor;  },  // iPhoneX SafeArea  Inset: {    portrait: {      topInset: 24,      leftInset: 0,      rightInset: 0,      bottomInset: 34,    },    landscape: {      topInset: 0,      leftInset: 44,      rightInset: 44,      bottomInset: 21,    },  },};

Viewing all articles
Browse latest Browse all 6214

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>