TypeError: funcsMap[propKey] is not a function when using createText()
See original GitHub issueThe 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:
- Created a year ago
- Comments:6
Top 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 >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Same issue here and yes the ThemeProvider was set. But look like all is fix when you add that to your theme
same issue only with Text = createText<Theme>();