Question 174107 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – I keep getting an uncaught error – undefined is not a function when trying to create a settings screen

I have everything wrapped in a navigation container. The first 5 screens are set up as a bottom tab navigator. I want the settings screen as a separate screen where I click on a settings button in the profile screen.

const Stack = createStackNavigator();


const RootNavigation = () => {
    return(
        <NavigationContainer>
            <Stack.Navigator screenOptions={{headerShown: false}}>
                <Stack.Screen name="Loop" component={BottomTabNavigator} />
                <Stack.Screen name="Profile" component={BottomTabNavigator} /> //Profile screen is the rendering the "Score" component 
                <Stack.Screen name="Compete" component={BottomTabNavigator} />
                <Stack.Screen name="Diss" component={BottomTabNavigator} />
                <Stack.Screen name="Feedback" component={BottomTabNavigator} />
                <Stack.Screen name="Settings" component={SettingsNavigator} />
            </Stack.Navigator>
        </NavigationContainer>

    );
};

export default RootNavigation;

I have created a separate file called "SettingsNavigator.js"

const SettingsNavigator = () => {
    return (
      <Stack.Navigator>
        <Stack.Screen name={"Settings"} component={Settings} />
      </Stack.Navigator>
      
    );
  };
export default SettingsNavigator;

Then in my screens folder I have a Settings screen rendering the SettingsPage

const Settings = () => {
    return (
        <View> 
            <SettingsPage />
        </View>
    
    );
};

export default Settings;

My components folder has the SettingsPage as follows

const SettingsPage = () => {
    return (
        <View>
            <Text>Hello this is the settings page</Text>
        </View>
    );
 };
export default SettingsPage;

Lastly, My profile screen has an icon touchableopacity button that I want to be able to press and render the The SettingsPage to read the text: Hello this is the settings page. BUT this is when I click the settings button I get an error reading:

TypeError: Cannot read property ‘navigate’ of undefined, js engine: hermes

const Score = () => {
return (

    <View style={{
                height: Dimensions.get('window').height, 
                width: Dimensions.get('window').width, 
                backgroundColor: '#1c1c1c'
                }}>
    
        <TouchableOpacity style={styles.settings}>
            <Ionicons 
            name={'settings-outline'} 
            size={30} 
            color='white'
            onPress={() => Navigation.navigate('SettingsPage') }
            />
        </TouchableOpacity>
</View>

    
    );
};

export default Score;

enter image description here

Tags:

2

Answers


  1. 0

    if you’re using the normal navigation hook from react native, I can see that you didn’t import the hook and initialize it.

    I think you need to import it from node_modules:

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

    and inside your component initialize the navigation object using the hook:

    const navigation = useNavigation();

    then you should be good.

    note that I use navigation with a lowercase n here

    Login or Signup to reply.
  2. 0

    You are missing the major couple of lines in your Score Screen No issues follow this ,

    import { View, TouchableOpacity, Dimensions } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { useNavigation } from '@react-navigation/native';  //Add this Import

const Score = () => {
  const navigation = useNavigation();  //Add this Line

  return (
    <View style={{
      height: Dimensions.get('window').height,
      width: Dimensions.get('window').width,
      backgroundColor: '#1c1c1c'
    }}>
      <TouchableOpacity style={styles.settings}
        onPress={() => navigation.navigate('Settings')}> // Change 'Navigation' to 'navigation'
        <Ionicons
          name={'settings-outline'}
          size={30}
          color='white'
        />
      </TouchableOpacity>
    </View>
  );
};

export default Score;

    I have assumed all other imports from the code you have provided .After these changes , your code will work fine.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search