TypeError: funcsMap[propKey] is not a function when using createText()

[dvyio]

The code below works as expected with v2.0.0 of Restyle, but when I upgrade to v2.1.0 I get the following error.

TypeError: funcsMap[propKey] is not a function. (In 'funcsMap[propKey](props, {
  theme: theme,
  dimensions: dimensions
})', 'funcsMap[propKey]' is undefined)

After some digging through my code, it appears that if I remove my <Title> component, this error goes away. So there's some issue with createText() perhaps?

I looked through the changelog for 2.0.0 → 2.1.0 but don't see anything obvious? If I replace my <Title> component with a plain <Text> component, it also works (but of course I lose the Restyle features).

import { createBox, createText } from '@shopify/restyle';
import React, {
  forwardRef,
  useImperativeHandle,
  useRef,
  useState,
} from 'react';
import { TouchableWithoutFeedback } from 'react-native';

import { Theme } from '~/theme/index';

import TextInput from './TextInput';

const InputWrapper = createBox<Theme>();
const OuterWrapper = createBox<Theme>();
const OutlineView = createBox<Theme>();
const Wrapper = createBox<Theme>();
const Title = createText<Theme>();

const SignInTextInput = (
  {
    title,
    ...rest
  }: {
    onChangeText: () => void;
    title: string;
    value: string;
  },
  ref: React.Ref<any>,
) => {
  const [isFocused, setIsFocused] = useState(false);
  const inputRef = useRef<any>();

  const focusInput = () => {
    inputRef.current?.focus();
  };

  useImperativeHandle(ref, () => ({
    focus: () => {
      focusInput();
    },
  }));

  return (
    <TouchableWithoutFeedback onPress={focusInput}>
      <OuterWrapper>
        <OutlineView
          backgroundColor={
            isFocused ? 'cardPrimaryBackground' : 'mainBackground'
          }
          bottom={-2}
          left={-2}
          position="absolute"
          right={-2}
          style={{
            borderRadius: 10,
          }}
          top={-2}
        />
        <Wrapper
          backgroundColor="mainBackground"
          borderColor="cardPrimaryBackground"
          borderWidth={1}
          padding="s"
          style={{
            borderRadius: 7.5,
          }}
        >
          <Title color="cardPrimaryBackground" fontSize={12}>
            {title}
          </Title>
          <InputWrapper flexDirection="row">
            <TextInput
              {...rest}
              onBlur={() => setIsFocused(false)}
              onFocus={() => setIsFocused(true)}
              ref={inputRef}
            />
          </InputWrapper>
        </Wrapper>
      </OuterWrapper>
    </TouchableWithoutFeedback>
  );
};

export default forwardRef(SignInTextInput);

[khuznain99]

same issue only with Text = createText();

[brascene]

+1

[brascene]

If this can help anyone, I've had the same issue (that funcsMap[propKey] is not a function error), and after some digging I found that it was caused by fontVariant property, and after removing it, it's working again. Note that I was having an older version of shopify/restyle: 1.6.1., and this happened after upgrade to 2.1.0.

[Rebraxin]

Have you guys check if your <ThemeProvider /> is properly set ?

[EQuimper]

Same issue here and yes the ThemeProvider was set. But look like all is fix when you add that to your theme

[mednour023]

hello guys! ive got the same issue here when I add variant='header' to my Text component, any help please

version :"@shopify/restyle": "^1.4.0"

Text component :
import {createText} from '@shopify/restyle';
import {Theme} from './theme';

export const Text = createText();

theme :
import * as React from 'react';
import {
ThemeProvider as ReThemeProvider,
TextProps,
BoxProps,
useTheme as useRTheme,
} from '@shopify/restyle';

type BaseThemeType = typeof BaseTheme & {
textVariants: {[key: string]: TextProps};
// navigation: any;
// buttonVariants: {[key: string]: BoxProps};
};
const createTheme = (themeObject: T): T => themeObject;
const BaseTheme = {
colors: {
primary: '#1b434d',
secondary: '#d3c2f8',
mainBackground: '#fff',
span: '#565656',
},
spacing: {
s: 8,
m: 16,
l: 24,
xl: 40,
},
breakpoints: {
phone: 0,
tablet: 768,
},
};
export const theme = createTheme({
...BaseTheme,
textVariants: {
defaults: {

},
header: {
  fontWeight: 'bold',
  fontSize: 34,
  lineHeight: 42.5,
  color: 'span',
},

},
// buttonVariants: {},
// navigation: {},
});
export type Theme = typeof theme;

export const ThemeProvider = ({children}: {children: React.ReactNode}) => (
{children}
);

export const useTheme = () => useRTheme();

[anthlasserre]

On my side I figure it out by removing transform style property in some of my variants in textVariant.

[jetaggart]

Is there any way to get types on textVariants and the like? Or at least a better error message? This keeps biting me as it can be hard to track down which property is incorrect (typo, etc.).

[Remeic]

Hi!
Same error for me, I just created an expo project and add restyle.

I'm using the theme suggested by documentation and createText, nothing else.

There are updates on this issue?
Thanks in advance

[diamondrarktvo]

Same issue here and yes the ThemeProvider was set. But look like all is fix when you add that to your theme

I add defaults in my textVariants but I doesn't work I have the error "undefined is not a function" when I add variant props in Text component like test

[youssdevx]

Do not forget to wrap the component you're testing with the <ThemeProvider />.
Instead of just using render, you can create a wrapper like this:

and use it like this

[DanielASantos-dev]

Pessoal, no meu caso, o problema estava no expo router, e como tinha definido um arquivo App.tsx fora do src/app

[ravis-farooq]

<ThemeProvider theme={ theme}> IS MUST IN ORDER TO USE FEATURES OF SHOPIFY RESTYLE

<SafeAreaView style={backgroundStyle}>
      <ThemeProvider theme={ theme}>
   <StatusBar
     barStyle={isDarkMode ? 'light-content' : 'dark-content'}
     backgroundColor={backgroundStyle.backgroundColor}
   />
       <NavigationContainer>
         <Routes />
       </NavigationContainer>

       </ThemeProvider>
 </SafeAreaView>