Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Transition from headerless screen to screen with header jerks content on first screen down #2732

Closed
mschipperheyn opened this issue Oct 11, 2017 · 19 comments

Comments

@mschipperheyn
Copy link

@mschipperheyn mschipperheyn commented Oct 11, 2017

Current Behavior

I have two screens, one is without a header and one is with a header. The content on screen one is centered vertically.

When I navigate from screen 1 to screen 2, during the transition, the content from screen 1 jumps down to the position it would have had if the screen did have a header.

Expected Behavior

The content on screen 1 should stay in place.

Your Environment

| react-navigation | 1.0.0-beta.13
| react-native | 0.49.3
| node | 8.5.0
| npm or yarn | yarn

code

const ScreenStack = StackNavigator(
    { ...routez.drawerRoutez, ...routez.loginRoutez },
    {
        initialRouteName: 'Loading',
        headerMode: 'float',
    },
);

const PrimaryNav = DrawerNavigator(
    {
        DrawerStack: {
            screen: ScreenStack,
        },
    },
    {
        headerMode: Platform.OS === 'ios' ? 'float' : 'screen',
        navigationOptions: ({ navigation }) => ({
            headerStyle: { backgroundColor: 'green' },
            gesturesEnabled: false,
            headerLeft: (
                <IconButton
                    icon="menu-1"
                    onPress={() => {
                        if (navigation.state.index === 0) {
                            navigation.navigate('DrawerOpen');
                        } else {
                            navigation.navigate('DrawerClose');
                        }
                    }}
                />
            ),
        }),
    },
);

export default PrimaryNav;
class LoginScreen extends React.Component {
}

LoginScreen.navigationOptions = {
    header: null,
    drawerLockMode: 'locked-closed',
};

class RegisterScreen extends React.Component {
}

const Title = () => <FormattedMessage id="ui.registration" />;

RegisterScreen.navigationOptions = ({ navigation: { state: { params = {} } } }) => ({
    drawerLockMode: 'locked-closed',
    title: <Title />,
    headerRight: (
        <HeaderSaveButton
            formName={FORM}
            dispatch={params.dispatch}
            submitting={params.submitting}
            title={params.title}
        />
    ),
});

@helios1138

This comment has been minimized.

Copy link

@helios1138 helios1138 commented Oct 12, 2017

you can give header a height and set the same value as negative margin on root view

@mschipperheyn

This comment has been minimized.

Copy link
Author

@mschipperheyn mschipperheyn commented Oct 12, 2017

Yeah, that would be a workaround. But it does seem to me like a bug.

@kelset kelset added the bug label Oct 21, 2017
@kelset

This comment has been minimized.

Copy link
Contributor

@kelset kelset commented Oct 21, 2017

Thanks for reporting. Is it related in any way to #2520?

@heyjared

This comment has been minimized.

Copy link

@heyjared heyjared commented Oct 26, 2017

Also facing this issue. While transitioning from ScreenWithoutHeader to ScreenWithHeader, it will push push content down on ScreenWithoutHeader to make space for the header, reducing the available height on the screen. If using flex, this will cause the content on the screen to suddenly compress and look weird.

@fengshanjian

This comment has been minimized.

Copy link

@fengshanjian fengshanjian commented Oct 28, 2017

Is there any one to fix this bug? It's so irritable

@fengshanjian

This comment has been minimized.

@richeterre

This comment has been minimized.

Copy link

@richeterre richeterre commented Nov 3, 2017

I also experience this bug and so far worked around it by setting the "headerless" screen's header color to 'transparent' and giving its view a negative top margin of 64 points.

However, this doesn't really work with the iPhone X, which has its own status and navigation bar heights. @davepack & @kelset, is there a way to retrieve the appropriate margin from react-navigation, or some other workaround for this?

@lancelotlan

This comment has been minimized.

Copy link

@lancelotlan lancelotlan commented Nov 30, 2017

Use the component "Modal" to cover the header of "headerless screen" with animationType={"none"}.It's not a good way but seems not bad for me.

@cbjs

This comment has been minimized.

Copy link

@cbjs cbjs commented Jan 25, 2018

+1

@longdw

This comment has been minimized.

Copy link

@longdw longdw commented Feb 1, 2018

@richeterre when I set header color to 'transparent', it turned to black.

navigationOptions: {
     headerStyle: { backgroundColor: 'transparent' }
}
@richeterre

This comment has been minimized.

Copy link

@richeterre richeterre commented Feb 1, 2018

@longdw: It's not the header that turned black, but rather you're seeing through it onto whatever is behind (usually your root view). You missed the second part of my hack, which is to apply a negative top margin to the content of the page with the "hidden" header. For instance, if that page has a background image, give the image a marginTop of -64 (or -88 for iPhone X) and it will cover the area that is currently black for you. By the way, this whole issue seems to be iOS-only.

As you can see from the magical numbers, this isn't really a clean solution, but the best I could find. Let's hope this will be addressed in an upcoming release to match the native iOS behavior.

@longdw

This comment has been minimized.

Copy link

@longdw longdw commented Feb 2, 2018

@richeterre nice, it seems that this method can only be used to solve, thank you very much, but also hope that the RN team to solve this problem as soon as possible.

