Home.navigationOptions dosn't work with components being passed through firebase context

changing navigation options when passing the component though the context api dosn’t work.

Apps.navigationOptions = { title: 'Apps' } export default withFirebaseHOC(Apps)

[amandeepmittal]

Hey @iamwill123

Apologies for getting back to you on so late. Feel free to submit a PR on this. However, do note that, in future, I will be upgrading react-navigation to v5 and thus, the firebase auth methods consumption might change.

A big thank you for the above solution ❤️

[iamwill123]

@jim-alexander I believe this will help as I had this same question and issue. I did some digging and adapted some code into this:

context.js:

import React, { createContext } from 'react';
import hoistNonReactStatics from 'hoist-non-react-statics';

const FirebaseContext = createContext({});

export const FirebaseProvider = FirebaseContext.Provider;

export const FirebaseConsumer = FirebaseContext.Consumer;

export const withFirebaseHOC = Component => {
  const Wrapper = props => {
    return (
      <FirebaseConsumer>
        {state => <Component {...props} firebase={state} />}
      </FirebaseConsumer>
    );
  };
  hoistNonReactStatics(Wrapper, Component);
  return Wrapper;
};

The key was coping the static methods by using the hoist-non-react-statics package. This solved my static navigationOptions issue on each screen.

References for the solution: https://kentcdodds.com/blog/mixing-component-patterns https://www.npmjs.com/package/hoist-non-react-statics https://reactjs.org/docs/higher-order-components.html#static-methods-must-be-copied-over

@amandeepmittal, this might be a worthwhile PR. I have a few more additions to this starter which is awesome by the way.

Hope it helps, Will