How to use scrollview instated FlatList

[kirhim]

This is a great library. But I want to use ScrollView instead FlatList .

I changed this:
const AnimatedFlatList = Animated.createAnimatedComponent(FlatList);
to

const AnimatedView = Animated.createAnimatedComponent(ScrollView);

It works but animation is laggy. Not as smooth as the flatlist. Any idea how I could fix this?

[benevbright]

@kirhim Hi, Thanks for your word.

Your code looks good.

#62
Do you think it's the same issue with yours?

[kirhim]

@benevbright thanks for the answer but the issue I am having is not with android.

It happens when I change the FlatList to ScrollView.

I edited your code S3_ExtraHeaderForTab's Second Tab to Child2 and changed the FlatList to ScrollView like this:

import React, {Component} from 'react';
import { View, Text, FlatList, Animated, TouchableOpacity, ScrollView } from 'react-native';
import { withCollapsibleForTabChild } from 'react-navigation-collapsible';

const AnimatedFlatList = Animated.createAnimatedComponent(ScrollView);

const CustomView = ({text}) => (
  <View style={{width:'100%', height:50, marginTop:10, borderBottomWidth:0.5, borderColor:'black' }}>
    <Text style={{fontSize:22}}>{text}</Text>
  </View>
)

class TabChild2Screen extends Component{
  static navigationOptions = {
    title: 'Child 2'
  };

  constructor(props){
    super(props);
  }


  render(){
    const { animatedY, onScroll } = this.props.collapsible;

    return (
      <AnimatedFlatList
        style={{flex: 1}}
        onScroll={onScroll}
        _mustAddThis={animatedY}
        >
        <CustomView text={1}/>
        <CustomView text={2}/>
        <CustomView text={3}/>
        <CustomView text={4}/>
        <CustomView text={5}/>
        <CustomView text={6}/>
        <CustomView text={7}/>
        <CustomView text={8}/>
        <CustomView text={9}/>
        <CustomView text={10}/>
        <CustomView text={11}/>
        <CustomView text={12}/>
        <CustomView text={13}/>
        <CustomView text={14}/>
        <CustomView text={15}/>
        <CustomView text={16}/>
        <CustomView text={17}/>
        <CustomView text={18}/>
        <CustomView text={19}/>
        <CustomView text={20}/>
        <CustomView text={21}/>
        <CustomView text={22}/>
        <CustomView text={23}/>
        <CustomView text={24}/>
        <CustomView text={25}/>
        <CustomView text={26}/>
        <CustomView text={27}/>
        <CustomView text={28}/>
        <CustomView text={29}/>
        <CustomView text={30}/>
      </AnimatedFlatList>


    )
  }
}

export default withCollapsibleForTabChild(TabChild2Screen);

You will notice that the TabChildScreen1 and the TabChildScreen2 content looks almost identical but not animation is not smooth when using the scrollview. Is there a way to fix this?

Thanks in advance! :)

[benevbright]

Thanks for the example code. @kirhim
I confirm this bug.

[benevbright]

Ok, it turns out it's not a bug.
You need to set scrollEventThrottle on ScrollView.
https://facebook.github.io/react-native/docs/scrollview#scrolleventthrottle

Between 1-16. 16 gives the smoothest result but I guess it would be better to find the proper number.

[kirhim]

@benevbright you are right thanks :)
happy new year thanks :)