futurice / futurice/pepperoni-app-kit
Replace TabBar with DrawerLayoutAndroid
- 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