Expo Router "Link": Cannot read property 'isReady' of undefined

Issue

I'm trying to use the expo router to build my navigation menu, and placed this code on the drawer example:

    const navigationView = () => (
      <View style={[styles.container, styles.navigationContainer]}>
        <Text style={styles.paragraph}>I'm in the Drawer!</Text>
        <Button
          title="Close drawer"
          onPress={() => drawer.current.closeDrawer()}
        />
        <Link href="/screens/HomeScreen" style={styles.navigationLink}>Home</Link>
      </View>
    );

However, after building the app, and trying to click the link, I'm receiving this error:

TypeError: Cannot read property 'isReady' of undefined

I'm not running in TypeScript, rather just using pure javascript. What could possibly be going wrong with this?

Solution

In my case, I found out there were still a couple of configurations missing in babel.config.js, app.json and then the folder structure I had to follow in the app folder.

I made an example available here.

I have built the example based on this video.

I hope it helps whoever needs to work with that.

Answered By - rdrgtec