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

[davidbarker]

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