React-native-navigation: Can't pass array of functions in passProps

[henrikra]

Issue Description

When pushing new screen with passProps with array of function the app will freeze

Steps to Reproduce / Code Snippets / Screenshots

this.props.navigator.push({
  screen: 'myScreen',
  passProps: {myFunctions: [() => null, () => null]},
});

---

Environment

• React Native Navigation version: 1.1.377
• React Native version: 0.52.2
• Platform(s): iOS
• Device info: Simulator

[guyca]

Every unserializable data causes this?
What about passing a single function, does that cause a freeze as well?

[henrikra]

If I pass just single function like this it does not freeze:

this.props.navigator.push({
  screen: 'myScreen',
  passProps: {myFunctions: () => null},
});

[henrikra]

I ran to this problem when passing array of validators to my component when using redux-form https://redux-form.com/7.3.0/examples/fieldlevelvalidation/

[guyca]

hmm... this is strange. You think RN fails to serialize array of functions before going over the bridge?
What about converting the array to an object, something like:

function arrToObj(arr) {
  const result = {};
  for (let i = 0; i < arr.length; i++) {
    result[i] = arr[i];
  }
  return result;
}

[henrikra]

Yeah I actually did function which converts my array to object as workaround:

const validatorsToObject = validators =>
  validators.reduce((acc, validator, index) => ({ ...acc, [index]: validator }), {});

[guyca]

@henrikra I'm going to close the issue as we probably will never get to it and it doesn't exist in v2.
Sorry for the inconvenience

[henrikra]

So I can remove my hack function when I start using v2?

[guyca]

Yes, in v2 props are never passed over the bridge and are not used by rnn.

[salisuabubakar]

Please can someone give example on how to passProps json objects to another screen in RNN v2

[haggholm]

@guyca

Yes, in v2 props are never passed over the bridge and are not used by rnn.

Are you sure? We seem to be having an issue with something similar in V2 with passProps when opening a modal. Basically, it looks something like

(component) => Navigation.showModal({
        title: title,
        stack: {
            children: [{
                component: {
                    name: 'modal',
                    passProps: {
                        component
                    }
                }
            }]
        });

This crashes with the “field sizes are different” red screen from https://github.com/wix/react-native-navigation/issues/3226 – if the component is wrapped with React.forwardRef() (either directly or via react-forwardref-utils). Remove the ref forwarding and the error goes away.

We’re still investigating the nature of this problem, but it seems to be related to RNN and passProps.

[andres-torres-marroquin]

A small workaround we used:

component:
    name: 'NewScreen'
    passProps: 
        getNonSerializableObjectHere: => nonSerializableObjectHere

It is interesting that you cannot pass complex objects, but you can pass functions that return whatever you want.