How to create a Custom Drawer Navigator

Hey thunkers,
So how can you make a custom Drawer Navigator with icons and lists and swipes? Here’s an example of my latest task reminder which intergrates a custom Drawer Navigator into the Home Screen.

Drawer Navigator Example

Drawer Navigator Lists based navigation are the best and easiest for users to know where and what are the items or contents. Switches are usually added to toggle a single particular item between on and off.

Also, you can add an extend list option by yourself with an arrow-extending button, example:

Extend results combining blocks

image

Lists are made out of rows with top and/or bottom borders. Also the swipe function from the homescreen side is made out of the block:

Touch Up: It can do a certain action on swiping

In the following video, I will demonstrate how to open it by swiping the left edge of the screen:

That’s all, enjoy!

UPDATE

New Version of Custom Drawer Navigator!

  • Opacity of items in background has changed, so you can see an overlap effect! (changed in UX)
  • Rounded corners list, Modern look and feel (changed in UI)
    Link to copy project:
    Thunkable

For beginners or you haven’t read to posts above yet:

The drawer navigator is in the ‘home’ screen.

How to login:

5 Likes

Looks amazing is this in the public gallery?

2 Likes

nah its custom made by me

Impressive. Are you planning to make a tutorial or share parts of how you achieved this?

Yeah I want to ask for more opinions first

Opinions about what?

The custom drawer nav. ofc. Wanna improve it

Nah its looks great as is, please share if possible would love to use something like this!

2 Likes

Sure I can share the link to the project:
Thunkable (link has been updated)
Try to understand, the app’s really complicated. By the way, the drawer navigator is in the ‘home’ screen.

1 Like

maybe try adding some animations

1 Like

It’s hard dude, but thanks for the suggestion

Is it good?

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

0 voters

Looks good so far, although I dont seem to be able to get pass the create account screen and previewing just the home page just flashes up then gives a white screen both in web and live preview. Guess I’m missing something?

Your version is prob the older one, cuz i just updated last night. Try again in the link below?
Thunkable (The link has been updated)

Working fine in Home Screen???

u need to verify your email in you mailbox, should sent a no rely email and just simply click on the link in the email.
after verifying, go back to the app and sign in using your email and password u just typed in the sign up section, press Sign In and it should bring you to the loading screen. skip the tutorial and u will arrive the home screen

1 Like

Thanks its working now!
Looks great!

1 Like

UPDATE

New Version of Custom Drawer Navigator!

  • Opacity of items in background has changed, so you can see an overlap effect! (changed in UX)
  • Rounded corners list, Modern look and feel (changed in UI)
    Link to copy project:
    Thunkable

For beginners or you haven’t read to posts above yet:

The drawer navigator is in the ‘home’ screen.

How to login:

1 Like

image

Big Thanks to y’all for so many remixes of the app. I am really motivated to continue this project!
There will be updates frequently so check out the link to remix the latest version!
Link to remix project:
Thunkable

1 Like