Warning: RangeError: Maximum call stack size exceeded (native stack depth)

[KobetiakMykola]

Is there an existing issue for this?

• I have searched the existing issues

Explain what you did

After updating to EXPO 53, I am getting this error. It seems the issue is located in rightIcon. But issue stop to be reproducible if not to use Input overrides in theme.

<Input multiline numberOfLines={3} containerStyle={styles.inputContainer} inputContainerStyle={styles.inputInnerContainer} inputStyle={styles.inputText} value={messageText} onChangeText={(value: string) => setMessageText(value)} onFocus={() => {}} rightIcon={ <TouchableOpacity onPress={handleSend}> <Icon name="send" color={dataTemplate.isLoading ? theme.colors.disabled : theme.colors.primary} size={22} /> </TouchableOpacity> } />

Theme part:
` Input: (props, theme) => {
setThemeDefault(props, "inputAccessoryViewID", "done");
setThemeDefault(props, "renderErrorMessage", false);
setThemeStyles(props, "labelStyle", [fontStyles.Size1, { marginBottom: 4 }]);
setThemeStyles(props, "inputStyle", [fontStyles.Size3, fontStyles.PrimaryFamily]);
setThemeStyles(props, "containerStyle", [{ paddingHorizontal: 0, borderRadius: 10 }]);
setThemeStyles(props, "inputContainerStyle", [
{
borderTopWidth: 1.25,
borderLeftWidth: 1.25,
borderBottomWidth: 1.25,
borderRightWidth: 1.25,
borderColor: theme.colors.greyOutline,
borderRadius: 10,
paddingHorizontal: 12,
paddingVertical: 10,
},
]);
setThemeStyles(props, "errorStyle", [{ marginLeft: 0 }]);
setThemeDefault(props, "labelProps", [{ includeFontPadding: false }]);

  console.log(props);

  return props;
},`

Only if I completely delete Input overrides in the theme it works.

I am using 5.1.6 version of rn-vui

"@rn-vui/base": "^5.1.6", "@rn-vui/themed": "^5.1.6",

Expected behavior

The theme should work as expected.

Describe the bug

ERROR Warning: RangeError: Maximum call stack size exceeded (native stack depth)

Steps To Reproduce

Install rn-vui and expo 53.
Create Input using @rn-vui/themed and add rightIcon prop with TouchableOpacity and Icon.

Set up the theme using createTheme and add the Input component. Simply use 
Input: (props, theme) => {
      return props;
}

Open the screen where the Input should be rendered and see the error.

Screenshots

No response

Your Environment

`npx @rn-vui/envinfo`

  ```
    Output from `npx @rn-vui/envinfo` goes here.
  ```

[deepktp]

@KobetiakMykola

Can you update the Snack, I am unable to generate the issue or warning you are having,

https://snack.expo.dev/@deepktp/issue_46

[KobetiakMykola]

@deepktp I am not able to reproduce it in Snack. But what I noticed in my example props in theme are receiving too many properties, which is causing this error

{"containerStyle": {"flex": 1, "padding": 0}, "inputContainerStyle": {"backgroundColor": "#F3F3F3", "borderRadius": 25, "height": 55, "paddingHorizontal": 15}, "inputStyle": {"fontSize": 14}, "multiline": true, "numberOfLines": 3, "onChangeText": [Function onChangeText], "rightIcon": {"$$typeof": Symbol(react.transitional.element), "_owner": {"_debugHookTypes": [Array], "_debugInfo": null, "_debugNeedsRemount": false, "_debugOwner": [FiberNode], "actualDuration": 0.23712491989135742, "actualStartTime": 1524851408.346625, "alternate": [FiberNode], "child": [FiberNode], "childLanes": 0, "deletions": null, "dependencies": [Object], "elementType": [Function Chat], "flags": 8914945, "index": 0, "key": null, "lanes": 0, "memoizedProps": [Object], "memoizedState": [Object], "mode": 3, "pendingProps": [Object], "ref": null, "refCleanup": null, "return": [FiberNode], "selfBaseDuration": 0.23712491989135742, "sibling": null, "stateNode": null, "subtreeFlags": 0, "tag": 0, "treeBaseDuration": 8.206628322601318, "type": [Function Chat], "updateQueue": [Object]}, "_store": {}, "key": null, "props": {"children": [Object], "onPress": [Function handleSend]}, "type": {"$$typeof": Symbol(react.forward_ref), "render": [Function TouchableOpacity]}}, "value": ""}

Adding this line solved the problem.

props = ObjectHelper.omit(props, ["rightIcon", "leftIcon"]);

But this is not expected behavior, so this patch is ok just for now.
If I find the root of the problem, I will post a message here.

Full example:

`Input: (props, theme) => {
props = ObjectHelper.omit(props, ["rightIcon", "leftIcon"]);

  setThemeDefault(props, "inputAccessoryViewID", "done");
  setThemeDefault(props, "renderErrorMessage", false);
  setThemeStyles(props, "labelStyle", [fontStyles.Size1, { marginBottom: 4 }]);
  setThemeStyles(props, "inputStyle", [fontStyles.Size3, fontStyles.PrimaryFamily]);
  setThemeStyles(props, "containerStyle", [{ paddingHorizontal: 0, borderRadius: 10 }]);
  setThemeStyles(props, "inputContainerStyle", [
    {
      borderTopWidth: 1.25,
      borderLeftWidth: 1.25,
      borderBottomWidth: 1.25,
      borderRightWidth: 1.25,
      borderColor: theme.colors.greyOutline,
      borderRadius: 10,
      paddingHorizontal: 12,
      paddingVertical: 10,
    },
  ]);
  setThemeStyles(props, "errorStyle", [{ marginLeft: 0 }]);
  setThemeDefault(props, "labelProps", [{ ...props, includeFontPadding: false }]);

  return props;
},`

Thanks for the reply @deepktp