Animated diffClamp bound back on IOS #21110
Labels
API: Animated
Platform: iOS
iOS applications.
Stale
There has been a lack of activity on this issue and it may be closed soon.
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
I don't know if it is a bug or not. Please help me.
Thanks
The text was updated successfully, but these errors were encountered: