Flatlist support

I wanted to use an animated Flatlist to extract the scroll offset and use it to hide and show my header, but i got an error: Invariant violation: element type is invalid: expect a string or class/function but got undefined.

import React from 'react';
import {Text, View, Button} from 'react-native';
import Animated from 'react-native-reanimated';

const Screen= props=> {

		return (
			<View>
				<Button
					title= "Go back"
					onPress= {() => props.navigation.goBack()}
				/>
				<Text>This is the Test screen</Text>
				<Animated.Flatlist />	
			</View>
		);
}

Screen.navigationOptions = ({navigation}) => {
	return {title: 'Test'}
}

export default Screen;

Any suggestion it doesn’t work with Flatlist, knowing that if i change Animatet.Flatlist to Animated.Scrollview it works.

[nandorojo]

I’d like to reopen this.

While using the renderScrollComponent does work, it doesn’t allow all props to work.

If you use the renderScrollComponent with an onScroll prop for the Animated.ScrollView, the onViewableItemsChanged callback never fires after the first time when the component mounts.

import * as React from 'react'
import { FlatList, Dimensions } from 'react-native'
import Animated from 'react-native-reanimated'
import { onScroll } from 'react-native-redash'

export default () => {
  const itemHeight = Dimensions.get('window').height
  return (
    <FlatList
        data={data}
        renderItem={renderItem}
        keyExtractor={(_, index) => index.toString()}
        renderScrollComponent={props => (
          <Animated.ScrollView
            {...props}
               // 👇if you comment this in, onViewableItemsChanged won't fire.
               // onScroll={onScroll({ y: feedScroll })}
               // 👇same goes if you comment this in
               // onScroll={() => null} 
             />
         )}
        pagingEnabled
        getItemLayout={(_, index) => {
          return {
            length: itemHeight,
            index,
            offset: index * itemHeight
          };
        }}
        showsVerticalScrollIndicator={false}
        onViewableItemsChanged={console.log} // only logs the first time 
        viewabilityConfig={viewabilityConfig}
      />
  )
}

const viewabilityConfig = {
  itemVisiblePercentThreshold: 80
};

[Simranjeetnayol]

Hi everyone, There is alternative solution to use Animated FlatList in react-native-reanimated v2.0.0.

import React from ‘react’; import {View, Image, FlatList, StyleSheet} from ‘react-native’; import Animated, { useAnimatedScrollHandler, useSharedValue, } from ‘react-native-reanimated’;

import {StatusBarHeight, Stylebase} from ‘…/…/Constants/Stylebase’; import RenderItems from ‘./RenderItem’;

const data = […Array(30).keys()].map((_, i) => { return { key: Math.random().toString(36).slice(2), image: https://randomuser.me/api/portraits/women/${Math.floor( Math.random() * 100, )}.jpg, jobtitle: Math.random().toString(36).slice(2), email: Math.random().toString(36).slice(2), }; });

const AnimatedFlatList = Animated.createAnimatedComponent(FlatList);

const backgroundImage = ‘https://i.pinimg.com/originals/73/7d/01/737d014f201a5cd79257dd313e09b7d7.jpg’;

function FirstAnimation() { const onScrollY = useSharedValue(0);

const scrollHandler = useAnimatedScrollHandler(event => { onScrollY.value = event.contentOffset.y; });

return ( <View style={Stylebase.flex1}> <Image source={{uri: backgroundImage}} style={StyleSheet.absoluteFillObject} blurRadius={50} /> <AnimatedFlatList data={data} keyExtractor={item => item.key} showsVerticalScrollIndicator={false} contentContainerStyle={{ alignItem: ‘center’, paddingTop: StatusBarHeight, }} onScroll={scrollHandler} renderItem={({item, index}) => { const inputRange = [-1, 0, item_size * index, item_size * (index + 2)]; const opacityInputRange = [-1, 0, item_size * index, item_size * (index + 1)];

        const ItemViewAnimatedStyle = useAnimatedStyle(() => {
          const scale = interpolate(
            onScrollY.value,
            inputRange,
            [1, 1, 1, 0],
            Extrapolate.CLAMP,
          );
      
          const opacity = interpolate(
            onScrollY.value,
            opacityInputRange,
            [1, 1, 1, 0],
            Extrapolate.CLAMP,
          );
          return {transform: [{scale}], opacity};
        });
      
        return (
          <Animated.View style={[styles.itemView, ItemViewAnimatedStyle]}>
            <Image source={{uri: item.image}} style={styles.itemImage} />
            <View>
              <Text style={styles.nameText}>{item.key}</Text>
              <Text style={styles.jobtitle}>{item.jobtitle}</Text>
              <Text style={styles.email}>{item.email}</Text>
            </View>
          </Animated.View>
        );
      }}
  />
</View>

); } export default FirstAnimation;

Please ignore the style part. It’s gonna definitely work. Thanks in advance.