file-based routing in React Native using the Expo Router package that we installed eariler. By adding files to the app folder, you can create new screens that are automatically assigned a route matching the file name.

• Creating New Pages : Each file created within the app directory serves as a page. For instance, creating about.jsx automatically creates a route at /about. The index.jsx file corresponds to the root route (/).

• Navigation with Link Component : To navigate between pages, use the <Link></Link>
• Defining Routes: The href attribute in the <Link> component uses the file path. Navigating back to the home page requires setting the href to / (not /index).

// Home.jsx
import { Link } from "expo-router";

*const Home = () => {
  return (
    <View>
      <Text>Reading List App</Text>*
      <Link href="/about">
      About Page</Link>
    </View>
  );
};

export default Home;

// about.jsx
import { Link } from "expo-router";

*const About = () => {
  return (
    <View>
      <Text>Abou Page</Text>*
      <Link href="/">
      Back to Home Page</Link>
    </View>
  );
};

export default About;

• Styling Links: You can apply custom styles to these links by using the style prop to maintain consistent visual branding across your application.

link: { marginVertical: 10, borderBottomWidth: 1, },

Before

After