reactjs - React Native 5 Adding a button to the header Element type is invalid

Question

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>
  );
}

Answer 1

Thank god for VS code, it turned out that it was indeed an import error. TouchableOpacity in this case should not be imported from "react-native" but from "react-native-gesture-handler".

import { TouchableOpacity } from "react-native-gesture-handler";