[React Native] react-native-pulse API

React Native react-native-pulse API 사용법

React Native animation 중에서 pulse 효과를 API를 사용하여 쉽고 간편하게 사용하는 방법입니다.

저한테 필요한 기능과 정말 딱 맞는 효과를 가지고 있어서 너무 유용하게 사용하였답니다.

직접 react-native-animatable을 import해서 구현하기에는 어렵고 힘든데,

이 API 덕분에 쉽게 구현하게 되었습니다.

 

Animatable 중에 pulse가 어떤 효과인지 모르시는 분들은 아래 링크를 참조하시면 됩니다.

pulse이외에도 여러 animatable 효과들이 있습니다.

다만 저는 npm만 보고는 구현하기가 어렵더라고요...

www.npmjs.com/package/react-native-animatable

react-native-animatable

react-native-pulse를 구현하면 다음과 같은 animation 효과를 만들 수 있습니다.

아래의 코드를 입력하여 설치를 하시면 됩니다.

  npm install react-native-pulse --save

이 API는 import를 해주지 않고 변수 선언으로 사용합니다.

npm install react-native-pulse --save

그리고 다음의 코드만 입력해주시면 위의 gif와 같은 animation 효과를 사용할 수 있습니다.

const Pulse = require('react-native-pulse').default

다음은 제가 사용한 예제 코드입니다,

import React, { useRef, useState } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { TouchableOpacity } from 'react-native-gesture-handler';
import { height, width } from '../../config/globalStyles';
import * as Animatable from 'react-native-animatable';

const RecordButton = ({
}) => {
    const Pulse = require('react-native-pulse').default
    const [isActive, setIsActive] = useState(false);

    return (
        <View style={styles.container}>
            {isActive && <Pulse color='blue' numPulses={3} diameter={120} speed={30} duration={2000} /> }
            <TouchableOpacity style={styles.button} onPress={() => setIsActive(!isActive)}>
                
            </TouchableOpacity>
        </View>
    )   
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center'
    },
    button: {
        width: 88,
        height: 88,
        backgroundColor: 'blue',
        borderRadius: 100
    }
})

export default RecordButton;