Program 'button' in react-native webview to navigate to URL's within the same webview

Question

Ok... I'll preface by saying i am a bit of a noob. I am building a BASIC react-native app using expo. I say basic, in that I am building the app to simply be a webview of the mobile version of our website, to keep everything in one environment (all our databases, etc.) and being able to make changes to one place, etc.

That said, I am still attempting to create Touchable Opacity buttons that will allow for navigation to specific URL's of our website within our existing webview. The problem i am running into with my current code in App.js is that i cannot find the right function to make webview render the desired "page" onPress. (See code below)... For example: If I press "Home" button, even if i have navigated to a different URL within webview by interacting with the webview, because my current "state" is still considered to be "Home" within my current process, nothing happens. However, onPress works, with the code i am using below ONLY in the event that you are not currently within that state. I am kind of stuck, and not sure how to make this happen so that when pressing "Home" or "Media" it will re-setPage, effectively re-rendering that page.

export default function App() {
const [page, setPage] = useState("home");

return (
        <StatusBar hidden={false} translucent={true} />
        <SafeAreaView style={styles.flexContainer}>
          {page === "home" && (
            <WebView
              source={{ uri: "https://restoredtemecula.church" }}
              onShouldStartLoadWithRequest={(event) => {
                if (
                  event.url.match(
                    "https://restoredtemecula.churchcenter.com/giving"
                  )
                ) {
                  Linking.openURL(event.url);
                  return false;
                }
                return true;
              }}
              allowsInlineMediaPlayback="true"
              startInLoadingState={true}
              renderLoading={() => (
                <ActivityIndicator
                  color="black"
                  size="large"
                  style={styles.loadContainer}
                />
              )}
              ref={webviewRef}
              onNavigationStateChange={(navState) => {
                setCanGoBack(navState.canGoBack);
                setCanGoForward(navState.canGoForward);
                setCurrentUrl(navState.url);
              }}
            />
          )}
          {page === "stuff" && (.... (webview with same code as above pointing to different uri)...

<TouchableOpacity
              onPress={() => {
                setPage("home");
              }}
            >
              <Image
                source={require("./assets/images/home.png")}
                style={styles.ImageIconStyle}
              />
              <Text style={styles.button}>Home</Text>
            </TouchableOpacity>
<TouchableOpacity
              onPress={() => {
                setPage("media");
              }}
            >
              <Image
                source={require("./assets/images/media.png")}
                style={styles.ImageIconStyle}
              />
              <Text style={styles.button}>Media</Text>
            </TouchableOpacity> ```

Answer 1

I figured it out. I set webview uri to be variable and didn't need more than one webview tag: As follows:

export default function App() {
const [page, setPage] = useState("");

return (
const [baseURI] = useState("https://restoredtemecula.church");

<WebView
            source={{ uri: `${baseURI}/${page}` }} 
            ... all the rest of the code for the webview screen...

Then applied the onPress function to render a new variant (whether the same string or not) "right now" via the following:

           <TouchableOpacity
              onPress={() => {
                setPage(`sermons?t=${Date.now()}`);
              }}
            >
              <Image
                source={require("./assets/images/media.png")}
                style={styles.ImageIconStyle}
              />
              <Text style={styles.button}>Media</Text>
            </TouchableOpacity>

So it 'pipes in' the baseURI, and then adds the rest the url, and loads it up based on the date-now.