connect() doing something to static methods in parent class?

No idea why this is happening. Any clues?

class Bar {
  static renderNavigationBar(props) {
    return <CustomView />;
  }
}

class Foo1 extends Bar {}

The function of the static method is probably irrelevant, but it tells rn to use that custom view for the navigation bar: https://github.com/facebook/react-native/blob/master/Libraries/CustomComponents/Navigator/Navigator.js#L1120

This works as expected:

export default Foo1;

And without inheritance, this works as expected:

class Foo2 {
  static renderNavigationBar(props) {
    return <CustomView />;
  }
}
export default Foo2;

But with inheritance, this doesn’t work – it’s as if there was no static method on parent.

export default connect(...)(Foo1)

Is this a redux issue?

[gaearon]

TL;DR: Don’t extend anything besides default React.Component in your components if you plan on connecting them to Redux.

This is generally a good rule in React. You shouldn’t use inheritance with it.

I decided to abstract out the static renderNavigationBar(props) to a separate class like this:

I would not recommend using inheritance for this. What if next time, you want to share some other code between other set of your classes? But now they inherit from a common parent, so you’d have to use some hack or a mixin system to copy those methods. At the end of the day there is no reason why it is shorter than just a function:

export default renderNavigationBar = ...

import renderNavigationBar from './renderNavigationBar'

class Component1 extends Component { }
Component1.renderNavigationBar = renderNavigationBar

import renderNavigationBar from './renderNavigationBar'

class Component2 extends Component { }
Component2.renderNavigationBar = renderNavigationBar

In React, inheritance is discouraged. Just don’t use it, you don’t need it. You can achieve exactly the same reusability with functions.

[DavidBrear]

TL;DR: Don’t extend anything besides default React.Component in your components if you plan on connecting them to Redux.

I ran across this issue this morning (or something similar). I’m using react-native-router-flux and wanted to add a custom navbar to a bunch of scenes. I decided to abstract out the static renderNavigationBar(props) to a separate class like this:

export default class ComponentWithNavBar extends Component {
    static renderNavigationBar(props) {
        return (<CustomNavBar />);
    }
}

and use that in all of my classes like this:

export default class Profile extends ComponentWithNavBar {
    // *component code here *
}
/* different file */
export default class Settings extends ComponentWithNavBar {
    // *component code here *
}
/* etc */

This works great until you attempt to connect the components to redux via connect(...) because it seems the connect method is returning a new Component or as you said:

Only “own” static methods are proxied for simplicity. This is intentional.

For anyone who cares how I solved this, I just included a standard

static renderNavigationBar(props) {
    return (<CustomNavBar {...props} />);
}

in each of my components. This serves to explicitly signify which components have a navigation bar as well as allow me to customize it a bit more than just extending a class. If this is not what this original ticket is about, I’m sorry for wasting so much of your time.