CODEWITHSUNDEEP
react-nativelayout-animation
famfamfam
famfamfam

Reputation: 545

react native layoutanimation config easeInout not working (IOS)

i have a room list, when any room have new message, I sorted this room to top then re-render the flatList with LayoutAnimation(testing from IOS simulator):

const CONFIG = {
  duration: 300,
  create: {
    type: LayoutAnimation.Types.linear,
    property: LayoutAnimation.Properties.opacity
  },
  update: {
    type: LayoutAnimation.Types.easeInEaseOut
  },
  delete: {
    type: LayoutAnimation.Types.easeInEaseOut,
    property: LayoutAnimation.Properties.opacity
  }
}

export function animate () {
  LayoutAnimation.configureNext(CONFIG)
}

but when data changed, i didnt see any animation without fade, as video below:

video

Updated video with transition:

this is updated answer with transition

other information:

"react": "17.0.2",
"react-native": "^0.68.0",
"react-native-gesture-handler": "^2.5.0",
"react-native-reanimated": "^2.9.1",

Upvotes: 0

Views: 891

Answers (1)

Louay Sleman
Louay Sleman

Reputation: 2116

To Archive that you can use Animated in React Native, you can check this article that explains how to do it step by step from here

And you can achieve that with FlatList by using Transitioning View from react-native-reanimated like this example:

import React, { useState, useEffect, useRef } from 'react';
import {
  Text,
  View,
  TouchableOpacity,
  StyleSheet,
  FlatList,
} from 'react-native';
import { datas, sortRoom, currentUser } from './components/datas';
import { RoomItem } from './RoomItem';
import { Transition, Transitioning } from 'react-native-reanimated';

    const transition = (
      <Transition.Together>
        <Transition.Change durationMs={500} />
      </Transition.Together>
    );

  const styles = StyleSheet.create({
      item: {
        width: '100%',
        height: 100,
        backgroundColor: 'red',
        marginVertical: 10,
        justifyContent: 'center',
        alignItems: 'center',
      },
      itemText: {
        fontSize: 21,
        color: '#fff',
      },
    });

export default function App() {
  const [roomList, setRoomList] = useState(datas);
  const parentRef = useRef();

  return (
<React.Fragment>
      <TouchableOpacity
        onPress={() => {
          //get random room and append to top by assign SendDate to now
          parentRef.current.animateNextTransition()
          const newRooms = [...roomList];
          const randomIndex = Math.floor(Math.random() * roomList.length);
          const matchedNewRoom = [...roomList][randomIndex];
          matchedNewRoom.LastMsg.SendDate = new Date().getTime();
          const sortedRoom = sortRoom(newRooms);
          setRoomList(sortedRoom);
        }}
        style={{
          marginTop: 20,
          justifyContent: 'center',
          alignItems: 'center',
          padding: 5,
        }}>
        <Text style={{ color: 'blue' }}> Re-Order </Text>
      </TouchableOpacity>
     <Transitioning.View ref={parentRef} transition={transition}>
      <FlatList
        style={{
          width: '100%',
        }}
        data={roomList}
        keyExtractor={(item) => item.RoomName.toString()}
        renderItem={({item}) =>  <RoomItem room={item} currentUser={currentUser}/>}
        contentContainerStyle={{
          flexGrow: 1,
        }}
        initialNumToRender={20}
        onEndReachedThreshold={0.1}
      />
    </Transitioning.View>
    </React.Fragment>
  );
}

You can check the demo here.

Upvotes: 1

Related Questions