[ReactNative_study_15]LayoutAnimation

*이 내용은 Nomad coder의 React Native Master Class를 듣고 공부하는 글입니다.

 

https://reactnative.dev/docs/layoutanimation

LayoutAnimation · React Native

 

-> State가 변하기 전에 layoutAnimation을 선언하여, state가 변경될 때 적용하도록 할 수 있음.

1) import 

// Android의 경우 UIManager도 불러와야함

import React, { useState } from "react";
import { LayoutAnimation, Platform, StyleSheet, Text, TouchableOpacity, UIManager, View } from "react-native";

2) Android의 경우 아래와 같은 코드 필요

if (
  Platform.OS === "android" &&
  UIManager.setLayoutAnimationEnabledExperimental
) {
  UIManager.setLayoutAnimationEnabledExperimental(true);
}

3) LayoutAnimation API 적용

const App = () => {

  // 아래의 state가 변경될 때 실행
  const [expanded, setExpanded] = useState(false);

  return (
    <View style={style.container}>
      <TouchableOpacity
      
      // 해당 component 클릭시 setExpanded(!expanded) 가 실행되기 전에 api를 쓰면된다.
        onPress={() => {
        
          LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
          
          
          setExpanded(!expanded);
        }}
      >

4) 비교

Animation 적용

Animation 미적용