We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
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",
The text was updated successfully, but these errors were encountered:
apparently the property 'display' is causing a compile error. Why? shouldnt I be able to say display: 'flex'?
Sorry, something went wrong.
Did you fix that? I am getting same error on export const Typography = createText();
<Typography variant={'h5'}>HELP</Typography>
No branches or pull requests
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
The text was updated successfully, but these errors were encountered: