CollapsingHeader example with scrolling content

In the CollapsingHeader example, the main body (below the header) does not scroll when the content goes off screen. The below example is a copy paste of the example with extra View content. Only 4 boxes are show.

I’ve tried experimenting with a ScrollView, however it either causes the header to scroll off screen (when a parent of Interactable) or does nothing (a child of Interactable).

If Interactable is wrapped in a ScrollView, it doesn’t seem to pick up all of the scroll events (header scales sometimes, sometimes not), but I do see the content.

Is there a way to achieve this?

import React, { Component } from 'react';
import { StyleSheet, ScrollView, View, Animated } from 'react-native';
import Interactable from 'react-native-interactable';

export default class CollapsingHeader extends Component {
  constructor(props) {
    super(props);
    this._deltaY = new Animated.Value(0);
  }
  render() {
    return (
      <View style={styles.container}>

        <View style={{backgroundColor: 'red', height: 250, alignItems: 'center'}}>
          <Animated.View style={{
              transform: [
                {
                  translateY: this._deltaY.interpolate({
                    inputRange: [-150, -150, 0, 0],
                    outputRange: [-58, -58, 0, 0]
                  })
                },
                {
                  scale: this._deltaY.interpolate({
                    inputRange: [-150, -150, 0, 0],
                    outputRange: [0.35, 0.35, 1, 1]
                  })
                }
              ]
            }}>
            <View style={{width: 150, height: 150, backgroundColor: 'blue', borderRadius: 75, marginTop: 50}} />
          </Animated.View>
        </View>

        <Interactable.View
          verticalOnly={true}
          snapPoints={[{y: 0}, {y: -150}]}
          boundaries={{top: -150}}
          animatedValueY={this._deltaY}>
          <View style={{left: 0, right: 0, height: 650, backgroundColor: '#e0e0e0'}}>
            <View style={{ backgroundColor: 'grey', height: 100, marginVertical: 8 }} />
            <View style={{ backgroundColor: 'grey', height: 100, marginVertical: 8 }} />
            <View style={{ backgroundColor: 'grey', height: 100, marginVertical: 8 }} />
            <View style={{ backgroundColor: 'grey', height: 100, marginVertical: 8 }} />
            <View style={{ backgroundColor: 'grey', height: 100, marginVertical: 8 }} />
            <View style={{ backgroundColor: 'grey', height: 100, marginVertical: 8 }} />
            <View style={{ backgroundColor: 'grey', height: 100, marginVertical: 8 }} />
            <View style={{ backgroundColor: 'grey', height: 100, marginVertical: 8 }} />
          </View>
        </Interactable.View>

      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
  }
});

[hadimostafapour]

Try this hack, maybe helpful:

Works on both iOS and Android Tested on RN 0.57RC3

TouchableWithoutFeedback will prioritize scrollView touch events than Interactable.View

<ScrollView>
       <TouchableWithoutFeedback>
                <View>{this.props.children}</View>
      </TouchableWithoutFeedback>
</ScrollView>

[RichardLindhout]

Any updates on this?