Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor: rename drawer to tabs + drawer #147

Closed
wants to merge 4 commits into from
Closed

refactor: rename drawer to tabs + drawer #147

wants to merge 4 commits into from

Conversation

neerajkumarc
Copy link

@neerajkumarc neerajkumarc commented Dec 24, 2023

closes #144

Copy link

vercel bot commented Dec 24, 2023

Someone is attempting to deploy a commit to the ronin-tech Team on Vercel.

A member of the Team first needs to authorize it.

Copy link

vercel bot commented Dec 24, 2023

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
create-expo-stack-docs ✅ Ready (Inspect) Visit Preview 💬 Add feedback Dec 25, 2023 0:00am

@danstepanov
Copy link
Collaborator

You'll need to also update the rest of the app to use "Drawer + Tabs". See selectNavigationType.toLowercase() or otherwise change the NavigationType to be "drawer + tabs". Please be sure to test that the flow still works by running the client prompt and selecting drawer + tabs.

@neerajkumarc
Copy link
Author

Thanks for the heads up! I've updated all instances of "drawer" to "tabs + drawer". Let me know if there's anything else you'd like me to check.

@danstepanov
Copy link
Collaborator

danstepanov commented Dec 25, 2023

test create-expo-stack
                          _
   ___  _ __  ___   __ _ | |_  ___
  / __|| '__|/ _ \ / _` || __|/ _ \
 | (__ | |  |  __/| (_| || |_|  __/
  \___||_|   \___| \__,_| \__|\___|
   ___ __  __ _ __    ___
  / _ \\ \/ /| '_ \  / _ \
 |  __/ >  < | |_) || (_) |
  \___|/_/\_\| .__/  \___/
       _     |_|        _
  ___ | |_  __ _   ___ | | __
 / __|| __|/ _` | / __|| |/ /
 \__ \| |_| (_| || (__ |   <
 |___/ \__|\__,_| \___||_|\_\

✔ What do you want to name your project? (my-expo-app) ·
✔ Would you like to use TypeScript with this project? (Y/n) · true
Good call, now using TypeScript! 🚀
✔ What would you like to use for Navigation? · React Navigation
✔ What type of navigation would you like to use? · Tabs + Drawer
Great, we'll use React Navigation!
✔ What would you like to use for styling? · Nativewind
You'll be styling with ease using Tailwind.
✔ What would you like to use for authentication? · None
No problem, skipping authentication for now.
✔ Which package manager would you like to use? · yarn

Your project configuration:
{
  projectName: 'my-expo-app',
  packages: [
    {
      name: 'react-navigation',
      type: 'navigation',
      options: { type: 'tabs + drawer' }
    },
    { name: 'nativewind', type: 'styling' }
  ],
  flags: {
    noGit: false,
    noInstall: false,
    overwrite: false,
    importAlias: true,
    packageManager: 'yarn'
  }
}

To recreate this project, run:
  npx create-expo-stack my-expo-app --react-navigation --drawer --nativewind --importAlias --yarn

Initializing your project...

Copying base assets...

Installing dependencies using yarn...
Screenshot 2023-12-25 at 2 27 34 AM
iOS Bundling complete 4296ms
iOS Bundling complete 4249ms
 ERROR  Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `App`.
    in App (created by withDevTools(App))
    in withDevTools(App)
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer
    in main(RootComponent)
 ERROR  Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `App`.
    in App (created by withDevTools(App))
    in withDevTools(App)
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer
    in main(RootComponent)
 ERROR  Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `App`.

This error is located at:
    in App (created by withDevTools(App))
    in withDevTools(App)
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer
    in main(RootComponent), js engine: hermes
 ERROR  Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `App`.

This error is located at:
    in App (created by withDevTools(App))
    in withDevTools(App)
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer
    in main(RootComponent), js engine: hermes```

@danstepanov
Copy link
Collaborator

Does running this work for you?

@neerajkumarc
Copy link
Author

neerajkumarc commented Dec 25, 2023

Whoops! Missed a few spots in my last update. 🙈 Fixed up those references to "drawer" in the other files. Should be good to go now. Let me know if there's anything else I can do.

This is what it now looks at my end:

wsltom@LAPTOP-D8K6RQOU:~$ create-expo-stack
                          _
   ___  _ __  ___   __ _ | |_  ___
  / __|| '__|/ _ \ / _` || __|/ _ \
 | (__ | |  |  __/| (_| || |_|  __/
  \___||_|   \___| \__,_| \__|\___|
   ___ __  __ _ __    ___
  / _ \\ \/ /| '_ \  / _ \
 |  __/ >  < | |_) || (_) |
  \___|/_/\_\| .__/  \___/
       _     |_|        _
  ___ | |_  __ _   ___ | | __
 / __|| __|/ _` | / __|| |/ /
 \__ \| |_| (_| || (__ |   <
 |___/ \__|\__,_| \___||_|\_\

✔ What do you want to name your project? (my-expo-app) ·
✔ Would you like to use TypeScript with this project? (Y/n) · true
Good call, now using TypeScript! 🚀
✔ What would you like to use for Navigation? · React Navigation
✔ What type of navigation would you like to use? · Tabs + Drawer
Great, we'll use React Navigation!
✔ What would you like to use for styling? · Nativewind
You'll be styling with ease using Tailwind.
✔ What would you like to use for authentication? · None
No problem, skipping authentication for now.
✔ Which package manager would you like to use? · bun

Your project configuration:
{
  projectName: 'my-expo-app',
  packages: [
    {
      name: 'react-navigation',
      type: 'navigation',
      options: { type: 'tabs + drawer' }
    },
    { name: 'nativewind', type: 'styling' }
  ],
  flags: {
    noGit: false,
    noInstall: false,
    overwrite: false,
    importAlias: true,
    packageManager: 'bun'
  }
}

To recreate this project, run:
  npx create-expo-stack my-expo-app --react-navigation --drawer --nativewind --importAlias --bun

Initializing your project...

Copying base assets...

Installing dependencies using bun...

WhatsApp Image 2023-12-25 at 5 38 39 PM

@danstepanov
Copy link
Collaborator

@neerajkumarc Apologies for the delayed response. I just realized that the way the drawer is implemented, it actually is just a drawer. We should implement a "Drawer + Tab" template for navigation, if you are interested in giving that a shot. It would be a mirror of the existing "tabs" option but with an added drawer that allows you to pull up a page that is not part of either tab. Here is a video of the current drawer implementation to show that it does not use tabs atm.

Separately, we should change the name of the screens from "Tab One" and "Tab Two" to "Screen 1" and "Screen 2" if it is using the "drawer" option.

Simulator.Screen.Recording.-.iPhone.14.Pro.-.2024-01-03.at.14.15.09.mp4

@asapMaki
Copy link
Contributor

Can I jump in on this one, I have template that I have started on personally that has drawer and tabs amongst many other things which we can add to this project too.

Screen.Recording.2024-01-10.at.19.52.20.mov

@danstepanov
Copy link
Collaborator

closing in favor of #159

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Rename "drawer" to "tabs + drawer"
3 participants