React native: export default App with multiple module wraps

Question

I Have the following App.js in my react native project:

class App extends Component {

    render() {
        return (
          <ApolloProvider store={store} client={client}>
        <AppWithNavigationState />
        </ApolloProvider>

      );
    }

}
export default App = codePush(App);

I am trying to add aws amplify authenticator to my project (https://github.com/aws/aws-amplify/blob/master/media/quick_start.md#react-native-development) but the steps tell me to add :

export default withAuthenticator(App);

^^ How do I do that when I have already codePush wrapped around the App component that I am exporting?

Answer 1

TL;DR: The withAuthenticator is basically a higher order component which takes a component, decorates it (i.e. provide some special props or customizations of sorts) and returns a new component composed of the component you passed in. So in your case if you want multiple HOCs, you can simply say -

export default withAuthenticator(codePush(App))

This syntax can get potentially nasty from a readability standpoint if you have, say, 5 decorators. It is useful in such cases to use the new decorator syntax. With it you can do neat things like -

@mySpecialDecoratorThatDoesNiceThings
@withAuthenticator
@codePush
export default class App extends Component {
...
}

If you are using babel, check out this transform-decorators babel plugin to make sure decorators are correctly transpiled.