Whenever i am trying to run this code it is showing this **error**

    <ScrollView>
      <View style={styles.container}>
        <StatusBar style="auto" />
        <Text style={styles.title}>**First** React Native Apps Here</Text>
    
        <View>
          <Image
            source={{
              uri: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQYnqNyLNEiAyVI293IZkUW56d2mLAsV35N4w&usqp=CAU",
            }}
            style={{ width: 305, height: 159 }}
          />
          <Text style={styles.title}>First React Native Apps Here</Text>
        </View>
        <NativeRouter>
          <Link to="/login">
            <Text>Login</Text>
          </Link>
          <Link to="/home">
            {" "}
            <Text>Home</Text>
          </Link>
    
          <Routes>
            <Route path="/home" element={<Home />} />
            <Route path="/login" element={<Login />} />
          </Routes>
        </NativeRouter>
      </View>
    </ScrollView>;

Error: React.Children.only expected to receive a single React element child*

CodePudding user response：

NativeRouter should have 1 single child like

<NativeRouter>
  <View style={styles.container}>
    <Switch>
      <Route />
      <Route />
    </Switch>
  </View>
</NativeRouter>

Detail Here

CodePudding user response：

You are using several elements in NativeRouter However, NativeRouter allows only one element. So you have to wrap it around View.

You can see through examples of official documents.

you can fix

<NativeRouter>
  <View>
    <Link to="/login">
      <Text>Login</Text>
    </Link>
    <Link to="/home">
      <Text>Home</Text>
    </Link>
    
    <Routes>
      <Route path="/home" element={<Home />} />
      <Route path="/login" element={<Login />} />
    </Routes>
  </View>
</NativeRouter>