Error adding React Native Navigation header button [Error: Text strings must be rendered within a <Text> component.]

Question

I'm building a mobile app with React Native in an expo managed project and I'm using React Navigation. I'm using a Stack navigation and Tabbar navigation. I'm having trouble adding a simple button into the Stack screen header. My goal is to add an 'add' button on the right side of the header.

I followed the React Navigation documentation on how to add this button, but it didn't work, I'm getting this error:

Error: Text strings must be rendered within a <Text> component.

I added the headerRight option into Stack.Screen options as shown int the documentation, but it doesn't work and I get mentioned error.

Does anyone know how to fix this? Did anyone encountered the same problem?

Here is a link to my git repo with the whole project. The problem is with the PlaylistScreen.js file in screens folder.

Here is the code in question:

const PlaylistsScreen = () => {
  const Stack = createNativeStackNavigator();
  return (
        <Stack.Navigator>
          <Stack.Screen
            name="PlaylistList"
            component={PlaylistList}
            options={{
              headerTitle: "Playlisty",
              headerRight: () => (
               <Button
                 onPress={() => alert('This is a button!')}
                 title="Info"
                 color="#fff"
               />
             ),
            }}
          />
        </Stack.Navigator>
  );
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

I have also tried this, which resulted in the same error:

const PlaylistsScreen = () => {
  const Stack = createNativeStackNavigator();
  return (
        <Stack.Navigator>
          <Stack.Screen
            name="PlaylistList"
            component={PlaylistList}
            options={{
              headerTitle: "Playlisty",
              headerRight: () => (
                <View>
                  <Text>{"right"}</Text>
                </View>
              ),
            }}
          />
        </Stack.Navigator>
  );
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Here is my navigation structure:

<NavigationContainer>
   <Tab.Navigator>
      <Tab.Screen/>
   </Tab.Navigator>
</NavigationContainer>

The Tab.Screen contains a component with the Stack.Navigator like this:

<Stack.Navigator>
  <Stack.Screen/>
</Stack.Navigator>

And that is the Stack.Screen I'm trying to add the header button to.

Here is the full error:

Error: Text strings must be rendered within a <Text> component.

This error is located at:
    in div (created by Text)
    in Text (created by HeaderConfig)
    in div (created by View)
    in View (created by HeaderConfig)
    in RNSScreenStackHeaderSubview (created by ScreenStackHeaderRightView)
    in ScreenStackHeaderRightView (created by HeaderConfig)
    in RNSScreenStackHeaderConfig (created by HeaderConfig)
    in HeaderConfig (created by SceneView)
    in RNSScreen (created by AnimatedComponent)
    in AnimatedComponent
    in AnimatedComponentWrapper (created by Screen)
    in MaybeFreeze (created by Screen)
    in Screen (created by SceneView)
    in SceneView (created by NativeStackViewInner)
    in RNSScreenStack (created by ScreenStack)
    in ScreenStack (created by NativeStackViewInner)
    in NativeStackViewInner (created by NativeStackView)
    in RCTView (created by View)
    in View (created by SafeAreaInsetsContext)
    in SafeAreaProviderCompat (created by NativeStackView)
    in NativeStackView (created by NativeStackNavigator)
    in Unknown (created by NativeStackNavigator)
    in NativeStackNavigator (created by PlaylistsScreen)
    in PlaylistsScreen (created by SceneView)
    in StaticContainer
    in EnsureSingleNavigator (created by SceneView)
    in SceneView (created by BottomTabView)
    in RCTView (created by View)
    in View (created by Screen)
    in RCTView (created by View)
    in View (created by Background)
    in Background (created by Screen)
    in Screen (created by BottomTabView)
    in RNSScreen (created by AnimatedComponent)
    in AnimatedComponent
    in AnimatedComponentWrapper (created by Screen)
    in MaybeFreeze (created by Screen)
    in Screen (created by MaybeScreen)
    in MaybeScreen (created by BottomTabView)
    in RNSScreenNavigationContainer (created by ScreenContainer)
    in ScreenContainer (created by MaybeScreenContainer)
    in MaybeScreenContainer (created by BottomTabView)
    in RNCSafeAreaProvider (created by SafeAreaProvider)
    in SafeAreaProvider (created by SafeAreaInsetsContext)
    in SafeAreaProviderCompat (created by BottomTabView)
    in BottomTabView (created by BottomTabNavigator)
    in Unknown (created by BottomTabNavigator)
    in BottomTabNavigator (created by Navigation)
    in EnsureSingleNavigator
    in BaseNavigationContainer
    in ThemeProvider
    in NavigationContainerInner (created by Navigation)
    in Navigation (created by App)
    in ThemeProvider (created by App)
    in App (created by ExpoRoot)
    in ExpoRoot
    in RCTView (created by View)
    in View (created by AppContainer)
    in DevAppContainer (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:104:6 in reportException
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:172:19 in handleException
at node_modules/react-native/Libraries/Core/setUpErrorHandling.js:24:6 in handleError
at node_modules/expo-error-recovery/build/ErrorRecovery.fx.js:12:21 in ErrorUtils.setGlobalHandler$argument_0

And here is a screenshot from an Android virtual device image

Answer 1

Hey you were importing the native-web components which doesn't work on mobiles change this import in your PlaylistsScreen.js from

import { Button, Text, View } from "react-native-web";

to

import { Button, Text, View } from "react-native";