Skip to content
New issue

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

Cannot make custom component #300

Open
2 tasks
dave-edelhart-finfare opened this issue May 8, 2024 · 2 comments
Open
2 tasks

Cannot make custom component #300

dave-edelhart-finfare opened this issue May 8, 2024 · 2 comments
Labels
bug Something isn't working

Comments

@dave-edelhart-finfare
Copy link

dave-edelhart-finfare commented May 8, 2024

Current behavior

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;

Expected behavior

the component works as documented in site...

To Reproduce

Platform:

Web / Expo

  • iOS
  • Android

Environment

"@shopify/restyle": "^2.4.4",
@dave-edelhart-finfare dave-edelhart-finfare added the bug Something isn't working label May 8, 2024
@dave-edelhart-finfare
Copy link
Author

apparently the property 'display' is causing a compile error. Why? shouldnt I be able to say display: 'flex'?

@ravis-farooq
Copy link

Did you fix that? I am getting same error on
export const Typography = createText();

  <Typography variant={'h5'}>HELP</Typography>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants