Skip to content

Animated diffClamp bound back on IOS #21110

Closed
@yangnana11

Description

@yangnana11

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    API: AnimatedPlatform: iOSiOS applications.StaleThere has been a lack of activity on this issue and it may be closed soon.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions