registerRootComponent + Typescript - what's the correct parameter type?

hi there :wave:

typescipt is flagging some very basic code but i’m stumped on how to fix:

import React from 'react';
import { registerRootComponent } from 'expo';
import { StatusBar } from 'expo-status-bar';
import styled from 'styled-components/native';
import { Platform } from 'react-native';


export default function App(): React.ReactNode {
	return (
		<Container>
			<Title>Hello world! (from: {Platform.OS})</Title>
			<StatusBar style="auto" />
		</Container>
	);
}

const Container = styled.View`
	flex: 1;
	align-items: center;
	justify-content: center;
	background-color: #fff;
`;

const Title = styled.Text`
	font-size: 16px;
	text-align: center;
	color: red;
`;

registerRootComponent(App);

…when type-checked w/ tsc --project tsconfig.json --noemit yields:

error TS2345: Argument of type '() => ReactNode' is not assignable to parameter of type 'ComponentType<InitialProps>'.
  Type '() => ReactNode' is not assignable to type 'FunctionComponent<InitialProps>'.
    Type 'ReactNode' is not assignable to type 'ReactElement<any, any> | null'.
      Type 'undefined' is not assignable to type 'ReactElement<any, any> | null'.

31 registerRootComponent(App);

docs don’t show typescript usage.

ah, seems like the answer is to use the JSX.Element return type :man_shrugging:

https://github.com/typescript-cheatsheets/react/issues/129

https://github.com/microsoft/TypeScript/issues/21699

1 Like

Thanks for following up with the solution, @mmirande!

1 Like

This topic was automatically closed 20 days after the last reply. New replies are no longer allowed.