@mxcihak

This comment has been minimized.

Copy link

@mxcihak mxcihak commented Feb 5, 2018

Transparent header doesn't work for me, as I can't touch anything "under" the header...

@brentvatne

This comment has been minimized.

Copy link
Member

@brentvatne brentvatne commented Feb 7, 2018

cc @skevy did you have a good fix for this?

@brentvatne

This comment has been minimized.

@cbjs

This comment has been minimized.

Copy link

@cbjs cbjs commented Feb 17, 2018

@richeterre this solution seems not work for TabNavigator screens.

@bighitbiker3

This comment has been minimized.

Copy link

@bighitbiker3 bighitbiker3 commented Mar 2, 2018

@cihakcc My solution to this was to add pointerEvents='none' to my custom header. Not sure if you can pass that to the built in header, but worth a shot

skevy added a commit that referenced this issue Mar 23, 2018
This addresses #2732 (which also happens to be the top issue on canny.io).

Transitioning between screens with and without headers when `headerMode` is set to "screen" works just fine, but the current experience when `headerMode` is set to "float" is very broken. The goal of this PR is to replicate the behavior of UIKit on iOS: when a screen without a header is pushed, the header on the previous screen is pushed off the screen to the left, and the individual components of the header do not animate. When a screen with a header is pushed _after_ a screen without one, we slide the new header on the screen from right to left, in sync with the push animation, again while avoiding animating the individual header components.

I also updated the UIKit transition example in Navigation Playground to demonstrate this.

Test Plan:

Try the UIKit transition example in Navigation Playground.
skevy added a commit that referenced this issue Mar 23, 2018
This addresses #2732 (which also happens to be the top issue on canny.io).

Transitioning between screens with and without headers when `headerMode` is set to "screen" works just fine, but the current experience when `headerMode` is set to "float" is very broken. The goal of this PR is to replicate the behavior of UIKit on iOS: when a screen without a header is pushed, the header on the previous screen is pushed off the screen to the left, and the individual components of the header do not animate. When a screen with a header is pushed _after_ a screen without one, we slide the new header on the screen from right to left, in sync with the push animation, again while avoiding animating the individual header components.

I also updated the UIKit transition example in Navigation Playground to demonstrate this.

Test Plan:

Try the UIKit transition example in Navigation Playground.
skevy added a commit that referenced this issue Mar 23, 2018
This addresses #2732 (which also happens to be the top issue on canny.io).

Transitioning between screens with and without headers when `headerMode` is set to "screen" works just fine, but the current experience when `headerMode` is set to "float" is very broken. The goal of this PR is to replicate the behavior of UIKit on iOS: when a screen without a header is pushed, the header on the previous screen is pushed off the screen to the left, and the individual components of the header do not animate. When a screen with a header is pushed _after_ a screen without one, we slide the new header on the screen from right to left, in sync with the push animation, again while avoiding animating the individual header components.

I also updated the UIKit transition example in Navigation Playground to demonstrate this.

Test Plan:

Try the UIKit transition example in Navigation Playground.
skevy added a commit that referenced this issue Mar 23, 2018
This addresses #2732 (which also happens to be the top issue on canny.io).

Transitioning between screens with and without headers when `headerMode` is set to "screen" works just fine, but the current experience when `headerMode` is set to "float" is very broken. The goal of this PR is to replicate the behavior of UIKit on iOS: when a screen without a header is pushed, the header on the previous screen is pushed off the screen to the left, and the individual components of the header do not animate. When a screen with a header is pushed _after_ a screen without one, we slide the new header on the screen from right to left, in sync with the push animation, again while avoiding animating the individual header components.

I also updated the UIKit transition example in Navigation Playground to demonstrate this.

Test Plan:

Try the UIKit transition example in Navigation Playground.
ericvicenti added a commit that referenced this issue Mar 25, 2018
* Smoothly transition header visibility in Stack

This addresses #2732 (which also happens to be the top issue on canny.io).

Transitioning between screens with and without headers when `headerMode` is set to "screen" works just fine, but the current experience when `headerMode` is set to "float" is very broken. The goal of this PR is to replicate the behavior of UIKit on iOS: when a screen without a header is pushed, the header on the previous screen is pushed off the screen to the left, and the individual components of the header do not animate. When a screen with a header is pushed _after_ a screen without one, we slide the new header on the screen from right to left, in sync with the push animation, again while avoiding animating the individual header components.

I also updated the UIKit transition example in Navigation Playground to demonstrate this.

Test Plan:

Try the UIKit transition example in Navigation Playground.

* Update Header.js
brentvatne added a commit that referenced this issue Mar 25, 2018
This closes #2732 (which also happens to be the top issue on canny.io).
@rickvdl

This comment has been minimized.

Copy link

@rickvdl rickvdl commented Sep 27, 2018

Unfortunately still happening for, with a bottomTabNavigator containing two tabs, each having it's own stackNavigator. Using version 2.16.0.

@brentvatne

This comment has been minimized.

Copy link
Member

@brentvatne brentvatne commented Sep 27, 2018

@rickvdl - please post new issue and fill out issue template

@react-navigation react-navigation locked and limited conversation to collaborators Sep 27, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
You can’t perform that action at this time.