Open dave-edelhart-finfare opened 4 months ago
Getting an error with custom component (heads up- NOT typescript due to company regs)
Uncaught Error funcsMap[key] is not a function Source 38 | var mappedProps = funcsMap[key](props , options) ; 39 | // eslint-disable-next-line guard-for-in > 40 | for ( var mappedKey in mappedProps) { | ^ 41 | styles[mappedKey] = mappedProps[mappedKey] ; 42 | } 43 | }
This is the component (a basic page header)
import {Platform, StyleSheet, View, Text} from "react-native"; import {createRestyleComponent, createVariant} from "@shopify/restyle"; import {BoxRestyle} from "./theme"; const WebHeaderContainer = createRestyleComponent( [ createVariant({ themeKey: 'pageHeadVariants', defaults: { }, }), ], BoxRestyle, ); export default function WebHeader() { if (Platform.OS !== 'web') return null; return <WebHeaderContainer id='web-header'> <Text>Restyle Web Header</Text> </WebHeaderContainer> } // ----- theme import {createTheme} from '@shopify/restyle'; const palette = { sacramentoGreen: '#083D33', bangladeshGreen: '#15664F', persianGreen: '#01B694', grannySmithYellow: '#01B694', perlAqua: '#85CFC4', black: '#000000', white: '#FFFFFF', gray_xxxl: 'rgba(0,0,0,0.95)', gray_xxl: 'rgba(0,0,0,0.85)', gray_xl: 'rgba(0,0,0,0.75)', gray_l: 'rgba(0,0,0,0.66)', gray_m: 'rgba(0,0,0,0.5)', gray_s: 'rgba(0,0,0,0.33)', gray_xs: 'rgba(0,0,0,0.25)', gray_xxs: 'rgba(0,0,0,0.25)', gray_xxxs: 'rgba(0,0,0,0.05)', }; const theme = createTheme({ colors: { mainBackground: palette.white, cardPrimaryBackground: palette.bangladeshGreen, pageHeaderBackgroundColor: palette.gray_xxxs, pageHeaderTintColor: palette.black, ...palette }, spacing: { xs: 4, s: 8, m: 16, l: 24, xl: 32, xxl: 48 }, pageHeadVariants: { defaults: { width: '100%', height: '90px', display: 'flex', justifyContent: 'center', alignItems: 'center', flexDirection: 'column', backgroundColor: 'pageHeaderBackgroundColor', }, }, textVariants: { header: { fontFamily: 'PoppinsExtraBold', fontWeight: '800', fontSize: 34, }, body: { fontFamily: 'Roboto', fontWeight: '400', fontSize: 16, lineHeight: 24, }, defaults: { // We can define a default text variant here. }, }, }); export default theme;
the component works as documented in site...
Web / Expo
"@shopify/restyle": "^2.4.4",
apparently the property 'display' is causing a compile error. Why? shouldnt I be able to say display: 'flex'?
Current behavior
Getting an error with custom component (heads up- NOT typescript due to company regs)
This is the component (a basic page header)
Expected behavior
the component works as documented in site...
To Reproduce
Platform:
Web / Expo
Environment