Search code examples
javascriptreactjstypescriptreact-nativearrow-functions

Arrow function logic in React Native CLI project


I created a new React Native CLI project and was thinking to convert the App component to a class based component to fix a hot reload issue when using react-navigation.

But I don't understand the logic with these two arrow functions, and how to convert it:

const App: () => React$Node = () => {
  return <NavigationWrapper />;
};

Update: the arrow question was answered, though it didn´t help for the hot reload issue (a glitch in my logic there). See this link for a solution for that.


Solution

  • First, be very careful when reading this code. It looks like two arrow functions, but actually the second 'arrow function' is the type annotation of App. So it's the same as this:

    const App: (() => React$Node) = () => {
      return <NavigationWrapper />;
    };
    

    or even clearer:

    const App = (): React$Node => {
      return <NavigationWrapper />;
    };
    

    Then, remember that arrow functions are just like regular functions, so this can be written like so:

    function App(): React$Node {
      return <NavigationWrapper />;
    };
    

    So now it becomes pretty clear how this might look:

    class App {
      render(): React$Node {
        return <NavigationWrapper />;
      }
    }