I'm attempting to add navigation to my screen using the class component syntax.

I've got 2 screens currently in a stack navigator. Inside of my 1st screen(Profile) I have a button that I want to use to trigger the other screen.

I'm getting a "The title of a prop must be a string" error. I assume the navigation prop should already be present, and it loads just fine and works when I replace the navigation statement with a test action.

Below I've included the main App.js, which has my stack declaration, followed by the profile.js which has the button in question in the render. I've also included my dependancies from my package.json. A live version can be seen here <snack.expo.dev/ERocq68UX>

import { NavigationContainer } from '@react-navigation/native';

import { createNativeStackNavigator } from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator();



export default function App() {
    return (
      <NavigationContainer>
      <Stack.Navigator initialRouteName='Profile Page'>
        <Stack.Screen name="Profile" component={ProfileScreen}/>
        <Stack.Screen name="Bathroom" component={BathroomSelectionScreen} />
      </Stack.Navigator>
    </NavigationContainer>
    );
  }

import React, { Component } from 'react';
import { Button, Text, View} from 'react-native';


class ProfileScreen extends Component {
    constructor(){
    super();
    }

    render() {
    return (
    <View >
 
    <Text>Bathroom</Text>
    <Button title="Press me" onPress = { () =>{this.props.navigation.navigate("Bathroom")}}></Button>

   
        </View>
    );
  }
}

export default ProfileScreen;

"dependencies": {
    "@react-navigation/native": "^6.0.13",
    "@react-navigation/native-stack": "^6.9.0",
    "expo-status-bar": "~1.4.0",
    "react-native-image-picker": "^4.10.0",
    "react-native-safe-area-context": "4.3.1",
    "react-native-screens": "~3.15.0",
    "react-router-dom": "^6.4.1"
  }

CodePudding user response：

Issue

The Button components in BathroomSelectionScreen are missing a title prop. The Button's "labels" are specified on a title prop, not as children.

Additionally the navigation needs to be accessed from the this.props object.

class BathroomSelectionScreen extends Component {
  constructor() {
    super();
  }

  render() {
    return (
      <View>
        <Button // <-- missing title prop
          onPress={() =>
            navigation.navigate({ // <-- navigation undeclared
              name: "Home",
              params: { BathroomSelection: "Men" },
              merge: true
            })
          }
        >
          Men's Restroom
        </Button>
        <Button // <-- missing title prop
          onPress={() =>
            navigation.navigate({ // <-- navigation undeclared
              name: "Home",
              params: { BathroomSelection: "Women" },
              merge: true
            })
          }
        >
          Women's Restroom
        </Button>
      </View>
    );
  }
}

Solution

Move the button text to the title prop and fix the navigation object access from the props object.

Example:

class BathroomSelectionScreen extends Component {
  constructor(){
    super();
  }

  render() {
    return (
      <View>
        <Button
          onPress={() => this.props.navigation.navigate({
            name: 'Home',
            params: { BathroomSelection: 'Men' },
            merge: true
          })}
          title="Men's Restroom"
        />
        <Button
          onPress={() => this.props.navigation.navigate({
            name: 'Home',
            params: { BathroomSelection: 'Women' },
            merge: true
          })}
          title="Women's Restroom"
        />
      </View>
    );
  }
}