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

Improved animation between card with/without headers #1308

Closed
wants to merge 14 commits into from

Conversation

@lprhodes
Copy link
Contributor

lprhodes commented Apr 29, 2017

Intended to fix #1295

@lprhodes lprhodes force-pushed the lprhodes:master branch from 1064412 to cede4cd May 1, 2017
@edo1493

This comment has been minimized.

Copy link

edo1493 commented May 13, 2017

Are there any news on this? Thanks.

@FullstackJack

This comment has been minimized.

Copy link

FullstackJack commented May 21, 2017

Please merge this. We need this fix. The header changes on the previous screen before (on push) and after (on pop) the screen transition so the previous card gets header jitter. That looks totally jarring without this fix!

lprhodes added 2 commits May 22, 2017
…igation

# Conflicts:
#	src/views/CardStack.js
#	src/views/Transitioner.js
@edo1493

This comment has been minimized.

Copy link

edo1493 commented May 22, 2017

@lprhodes

This comment has been minimized.

Copy link
Contributor Author

lprhodes commented May 22, 2017

Sorry I've just been working on merging beta 10 into the branch I'm using ready for a project launching this week.

I'll submit a cleaner pull request later this week as this is pretty messy now.

@edo1493

This comment has been minimized.

Copy link

edo1493 commented Aug 28, 2017

@lprhodes what happened to this? Thanks.

@lprhodes

This comment has been minimized.

Copy link
Contributor Author

lprhodes commented Aug 28, 2017

I was hoping to eventually get everything working as it does natively but unfortunately the last animation is proving difficult...that being the movement of the tabbar when navigating from a view with one to a view without. I also ended up setting state in a hard way which needs another look at (i.e. this.state.blah = something) but was the easiest solution at the time to work with everything else.

I've not had much time of late for open source, sorry - this fork is working with decent animations in a couple of production apps though https://github.com/lprhodes/react-navigation/

@brentvatne

This comment has been minimized.

Copy link
Member

brentvatne commented Feb 9, 2018

I believe that @skevy did some work based on this recently, hopefully he can upstream it! I'm going close this as it's out of date and it sounds like @lprhodes doesn't have time to update it. This is a desirable feature though and we would like to see an updated PR for it. Thanks for your work on this @lprhodes, sorry nobody was around to land it and review!

@brentvatne brentvatne closed this Feb 9, 2018
@brentvatne

This comment has been minimized.

Copy link
Member

brentvatne commented Feb 9, 2018

Also made a feature request so people can upvote if it's important to you: https://react-navigation.canny.io/feature-requests/p/improved-animation-between-card-withwithout-headers

@marcinkornek

This comment has been minimized.

Copy link

marcinkornek commented Feb 14, 2018

#2732 (comment) this is a good workaround for this problem - it worked for me. It also works with iPhone X but you need to use some helper (eg. react-native-iphone-x-helper) to check the height of status bar

import { Platform, StatusBar } from 'react-native'
import { ifIphoneX } from 'react-native-iphone-x-helper'

const getStatusBarHeight = () => {
  if (Platform.OS === 'ios') {
    return ifIphoneX(44, 20)
  }

  return StatusBar.currentHeight
}

negative margin will be headerHeight + statusBarHeight

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
6 participants
You can’t perform that action at this time.