Function components cannot be given refs

[vendeza]

I've got the next warning:

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

Check the render method of `withReactNavigationAutotrack(App)`.
    in App (created by withReactNavigationAutotrack(App))
    in withReactNavigationAutotrack(App)
    in Unknown (created by Connect(Component))
    in Connect(Component) (at Boot.js:9)
    in Provider (at Boot.js:8)
    in Unknown (at renderApplication.js:50)
    in RCTView (at View.js:32)
    in View (at AppContainer.js:92)
    in RCTView (at View.js:32)
    in View (at AppContainer.js:119)
    in AppContainer (at renderApplication.js:43)
    in ivee(RootComponent) (at renderApplication.js:60)

App.js component:

 //@flow

import * as React from 'react';
import {
  StartScreen,
} from './src/screens';
import {DarkTheme, NavigationContainer} from '@react-navigation/native';
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import {createStackNavigator} from '@react-navigation/stack';
import {LogBox} from 'react-native';
import {useKeepAwake} from '@sayem314/react-native-keep-awake';
import Heap from '@heap/react-native-heap';
import type {StartScreenSettings} from './src/types/main';
import {useEffect, useRef} from 'react';

const Screens = createStackNavigator();

type Props = {
  isSignIn: boolean,
  screensDataAreLoaded: boolean,
  startScreenSettings: StartScreenSettings,
};

const App = ({
  isSignIn,
  screensDataAreLoaded,
  startScreenSettings,
}: Props): React.Node => {

  LogBox.ignoreLogs(['new NativeEventEmitter']);

  const options = {
    title: '',
    headerLeft: null,
    headerShown: false,
  };

  useEffect(() => {
    // run custom events
  }, []);

  return (
    <NavigationContainer theme={DarkTheme}>
      <Screens.Navigator options={options}>
        <Screens.Group>
        <Screens.Screen
                  name={'StartScreen'}
                  options={options}
                  component={StartScreen}
                />
        </Screens.Group>
      </Screens.Navigator>
    </NavigationContainer>
  );
};
const mapStateToProps = state => {
  const {mainReducer} = state;
  return {
    pending: mainReducer.pending,
    startScreenSettings: mainReducer.startScreenSettings,
    isSignIn: mainReducer.isSignIn,
    screensDataAreLoaded: mainReducer.screensDataAreLoaded,
  };
};

// ERROR  Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

const HeapNavigationContainer = Heap.withReactNavigationAutotrack(App);

const mapDispatchToProps = dispatch => bindActionCreators({}, dispatch);
export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(HeapNavigationContainer);

"react": "17.0.2", "react-native": "^0.66.4", "@heap/react-native-heap": "^0.21.0", "@react-navigation/bottom-tabs": "^6.0.9", "@react-navigation/elements": "^1.2.1", "@react-navigation/material-top-tabs": "^6.0.6", "@react-navigation/native": "^6.0.6", "@react-navigation/stack": "^6.0.11",

Do you have any idea why it happened?

[bnickel]

Since you're using ReactNavigation 6, you're going to want to wrap NavigationContainer rather than App.

You can wrap the navigation container like this:

const HeapNavigationContainer = Heap.withReactNavigationAutotrack(NavigationContainer);

Once wrapped, you use <HeapNavigationContainer/> as a drop-in replacement for <NavigationContainer/> in your code:

  return (
    <HeapNavigationContainer theme={DarkTheme}>
      <Screens.Navigator options={options}>
        <Screens.Group>
        <Screens.Screen
                  name={'StartScreen'}
                  options={options}
                  component={StartScreen}
                />
        </Screens.Group>
      </Screens.Navigator>
    </HeapNavigationContainer>
  );

Your App.jsx should then export App as it was doing before rather than the wrapped HeapNavigationContainer.

[vendeza]

@bnickel thanks!