CODEWITHSUNDEEP
reactjsreact-native
Alex
Alex

Reputation: 92

What is happening in the "App" declaration generated by "react-native init"?

When I do:

npx react-native init MyTestApp

The App.js file that is created includes the line:

const App: () => React$Node = () => {

I'm familiar with the arrow syntax for functions, but

1) What is the colon after App doing?

2) What is the dollar sign in React$Node doing? React is imported, but I don't see any variable named React$Node, which is what I would expect this to be.

Upvotes: 1

Views: 88

Answers (1)

Gaurav Roy
Gaurav Roy

Reputation: 12215

Its type definition from Flow, it means that constant App is of type function and it returns ReactNode.

ReactNode is one of these types:

 ReactChild | ReactFragment | ReactPortal | boolean | null | undefined

This means the function App can return, any valid JSX (in react native its anything from View, Text, .etc), ReactFragment, React.Portal, boolean, null, undefined

If you are confused about the dollar sign, here is a link with explanation. https://www.saltycrane.com/flow-type-cheat-sheet/latest/

There are separate sections for "private" or "magic" types with a $ in the name. See the note here and comment here. Update: Some these types are now documented here.

For easy you can think of it as its Node from React (think of it as scope/namespace)

This is the best explanation given by Lukas , do feel free to ask any doubts.

Upvotes: 2

Related Questions