[React Native] 클릭 시, 리플 효과(Ripple Effect) 주는 방법

클릭 시, 리플 효과(Ripple Effect) 주는 방법

들어가며

• 리액트 네이티브(React Native)에서 요소 클릭 시, 리플 효과(Ripple Effect)를 줄 수 있는 방법을 정리해본다.

 

방법

• 우선 특정 요소에 클릭 이벤트를 넣기 위해서는 @Pressable@ 컴포넌트로 해당 요소를 감싸줘야 한다.

import { View, Text, Pressable } from 'react-native';

function MyComponent(props) {
  return (
    <View>
      <Pressable>   {/* 클릭 효과를 넣을 요소를 감싸준다. */}
        <Text>{props.text}</Text>
      </Pressable>
    </View>
  );
}

 

Android OS

• @Pressable@ 컴포넌트에 @android_ripple@ 속성을 추가하여 요소 클릭 시, 리플 효과가 발생하도록 해줄 수 있다.

<Pressable android_ripple={{ color: '#DDDDDD' }}>
    <Text>Goal Item</Text>
</Pressable>

 

iOS

• iOS에서는 @android_ripple@ 속성이 동작하지 않는다.
• 그 대신에 @Pressable@ 컴포넌트의 @style@ 속성을 함수 형태로 사용하여 리플 효과를 구현할 수 있다.

<Pressable style={({ pressed }) => pressed ?? styles.pressedItem}>
    <Text style={styles.goalText}>Goal Item</Text>
</Pressable>

const styles = StyleSheet.create({
    pressedItem: {
        opacity: 0.5, // 눌린 상태에서 투명도 설정
    },
    goalText: {
        padding: 10,
    },
});

 

적용 화면

리플 효과가 적용된 모습

 

참고 사이트

Pressable · React Native