Cannot make custom component

[dave-edelhart-finfare]

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]

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

[ravis-farooq]

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

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