How to achieve something like CoordinatorLayout in React Native?

Question

I want to achieve a behavior like android's CoordinatorLayout enter always for my ToolBar i tried too many solutions some did work but not fully like https://github.com/maolion/mao-rn-android-kit which is really cool but with one setback as it doesn't work with ListView i also tried Animated but the scroll event throttle on android is just not working most of the times it does not even work. Using mao-rn-android-kit ``` this.coordinatorLayout = component} fitsSystemWindows={false}> this._goBack()} onActionSelected={() => {}} actions={[{titl…

Accepted Answer

The key to reacting to the scroll position fluidly is using `Animated.event` along with the `onScroll` to update an `Animated.value`

```
getInitialState: function() {
    return {
        scrollY: new Animated.Value(0)
    }
},
render() {
    return (
         <ScrollView
             scrollEventThrottle={16}
             onScroll={Animated.event(
                            [{nativeEvent: 
                               {contentOffset: 
                                 {y: this.state.scrollY}
                               }
                            }]
              )}>
    // etc ...
}
```

I could then call `interpolate` on `this.state.scrollY` and feed this value into a `transform` style on another component that I wanted to update as the `ScrollView` scrolled.

How to achieve something like CoordinatorLayout in React Native?

Solution

Problem