Stack Navigator is sensitive to space

2
closed
Mohammad-DH
Mohammad-DH
Posted 1 month ago

Stack Navigator is sensitive to space #32410

ok this is my first time ever sending a bug report and this is not a bug but it could be an improvement for developer experience

Description

Stack Navigator name is sensitive to space so if you add an space after it its not gone work

<Stack.Screen options={{ headerShown: false }} name="Home" component={Home} /> is not like <Stack.Screen options={{ headerShown: false }} name="Home " component={Home} />

so is there any way to filter the name and remove any space and let developers only use url friendly names ?

React Native version:

"dependencies": { "@react-navigation/native": "^6.0.6", "@react-navigation/native-stack": "^6.2.4", "expo": "~42.0.1", "expo-constants": "~11.0.1", "expo-status-bar": "~1.0.4", "react": "16.13.1", "react-dom": "16.13.1", "react-native": "https://github.com/expo/react-native/archive/sdk-42.0.0.tar.gz", "react-native-gesture-handler": "^1.10.3", "react-native-safe-area-context": "3.2.0", "react-native-screens": "~3.4.0", "react-native-web": "~0.13.12", "react-navigation": "^4.4.4" },

Steps To Reproduce

Provide a detailed list of steps that reproduce the issue.

1.make a navigation system like this <Stack.Navigator> <Stack.Screen options={{ headerShown: false }} name="Home" component={Home} /> <Stack.Screen options={{ headerShown: false }} name="Login" component={Login} /> <Stack.Screen options={{ headerShown: false }} name="Detail" component={Detail} /> </Stack.Navigator>

  1. in Stack.Screen in name field add an extra space at the end like this <Stack.Screen options={{ headerShown: false }} name="Home " component={Home} />

Expected Results

navigation.navigate("Home") == undefined

Snack, code example, screenshot, or link to a repository:

function App() { return ( <Stack.Navigator> <Stack.Screen options={{ headerShown: false }} name="Home" component={Home} /> <Stack.Screen options={{ headerShown: false }} name="Login" component={Login} /> <Stack.Screen options={{ headerShown: false }} name="Detail" component={Detail} /> </Stack.Navigator> ); } export default App;

sorry if i waste your time as i said im a noob and this is my first time , forgive me have good day

samuel3105
samuel3105
Created 1 month ago

Issue should be here : react navigation ?

Mohammad-DH
Mohammad-DH
Created 1 month ago

Thanks and sorry for mistake