애니메이션 적용하기

react-native-animatable

• https://github.com/oblador/react-native-animatable

설치

$ yarn add react-native-animatable

or

$ npm install react-native-animatable --save

예시

• 공식문서 꼭 참고바람.

• 일반 react-native 컴포넌트처럼 쓰되, 애니메이션 적용이 필요한 요소 앞에 Animatable.을 붙여준다고 생각하면 쓰기 쉬움

...

import * as Animatable from 'react-native-animatable'

...

export default function PLogin(){
    return(
        <View style={styles.container}>
            <View style={styles.header}>
                <Text>로그인</Text>

            </View>
						
						{/* 그냥 <View> 였으나, 애니메이션 젹용을 원해서 <Animatable.View>로 바꿨음.*/}
            <Animatable.View style={styles.footer}
            animation="fadeInUpBig"
            >
                <Text style={styles.title}>애니메이션 테스트</Text>
                <Text style={styles.text}>hello hello</Text>
            </Animatable.View>
        </View>
    )
}