navigation.navigate does not recognize my screen

Viewed 29

What the terminal says when I try to bring a video into the application I'm making is that Do you have a screen named "savePost" This is where I am trying to navigate

return (
<NavigationContainer>
    <Stack.Navigator>
        {currentUserObj.currentUser == null ? 
            <Stack.Screen name = "auth" component = {AuthScreen} options = {{headerShown: false}}/>
            :
            <>
              <Stack.Screen name="home" component = {HomeScreen} options = {{headerShown: false}}/>
              <Stack.Screen name="savePost" component = {SavePostScreen} options = {{headerShown: false}}/>
            </>            
        }
    </Stack.Navigator>       
</NavigationContainer>

) }

This is the part where I use navigation.navigate, i tried navigation.push and to navigate without the useNavigation() both did not work.

const pickFromGallery = async()=>{
    let result = await ImagePicker.launchImageLibraryAsync({
        mediaTypes: ImagePicker.MediaTypeOptions.Videos,
        allowsEditing: true,
        aspect: [16,9],
        quality: 1
    })
    if(!result.cancelled){
        let sourceThumb = await generateThumbnail(result.uri)
        navigation.navigate("savePost", {source: result.uri, sourceThumb})
    }

}

I can put the SavePostScreen code here as well, but I doubt it will do anything, I am just putting the package.json file here.

  "name": "academical",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "expo start --dev-client",
    "android": "expo run:android",
    "ios": "expo run:ios"
  },
  "dependencies": {
    "@react-native-community/masked-view": "^0.1.11",
    "@react-navigation/material-bottom-tabs": "^6.2.3",
    "@react-navigation/native": "^6.0.12",
    "@react-navigation/stack": "^6.2.3",
    "expo": "^46.0.9",
    "expo-av": "~12.0.4",
    "expo-camera": "~12.3.0",
    "expo-constants": "~13.2.3",
    "expo-image-picker": "~13.3.1",
    "expo-media-library": "~14.2.0",
    "expo-splash-screen": "~0.16.2",
    "expo-status-bar": "~1.4.0",
    "expo-video-thumbnails": "~6.4.0",
    "firebase": "^8.10.1",
    "react": "18.0.0",
    "react-dom": "18.0.0",
    "react-native": "0.69.5",
    "react-native-gesture-handler": "^2.6.0",
    "react-native-linear-gradient": "^2.6.2",
    "react-native-paper": "^4.12.4",
    "react-native-reanimated": "^2.10.0",
    "react-native-safe-area-context": "^4.3.1",
    "react-native-screens": "~3.15.0",
    "react-native-vector-icons": "^9.2.0",
    "react-native-web": "~0.18.7",
    "react-navigation": "^4.4.4",
    "react-redux": "^8.0.2",
    "redux": "^4.2.0",
    "redux-thunk": "^2.4.1"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9"
  }
}```
1 Answers

savePost screen will only be accessible if the currentUserObj.currentUser is not null. If it is null, you're basically replacing all the available screens with main screen, and when you'll try to navigate to this screen, react-navigation won't be able to find it. You can basically confirm this by logging the currentUserObj.currentUser variable itself.

Related