react-navigation / react-navigation/react-navigation

Status Bar is hidden when swipe from right to left with drawerType slide

Open
#9,493 3 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug package:drawer
Dominant language
TypeScript
Stars
24.5k
Forks
5.1k
Avg merge
1d 5h
Merged PRs (30d)
18

Description

Current Behavior

https://user-images.githubusercontent.com/3875788/114325291-96297680-9b2f-11eb-8f21-f29ffa20fa72.mov

Expected Behavior

Don't hidden status bar when swipe from right to left
Only hidden status bar when swipe from left to right

Source code

<Drawer.Navigator
            screenOptions={() => ({
                headerLeft: () => {
                    return <></>;
                },
            })}
            drawerStyle={{
                backgroundColor: theme.colors.backgroundHeader,
                width: 90,
            }}
            edgeWidth={Dimensions.get('window').width}
            drawerType="slide"
            hideStatusBar
            drawerContent={(props) => (...)}
        >
            <Drawer.Screen
                name={ROUTES.HOME}
                options={({ route }) => {
                    const routeName = getFocusedRouteNameFromRoute(route);
                    return getOptionsHeader(t, theme, routeName || ROUTES.HOME);
                }}
                component={BottomTabNavigator}
            />
        </Drawer.Navigator>

Your Environment
"@react-navigation/bottom-tabs": "^5.11.8",
"@react-navigation/drawer": "^5.12.5",
"@react-navigation/material-top-tabs": "^5.3.15",
"@react-navigation/native": "^5.9.3",
"@react-navigation/stack": "^5.14.3",
"react-native": "0.64.0",
"react-native-gesture-handler": "^1.10.3",
"react-native-reanimated": "^2.0.1",
"react-native-safe-area-context": "^3.2.0",
"react-native-safe-area-view": "^1.1.1",
"react-native-screens": "^2.18.1",

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing the issue with the supplied Drawer.Navigator configuration, especially drawerType="slide" and hideStatusBar, using the listed React Native and navigation versions. Compare right-to-left and left-to-right swipes; done means the status bar remains visible for the former and is hidden only for the latter.

Written by the indexing model from the issue text.

Assessment

Tech stack
react-native, typescript
Domain
mobile
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.