Last active
April 5, 2019 18:24
-
-
Save ericjames/630725e43859466656bf2193ac30335a to your computer and use it in GitHub Desktop.
React Native attempt to reposition a View ("Card") in the scrollview if it goes out of bounds
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//Adjust the scroll if we think the card content is going out of viewable bounds | |
fitCardInView = () => { | |
this.props.setAnimatingMap(true); | |
if (!this.cardView || !this.cardView.measureInWindow) { | |
return false; | |
} | |
this.cardView.measureInWindow((x, y, width, height) => { | |
// console.log(this.layout.height, y); | |
// const expandedCardHeight = this.layout.height + maps.height; | |
// const allowances = this.props.viewport.topMargin + maps.height; | |
var newPosition = false; | |
// If card is above view, move it down | |
if (y < 0) { | |
newPosition = this.layout.y - Math.abs(y); | |
} | |
// If a card is near the bottom... | |
if (y > (this.props.viewport.height / 2)) { | |
// If the expanded card is below view, move it up | |
if (y + maps.height > this.props.viewport.height) { | |
newPosition = this.layout.y - (maps.height - 100); // 100 gives us at least the 1 row | |
} | |
} | |
// console.log("We scroll?", newPosition); | |
if (newPosition) { | |
this.props.scrollListTo(newPosition); | |
} | |
this.props.setAnimatingMap(false); | |
}); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment