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

Animated diffClamp bound back on IOS #21110

Closed
yangnana11 opened this issue Sep 14, 2018 · 2 comments
Closed

Animated diffClamp bound back on IOS #21110

yangnana11 opened this issue Sep 14, 2018 · 2 comments
Labels
API: Animated Platform: iOS iOS applications. Stale There has been a lack of activity on this issue and it may be closed soon.

Comments

@yangnana11
Copy link

Environments

React Native Environment Info:
System:
OS: macOS High Sierra 10.13.5
CPU: x64 Intel(R) Core(TM) i5-7500 CPU @ 3.40GHz
Memory: 33.80 MB / 16.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 8.9.1 - ~/emsdk-portable/node/8.9.1_64bit/bin/node
Yarn: 1.6.0 - /usr/local/bin/yarn
npm: 6.3.0 - ~/emsdk-portable/node/8.9.1_64bit/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 11.4, macOS 10.13, tvOS 11.4, watchOS 4.3
Android SDK:
Build Tools: 23.0.1, 25.0.0, 25.0.2, 25.0.3, 26.0.1, 26.0.2, 26.0.3, 27.0.3, 28.0.0
API Levels: 23, 25, 26, 27, 28
IDEs:
Android Studio: 3.1 AI-173.4819257
Xcode: 9.4.1/9F2000 - /usr/bin/xcodebuild
npmPackages:
react: 16.5.0 => 16.5.0
react-native: 0.57.0 => 0.57.0
npmGlobalPackages:
create-react-native-app: 1.0.0
react-native-cli: 2.0.1
react-native-git-upgrade: 0.2.7

Code demo

const HEADER_MAX_HEIGHT = 200;
const HEADER_MIN_HEIGHT = 60;
const HEADER_SCROLL_DISTANCE = 140;
...
render() {
const headerTranslate = Animated.diffClamp(this.state.scrollY, 0, HEADER_SCROLL_DISTANCE)
.interpolate({
inputRange: [0, 1],
outputRange: [0, -1],
});
return (
<Animated.View style={[styles.header, {transform: [{translateY: headerTranslate}]}]}>

Title

</Animated.View>
);
}

Description

I would like to minimize the header when i scroll down, and display it again when i scroll up. As in the document, I use diffClamp, I think this is correct cause it works perfectly for Android. But for IOS at top and bottom it bound back

Video demotration

reactnative_bound

I don't know if it is a bug or not. Please help me.

Thanks

@stale
Copy link

stale bot commented Dec 21, 2018

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as "For Discussion" or "Good first issue" and I will leave it open. Thank you for your contributions.

@stale stale bot added the Stale There has been a lack of activity on this issue and it may be closed soon. label Dec 21, 2018
@stale
Copy link

stale bot commented Dec 28, 2018

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.

@stale stale bot closed this as completed Dec 28, 2018
@facebook facebook locked as resolved and limited conversation to collaborators Dec 29, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
API: Animated Platform: iOS iOS applications. Stale There has been a lack of activity on this issue and it may be closed soon.
Projects
None yet
Development

No branches or pull requests

3 participants