Edgar Edgar - 16 days ago 7
React JSX Question

React Native: Custom component w/ a function in a prop - Maximum call stack size exceeded

I have a custom component that wraps native

<Text>
component for a Limited Style Inheritance . In my custom component I have a
function
in the
style
prop
to dynamically evaluate a custom
font
prop
and decide what font to render.

This is my component:

import React from 'react';
import { Text } from 'react-native';
import styles from './styles';

const evaluateFont = (font = 'regular') => {
console.log('[evaluateFont]');
switch (font) {
case 'regular':
return styles.fontRegular;
case 'semibold':
return styles.fontSemibold;
case 'bold':
return styles.fontBold;
}
};

const MyText = (props) => {
const { children, style, font, ...rest } = props;

return (
<MyText>
<Text
style={[evaluateFont(font), style]}
{...rest}
>
{children}
</Text>
</MyText>
);
};

export default MyText;


But when running my app I get the
Maximum call stack size exceeded
Error.
Why my
evaluateFont()
fn
cause this & keeps running?

Answer

Your problem is not your evaluateFont(), it's the <MyText></MyText> in your return statement that's creating a that's causing the stack issue. Try removing the extraneous <MyText></MyText> and see if that works any better.

Comments