[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