React Native - Whatsappのようなアニメーションがうまくいかない

Question

私はwhatsappのようなアニメーションを実現しようとしていますが、スクロールを開始すると隠れてしまい、リストにスペースがあり、スクロールバックすると再び表示されますが、これは私が得たものです。

結果

<Animated.View 
    style={{ 
     height: this.state.scrollY.interpolate({ 
      inputRange: [0, 0.55, 1], 
      outputRange: [102, 102, 0], 
      extrapolate: 'clamp' 
     }), 
     backgroundColor: '#528eff', 
     flex: 0, 
     flexDirection: 'row', 
     justifyContent: 'center'}}> 
    <View style={{flex: 1, flexDirection: 'column', alignItems: 'center', justifyContent: 'center'}}> 
     <Text style={{fontFamily: 'Roboto-Regular', fontSize: 14, color: 'rgba(255,255,255,0.87)'}}>Requests</Text> 
     <Text 
      style={{fontFamily: 'Roboto-Regular', fontSize: 36, color: 'rgba(255,255,255,0.87)'}}>{this.state.information.requests}</Text> 
     <View 
      style={{position: 'absolute', top: 50, bottom: 50, right: 0, width: 2, height: 25, backgroundColor: 'rgba(255,255,255,0.54)'}}/> 
    </View> 
    <View style={{flex: 1, flexDirection: 'column', alignItems: 'center', justifyContent: 'center'}}> 
     <Text style={{fontFamily: 'Roboto-Regular', fontSize: 14, color: 'rgba(255,255,255,0.87)'}}>Total 
      value</Text> 
     <Text 
      numberOfLines={1} 
      ellipsizeMode={'tail'} 
      style={{marginLeft: 10, marginRight: 10, fontFamily: 'Roboto-Regular', fontSize: 36, color: 'rgba(255,255,255,0.87)'}}>{this.state.information.total}</Text> 
     <View 
      style={{position: 'absolute', top: 50, bottom: 50, right: 0, width: 2, height: 25, backgroundColor: 'rgba(255,255,255,0.54)'}}/> 
    </View> 
    <View style={{flex: 1, flexDirection: 'column', alignItems: 'center', justifyContent: 'center'}}> 
     <Text style={{fontFamily: 'Roboto-Regular', fontSize: 14, color: 'rgba(255,255,255,0.87)'}}>From 
      (People)</Text> 
     <Text 
      style={{fontFamily: 'Roboto-Regular', fontSize: 36, color: 'rgba(255,255,255,0.87)'}}>{this.state.information.people}</Text> 
    </View> 
</Animated.View> 
<ListView 
    contentContainerStyle={{paddingBottom: 78}} 
    style={{height: this.windowHeight - 183}} 
    dataSource={this.state.expensesList} 
    scrollEventThrottle={1} 
    onScroll={ 
     Animated.event([{ 
      nativeEvent: { 
       contentOffset: { 
        y: this.state.scrollY 
       } 
      } 
     }]) 
    } 
    enableEmptySections={true} 
    renderRow={(rowData) => this._renderRow(rowData)}/> 

Answer 1

はこちらこの例から参照してくださいコード：

https://medium.com/@janicduplessis/react-native-scrollview-animated-header-10a18cb9469e#.dqq02kk49

滑らかなアニメーションのためにscrollEventThrottle = {1}をscrollEventThrottle = {16}に押し上げる。