React native navigation problem in HeaderBackButton.tsx whenever I use props.navigation.navigate('Game')

Question

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s%s, undefined, You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check your code at HeaderBackButton.tsx:152.

My code is the following:

const Home: FunctionComponent<HomeProps> = (props: HomeProps) => {


    return (
        <View style={styles.container}>
            <View>
                <Text>{"Listo para jugar Cuarenta ? "}</Text>
            </View>
            <View style={styles.button}>
                <Button title="Rules" onPress={() => {
                    console.log("Props", props);
                    props.navigation.navigate('Cuarenta');

                }}/>
            </View>

            <View style={styles.button}>
                <Button title="New Game" onPress={() => {
                    props.navigation.navigate('Game');
                }}></Button>
            </View>
            <View style={styles.button}>
                <Button title="Tablero" onPress={() => {
                    props.navigation.navigate('Tablero');
                }}></Button>
            </View>
            <View style={styles.button}>
                <Button title="Robot" onPress={() => {
                    props.navigation.navigate('RobotScene');
                }}></Button>
            </View>

        </View>
    )
}

export default function App() {
    return (
        <NavigationContainer>
            <Stack.Navigator
                screenOptions={{
                    headerStyle: {
                        backgroundColor: '#f41e9e',
                    },
                    headerTintColor: '#fff',
                    headerTitleStyle: {
                        fontWeight: 'bold',
                    },
                }}
            >
                <Stack.Screen
                    name='Home'
                    component={Home}
                    options={{title: 'Juego de Cuarenta'}}
                />
                <Stack.Screen
                    name='Cuarenta'
                    component={Cuarenta}

                />
                <Stack.Screen
                    name='Game'
                    component={GameScene}
                />
                <Stack.Screen
                    name='Tablero'
                    component={Tablero}
                />
                <Stack.Screen
                    name='RobotScene'
                    component={RobotScene}
                />

            </Stack.Navigator>
        </NavigationContainer>
    );
}

Answer 1

I solve this by rolling back to expo 38.0.8(the original version of my project).