futurice / futurice/pepperoni-app-kit

Replace TabBar with DrawerLayoutAndroid

Open
#59 1 comment 0 reactions 0 assignees View on GitHub
question
Dominant language
JavaScript
Stars
4.6k
Forks
631
PR merge metrics
No merged PRs in 30d

Description

Hello! Thank you for this amazing starter kit!

I spent almost all day trying to replace TabBar with DrawerLayoutAndroid. I can't get it works properly. I created this function in NavigationView rendering:

``` javascript
_renderAndroidDrawer() {
const {children, index} = this.props.navigationState;

const navigationView = (

{
this.props.switchTab(tabIndex);
this.refs['DRAWER_REF'].closeDrawer();
}}
items={children}
/>

);

return (
navigationView}>


);
}
```

In SideMenu component I'm calling this `switchTab` function

``` javascript
{
this.props.items.map((item, index) => {
return (

)
})
}
```

And now the behaviour is weird. When I switch tabs in the Drawer only navigator headers are changing. Page content is still the same. _But_ only the visible view are the same (buttons from the new page work). It will be better it I'll try to explain it with an example.
- I'm at the `Home` page from the example. I see counter with three buttons (Reset, Random, Bored)
- Clicking at the `Profile` button in the drawer menu.
- Navigation header changed to 'Profile' but I still see counter and three buttons. But this buttons doesn't work. If I'll tap on the center of the screen I'll see `View #1` from the profile (with navigator transition). Seems like I was on the `Profile` page, but I saw the content of the `Home` page.
- I can click back in navigator header and I'll see Profile `page #0`.
- I can switch to the `Home` page using drawer.
- goto step 1.

I'm sorry if the description is not clear. But can you help me a bit? Am I doing something wrong with the application Architecture? Do I need to implement this Drawer in different place?

Thanks!

Contributor guide

No contributing guide indexed for this repository

Research direction

Start by reproducing the drawer switch from the NavigationView rendering code, using SideMenu, AppRouter, and NavigationTabView as the entry points. Trace how switchTab, navigationState, and onNavigate update the displayed page, then verify that switching between Home and Profile renders the selected content rather than only changing headers.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react-native
Domain
mobile-dev
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
20/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.