React Router Native Renders Linked Component Over Previous One

When i link to a component this renders but over the existing component. It doesn't 'navigate', the view is not being replaced with the linked one. App.js: import React, { Componen

Solution 1:

If you only want to render the content of AuthExample on a certain route, you could break that out into a separate component and render that on the index route / and also use a Switch component to make sure that only one of the Route components in the Switch are used at once.

Example

const Main = () => (
  <View>
    <View style={styles.welcomeMsg}>
      <Text style={styles.welcomeMsg_textTop}>¡Bienvenido a nuestra</Text>
      <Text style={styles.welcomeMsg_textBottom}>familia mascotera!</Text>
      <View style={styles.container_input_dni}>
        <TextInput
          placeholder="DNI:"
          placeholderTextColor="#E3A141"
          underlineColorAndroid="#E3A141"
          style={styles.input_dni}
        />
      </View>
      <Link
        to="/protected"
        style={styles.navItem_login}
        underlayColor="#f0f4f7"
      >
        <Text style={styles.navItem_login_text}>Protected Page</Text>
      </Link>
    </View>
    <AuthButton />
    <View style={styles.nav}>
      <Link to="/public" style={styles.navItem} underlayColor="#f0f4f7">
        <Text>Public Page</Text>
      </Link>
      <Link to="/protected" style={styles.navItem} underlayColor="#f0f4f7">
        <Text>Protected Page</Text>
      </Link>
      <Link
        to="/TelUtiles"
        style={styles.navItem_login}
        underlayColor="#f0f4f7"
      >
        <Image
          source={require("./img/icono-tel.png")}
          style={{ width: 70, height: 70, margin: 10 }}
        />
      </Link>
    </View>
  </View>
);

const AuthExample = () => (
  <NativeRouter>
    <View style={styles.container}>
      <View style={styles.container_logo}>
        <Image
          source={require("./img/logo-main.png")}
          style={styles.logo_img}
        />
      </View>

      <Switch>
        <Route exact path="/" component={Main} />
        <Route path="/public" component={Public} />
        <Route path="/login" component={Login} />
        <Route path="/TelUtiles" component={TelUtiles} />
        <PrivateRoute path="/protected" component={Protected} />
      </Switch>
    </View>
  </NativeRouter>
);