react-navigation / react-navigation/react-navigation
Drawer Navigation drawerItem onPress always give that gray background even with drawerActiveTintColor
Open
Nobody has claimed this yet.
bug
platform:android
repro provided
- Dominant language
- TypeScript
- Stars
- 24.5k
- Forks
- 5.1k
- Avg merge
- 1d 5h
- Merged PRs (30d)
- 18
Description
Current behavior
screenOptions={{
headerShown: false,
drawerLabelStyle: styles.drawerLStyle,
drawerActiveBackgroundColor: 'rgba(120,94,168, .08)',
drawerActiveTintColor: Colors.primary,
swipeEdgeWidth: Dimensions.get('window').width / 2,
drawerType: 'slide',
drawerItemStyle: {
borderRadius: 0,
width: '100%',
marginLeft: 0,
paddingLeft: wp('2%'),
},
}}>
Expected behavior
will shouldn't background color be Color.primary instead of gray ?
Reproduction
https://github.com/ejjraifihamza/SobrusWorkspace
Platform
- Android
- iOS
- Web
- Windows
- MacOS
Packages
- @react-navigation/bottom-tabs
- @react-navigation/drawer
- @react-navigation/material-bottom-tabs
- @react-navigation/material-top-tabs
- @react-navigation/stack
- @react-navigation/native-stack
Environment
| package | version |
|---|---|
| @react-navigation/native | |
| @react-navigation/bottom-tabs | |
| @react-navigation/drawer | |
| @react-navigation/material-bottom-tabs | |
| @react-navigation/material-top-tabs | |
| @react-navigation/stack | |
| @react-navigation/native-stack | |
| react-native-safe-area-context | |
| react-native-gesture-handler | |
| react-native-reanimated | |
| react-native |
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked SobrusWorkspace reproduction and the @react-navigation/drawer screenOptions shown in the report, focusing on Android behavior around drawerItem onPress, drawerActiveTintColor, and drawerActiveBackgroundColor. Compare the rendered active and inactive states with the expected colors; done means reproducing the issue and identifying whether the behavior is incorrect or expected.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react-native
- Domain
- mobile
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100