0

the error always occurred when i pass ref to a renderItem Element which passed to flatList component, what i want here is to manipulate the item itself with refs but i always get this error

image

here is my code snippet

import React, { useState, useRef, useEffect } from 'react';
import { View, Text, FlatList, Button } from 'react-native';
import Animated, { Transitioning, Transition } from 'react-native-reanimated';
import PropTypes from 'prop-types';
import styles from './styles';

const AnimatedHorizontalList = ({ data }) => {
  const [list, setList] = useState([]);

  const ref = useRef();

  const transition = (
    <Transition.Sequence>
      <Transition.Out delayMs={200} type="scale" />
      <Transition.Change delayMs={200} interpolation="easeInOut" />
      <Transition.In delayMs={2000} type="fade" />
    </Transition.Sequence>
  );

  useEffect(() => {
      ref.current.animateNextTransition();
      setList(data);
  });

  const renderItem = ({ item }) => {
    return (
      <Transitioning.View ref={ref} transition={transition}>
        <View>
          <Text>{item}</Text>
        </View>
      </Transitioning.View>
    );
  };

  return (
    <View style={styles.container}>
      <FlatList horizontal data={list} renderItem={renderItem} />
    </View>
  );
};

AnimatedHorizontalList.propTypes = {};
export default AnimatedHorizontalList;

Ahmed Nabil
  • 131
  • 1
  • 8

1 Answers1

0

When you use useRef() on line const ref = useRef();, you can start ref with a default value, so you can write const ref = useRef({ animateNextTransition: () => {} });, that way it dont break on line ref.current.animateNextTransition();

Victor Castro
  • 267
  • 4
  • 10