Animating a single View based on multiple ScrollView(s)

Try to use Animated.add()

So you need in App

const tab1ScrollY = new Animated.Value(0)const tab2ScrollY = new Animated.Value(0)const scrollY = Animated.add(tab1ScrollY,tab2ScrollY)

scrollY it's offset of tab1 scroll + tab2 scroll

I faced this issue. I tried solving it this way. (Optimising it still..)

<ParentComponent>    <CollapsibleHeader/>    <TabNavigator/></ParentComponent>

The scrollState lies in Parent Component, and tabs inside TabNavigator has scrollView.I update the state in the parent component using callback after binding the Animation event.

So whenever you move between two tabs, the state lies in the parent component and it is updated from a different place.

May be this could help you.

NOTE: Still optimising it.

---------Edit--------

Parent Component:

state: scrollY: new Animated.Value(0)

componentDidMount(){    binding event.}componentWillUnmount(){    Unbind event.}onScrollEventCaptured(){  (update parent state and send it to <CollapsibleHeader/>)*}

Tab 1:This has local state. (Optimising this part),scrollY: new Animated.Value(0)

Has a ListView

onScroll function on ListView:

onScroll={Animated.event([{                        nativeEvent: {                            contentOffset: {                                y: this.state.scrollY                            }                        }                    }], {                        listener: (event) => {                            AppEvents.fire("topBar", this.state.scrollY);                        },                    })}

AppEvents.fire() is the event which is captured in Parent.(The captured event then sets state, then passed as a prop to the which actually animates.)*

For Tab 2:The same as tab 1.

*Both are same.

Still doing the optimisation work to this. The animation for me is little jerky in iOS development but it looks great in production iOS app. Android no words everywhere its jerky.

I've never used react-native, but I can definitely say why you have this issue. I used debugging tool and I figured out that when you clicked on the tab and app calls this portion of the code every time:

let translateY = this.state.scrollY.interpolate({      inputRange: [0, 600],      outputRange: [0, -290],      extrapolate: 'clamp'    });    let TabsTranslateY = this.state.scrollY.interpolate({      inputRange: [0, 600],      outputRange: [0, -290],      extrapolate: 'clamp'    });

where this.state.scrollY = new Animated.Value(0) all the time.

Basically, that means when you will click on the tab and start scrolling, it will scroll from 0. You need to find a solution remember previous state of the Animated.Value or change input/output ranges for animation.

Here is sample how to get click on the tab from App.js:

<Tabs removeClippedSubviews={false} screenProps={{animatedScrollY: this.state.scrollY}}          onNavigationStateChange={(prevState, currentState,action) => {            console.log(currentState);          }} />

Hopefully it will help you.