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

See original GitHub issue

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);

Issue Analytics

  • State:open
  • Created a year ago
  • Comments:6

github_iconTop GitHub Comments

6reactions
EQuimpercommented, Sep 7, 2022

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

image
5reactions
khuznainfivemecommented, Aug 3, 2022

same issue only with Text = createText<Theme>();

Read more comments on GitHub >

github_iconTop Results From Across the Web

TypeError: "x" is not a function - JavaScript - MDN Web Docs
The JavaScript exception "is not a function" occurs when there was an attempt to call a value from a function, but the value...
Read more >
"TypeError: react.createContext" is not a function with Next.js ...
I'm using a Radix UI select component in Next.js 13 with Typescript and it throws this error: TypeError: $9g4ps$react.createContext is not a ......
Read more >
How to Handle JavaScript Uncaught TypeError: “x” is Not a ...
The Javascript TypeError: "x" is not a function occurs when calling a function on a value or object, which is not actually a...
Read more >
JavaScript: Uncaught TypeError: n is not a function
This means that the expression did not return a function object. ... Array.prototype.map() is used, which will work with Array objects only.
Read more >
Uncaught TypeError | Is Not A Function | Solution - YouTube
Have you encountered an error like:- Uncaught TypeError - Some selector is not a function - jQuery is not a function - owlCarousel...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found