I am following the course for React Native in Udemy and trying to do it directly with React Native 5. I reached this lesson where we want to add a button in the headerRight property.
Following React Navigation 5 guide I am adding it to the Stack.Screen element Stack.Screen element but getting the following error:
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: 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.
I have checked other questions on slack and this error appears usually when there is a mistake in the brackets imports, that does seem my case since when the function passed to headerRight options returns a single element it works and if it's nested I get the error.
This is the full working code with a single element:
import React from "react";
import {
NavigationContainer,
DefaultTheme,
TouchableOpacity,
} from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import IndexScreen from "./src/screens/IndexScreen";
import { Provider as BlogProvider } from "./src/context/BlogContext"; // This is inside brackets becasue we don't use the 'default' in export
import ShowScreen from "./src/screens/ShowScreen";
import CreateScreen from "./src/screens/CreateScreen";
import { Feather } from "@expo/vector-icons";
const Stack = createStackNavigator();
function LogoTitle() {
return (
<Feather name="plus" size={30} />
);
}
function MyStack() {
return (
<Stack.Navigator screenOptions={{ title: "Blogs" }}>
<Stack.Screen
name="Index"
component={IndexScreen}
options={{ headerRight: () => <LogoTitle /> }}
/>
<Stack.Screen name="Show" component={ShowScreen} />
<Stack.Screen name="Create" component={CreateScreen} />
</Stack.Navigator>
);
}
const MyTheme = {
...DefaultTheme,
colors: {
...DefaultTheme.colors,
background: "#FFF",
},
};
export default function App() {
return (
<BlogProvider>
<NavigationContainer theme={MyTheme}>
<MyStack />
</NavigationContainer>
</BlogProvider>
);
}
When I change the LogoTitle function to the following code I get the error,
function LogoTitle() {
return (
<TouchableOpacity onPress={() => console.log('pressed')}>
<Feather name="plus" size={30} />
</TouchableOpacity>
);
}
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…