React-Native Navigation using navigation.navigate()

Question

i have a simple react native app and I need to navigate to a certain component (ViewDrafts) on button click.

i have tried this and many errors has shown

const App = ({ navigation }) => {
//some code written here.
return (
    <SafeAreaView style={styles.body}>
        <View style={styles.container}>
          <Text style={styles.title}>
            Hi there! {"\n"}Welcome to Invoice Creator
          </Text>
          <TouchableOpacity style={styles.button} onPress={toggleVisible}>
            <Text style={styles.content}>Create Invoice</Text>
          </TouchableOpacity>
          <Text></Text>
          <TouchableOpacity
            style={styles.button}
            onPress={() => navigation.navigate("ViewDrafts.js")}
          >
            <Text style={styles.content}>View Drafts</Text>
          </TouchableOpacity>
        </View>
...
    </SafeAreaView>
  );
};

As you can see here

 <TouchableOpacity
     style={styles.button}
     onPress={() => navigation.navigate("ViewDrafts.js")}
     >
    <Text style={styles.content}>View Drafts</Text>
 </TouchableOpacity>

but it is not working? any ideas please?

Answer 1

Did you read the ' react-native-navigation ' documentation?
You navigate to the screen name, not to it file path.

It should look something like this:

import * as React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import Home from './screens/Home';
import ViewDrafts from './screens/ViewDrafts';

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={Home} />
        <Stack.Screen name="ViewDrafts" component={ViewDrafts} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

And then you navigate to it like this:

 <TouchableOpacity
     style={styles.button}
     onPress={() => navigation.navigate("ViewDrafts")} // <--- CHANGED
 >
    <Text style={styles.content}>View Drafts</Text>
 </TouchableOpacity>