I am unable to get my react native naviagtion screen working. I am trying to access two screens, one CancerHomepageWeb and the other ChemoHomepageWeb. I would like to put the screen name is the routing URL to access each screen. Here is my code:
index.js
import {NavigationContainer} from '@react-navigation/native';
import { useNavigation } from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import { useIsFocused } from "@react-navigation/native";
import { CancerHomepageWeb } from './CancerHomepageWeb.js';
import { ChemoHomepageWeb } from './ChemoHomepageWeb.js';
import { MainSideBarWeb } from './MainSideBarWeb.js';
import React from 'react';
import {Text, View} from 'react-native';
import { registerRootComponent } from 'expo';
const Stack = createNativeStackNavigator();
const App = () => {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="CancerHomepageWeb">
<Stack.Screen
name="CancerHomepageWeb"
component={CancerHomepageWeb}
/>
<Stack.Screen
name="ChemoHomepageWeb"
component={ChemoHomepageWeb}
/>
</Stack.Navigator>
</NavigationContainer>
);
};
export default registerRootComponent(App);
CancerHomepageWeb.js
import { StatusBar } from "expo-status-bar";
import React, { useState, Component, useEffect } from "react";
import {
StyleSheet,
Text,
View,
ScrollView,
Image,
TextInput,
Button,
Alert,
TouchableOpacity,
Modal,
Pressable
} from "react-native";
import { useIsFocused } from "@react-navigation/native";
import { registerRootComponent } from 'expo';
import {NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import { useNavigation } from '@react-navigation/native';
import constants from './Constants.js';
import { styles } from './CommonStylesWeb.js';
import RNPickerSelect from 'react-native-picker-select';
import { MainSideBarWeb } from './MainSideBarWeb'
const CancerHomepageWeb = ({navigation}) => {
const [cancerWiki, setCancerWiki] = useState("");
const [cancerType, setCancerType] = useState("");
const [selectedValue, setSelectedValue] = useState(null);
const [selectedLabel, setSelectedLabel] = useState(null);
const [options, setOptions] = useState([]);
const [cancerWikiContent, setCancerWikiContent] = useState("");
//const navigation = useNavigation();
console.log("navigation ", navigation);
useEffect(() => {
const getData = async () => {
var urlCancerWiki = await constants.getServerURL() + 'cancers_wiki';
console.warn(urlCancerWiki);
let resultCancerWiki = await fetch(urlCancerWiki, {
method: "GET", mode: 'cors'
}).then(response => response.json())
.then(response => {
if (response) {
console.warn(response)
setCancerWiki(response)
}
});
};
getData();
}, []);
async function handleChangeCancer(value, index) {
console.warn("CANCER HAS CHANGED");
setSelectedValue(value);
console.warn(value)
if(index > 0) {
indexOffset = index - 1;
console.warn(options[indexOffset].label);
setSelectedLabel(options[indexOffset].label);
const url = await constants.getServerURL() + 'cancer_wiki';
console.warn(url);
let result = fetch(url, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ id: value}),
mode: 'cors'
}).then(response => response.json())
.then(response => {
if (response) {
setCancerWikiContent(response)
setCancerWiki("")
}
});
}
};
const searchCancers = async() => {
const url = await constants.getServerURL() + 'cancer_name';
console.warn(url);
console.warn(cancerType);
if (cancerType.length >= 3) {
let result = fetch(url, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ cancer_type: cancerType}),
mode: 'cors'
}).then(response => response.json())
.then(response => {
setOptions([]);
optionsTemp = [];
console.warn("GETTING CANCER RESPONSE")
console.warn(response)
if (response) {
//setCancer = response.cancers
console.warn("VALID CANCER RESPONSE")
response.map( (cancer) => {
optionsTemp.push(new Object({label:cancer.name , value: cancer.id}));
});
console.warn(optionsTemp)
setOptions(optionsTemp);
} else {
console.warn("Error retrieving Cancer");
//setErrorMessage("Error Getting Cancers!");
//setErrorVisible(true);
}
});
}
}
return (
<View style={styles.sideBar}>
<StatusBar style="auto" />
<View style={styles.container}>
<TextInput
style={styles.TextInput}
placeholder="Cancers"
placeholderTextColor="#003f5c"
onChangeText={(cancerType) => setCancerType(cancerType)}
onKeyPress={searchCancers}
/>
</View>
<View style={styles.container}>
<Text>Select Cancer</Text>
<RNPickerSelect
items={options}
onValueChange={(value, index) =>
handleChangeCancer(value,index)}
value={selectedValue}
/>
{selectedValue && <Text>Selected: {selectedLabel}</Text>}
</View>
<ScrollView>
<View style={styles.inputView}>
<Text>{cancerWikiContent}</Text>
<Text>{cancerWiki}</Text>
</View>
</ScrollView>
</View>
);
}
export { CancerHomepageWeb };
ChemoHomepageWeb.js
import { StatusBar } from "expo-status-bar";
import React, { useState, Component, useEffect } from "react";
import {
StyleSheet,
Text,
View,
ScrollView,
Image,
TextInput,
Button,
Alert,
TouchableOpacity,
Modal,
Pressable
} from "react-native";
import { useIsFocused } from "@react-navigation/native";
import { registerRootComponent } from 'expo';
import {NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import { useNavigation } from '@react-navigation/native';
import constants from './Constants.js';
import { styles } from './CommonStylesWeb.js';
import RNPickerSelect from 'react-native-picker-select';
import { MainSideBarWeb } from './MainSideBarWeb'
const ChemoHomepageWeb = ({navigation}) => {
const [chemoWiki, setChemoWiki] = useState("");
const [chemoType, setChemoType] = useState("");
const [selectedValue, setSelectedValue] = useState(null);
const [selectedLabel, setSelectedLabel] = useState(null);
const [options, setOptions] = useState([]);
const [chemoWikiContent, setChemoWikiContent] = useState("");
//const navigation = useNavigation();
console.log("navigation ", navigation);
useEffect(() => {
const getData = async () => {
var urlChemoWiki = await constants.getServerURL() + 'chemos_wiki';
console.warn(urlChemoWiki);
let resultChemoWiki = await fetch(urlChemoWiki, {
method: "GET", mode: 'cors'
}).then(response => response.json())
.then(response => {
if (response) {
console.warn(response)
setChemoWiki(response)
}
});
};
getData();
}, []);
async function handleChangeChemo(value, index) {
console.warn("CHEMO HAS CHANGED");
setSelectedValue(value);
console.warn(value)
if(index > 0) {
indexOffset = index - 1;
console.warn(options[indexOffset].label);
setSelectedLabel(options[indexOffset].label);
const url = await constants.getServerURL() + 'chemo_wiki';
console.warn(url);
let result = fetch(url, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ id: value}),
mode: 'cors'
}).then(response => response.json())
.then(response => {
if (response) {
setChemoWikiContent(response)
setChemoWiki("")
}
});
}
};
const searchChemos = async() => {
const url = await constants.getServerURL() + 'chemo_name';
console.warn(url);
console.warn(chemoType);
if (chemoType.length >= 3) {
let result = fetch(url, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ chemo_type: chemoType}),
mode: 'cors'
}).then(response => response.json())
.then(response => {
setOptions([]);
optionsTemp = [];
console.warn("GETTING CHEMO RESPONSE")
console.warn(response)
if (response) {
console.warn("VALID CHEMO RESPONSE")
response.map( (chemo) => {
optionsTemp.push(new Object({label:chemo.name , value: chemo.id}));
});
console.warn(optionsTemp)
setOptions(optionsTemp);
} else {
console.warn("Error retrieving Chemo drug");
//setErrorMessage("Error Getting Chemo drugss!");
//setErrorVisible(true);
}
});
}
}
return (
<View style={styles.container}>
<StatusBar style="auto" />
<View style={styles.inputView}>
<TextInput
style={styles.TextInput}
placeholder="CHemo"
placeholderTextColor="#003f5c"
onChangeText={(chemoType) => setChemoType(chemoType)}
onKeyPress={searchChemos}
/>
</View>
<View style={styles.inputView}>
<Text>Select Chemo Drug</Text>
<RNPickerSelect
items={options}
onValueChange={(value, index) =>
handleChangeChemo(value,index)}
value={selectedValue}
/>
{selectedValue && <Text>Selected: {selectedLabel}</Text>}
</View>
<ScrollView>
<View style={styles.inputView}>
<Text>{chemoWikiContent}</Text>
<Text>{chemoWiki}</Text>
</View>
</ScrollView>
</View>
);
}
export { ChemoHomepageWeb };
Here is my package.json
{
"name": "cancerhacked",
"main": "expo-router/entry",
"version": "1.0.0",
"scripts": {
"start": "expo start",
"reset-project": "node ./scripts/reset-project.js",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"test": "jest --watchAll",
"lint": "expo lint"
},
"jest": {
"preset": "jest-expo"
},
"dependencies": {
"@expo/vector-icons": "^14.0.2",
"@react-native-picker/picker": "^2.9.0",
"@react-navigation/native": "^6.0.2",
"expo": "~51.0.28",
"expo-constants": "~16.0.2",
"expo-font": "~12.0.9",
"expo-linking": "~6.3.1",
"expo-router": "~3.5.23",
"expo-splash-screen": "~0.27.5",
"expo-status-bar": "~1.12.1",
"expo-system-ui": "~3.0.7",
"expo-web-browser": "~13.0.3",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-native": "0.74.5",
"react-native-gesture-handler": "~2.16.1",
"react-native-network-info": "^5.2.1",
"react-native-picker-select": "^9.3.1",
"react-native-public-ip": "^1.0.2",
"react-native-reanimated": "~3.10.1",
"react-native-safe-area-context": "4.10.5",
"react-native-screens": "3.31.1",
"react-native-web": "~0.19.10"
},
"devDependencies": {
"@babel/core": "^7.20.0",
"@types/jest": "^29.5.12",
"@types/react": "~18.2.45",
"@types/react-test-renderer": "^18.0.7",
"jest": "^29.2.1",
"jest-expo": "~51.0.3",
"react-test-renderer": "18.2.0",
"typescript": "~5.3.3"
},
"private": true
}
Whatever route I put in my localhost I always get the Cancer App. If I put a navigation call to the Chemo screen navigation.navigate("ChemoHomepageWeb") it still goes to the Cancer page not the Chemo. Any help is welcome.
