Warning: Stateless function components cannot be given refs

[diegocouto]

Hi, guys!

First of all, thanks for your amazing work with code-push, it's awesome! 😉

Description

After finishing codePush setup process, I've started to see a warning like:

Warning: Stateless function components cannot be given refs 
(See ref "rootComponent" in App created by CodePushComponent). 
Attempts to access this ref will fail.

Reproduction

Currently, I have a setup file which is responsible for defining the main component, which is just like:

setup.js

// ...
let App = () => (
  <Provider store={store}>
    <StyleProvider style={theme}>
      <RouterWithRedux scenes={scenes} />
    </StyleProvider>
  </Provider>
);

module.exports = codePush(App);

index.ios.js / index.android.js

import {AppRegistry} from 'react-native';
const App = require('./config/setup');

AppRegistry.registerComponent('MyApp', () => App);

Except for a ref used on a TextInput, defined on a component with state, I do not use any other refs. Removing codepush() makes this warning disappear.

Additional Information

• react-native-code-push version: 1.17.2-beta
• react-native version: 0.42.0
• iOS/Android/Windows version: iOS 10.2
• Does this reproduce on a debug build or release build? Debug
• Does this reproduce on a simulator, or only on a physical device? Both

[sergey-akhalkov]

Hi @diegocouto, thank you for reporting the issue. Also please sorry for late reply.
The issue is caused by this line of code. But the root cause of the issue is that stateless component is in use. Our demo app extends React.Component: class CodePushDemoApp extends Component { and use it further with codePush decorator: CodePushDemoApp = CodePush(codePushOptions)(CodePushDemoApp);
To fix the issue could you please try the following:
setup.js

class MyRoot extends Component {
    ...
    render() {
        return <div />
    }
}

MyRoot = codePush(MyRoot);

let App = () => (
  <Provider store={store}>
    <MyRoot />
  </Provider>
);

module.exports = App;

I've also found the code sample that uses the same approach.

Please let me know if it helps or if you have any issues.

[sergey-akhalkov]

@diegocouto, just a friendly ping.

[diegocouto]

Hi, @sergey-akhalkov! Thank you for your detailed response. 😄 I'll be working on this tomorrow and, as soon as I finish this and some other changes I'll update this issue, ok?

Thanks again! 😉

UPDATE

Yep, following this approach, it was possible to get rid of the warning. Thanks! 👍

[sergey-akhalkov]

@diegocouto, great! Closing this, please feel free to reopen if needed.