Skip to main content

TouchableRipple

Utilities

TouchableRipple

Pressable wrapper providing ripple feedback consistent with Material 3.

Usage

Wrap any interactive surface to align press visuals with the design system.

Highlights

  • Supports bordered and borderless modes
  • Integrates with StateLayer when hovered

When to use it

  • Custom components require Material ripple animations.
  • Need to match RN Paper/Material motion without extra deps.

Related components

StateLayerButton

Examples​

Default​

Preview (Web)
import { StyleSheet, View } from 'react-native';
import { TouchableRipple } from 'react-native-molecules/components/TouchableRipple';
import { Text } from 'react-native-molecules/components/Text';

const styles = StyleSheet.create({
  container: {
      width: 220,
      height: 120,
      borderRadius: 16,
      borderWidth: 1,
      borderColor: '#d4d4d8',
      backgroundColor: '#f4f4f5',
      alignItems: 'center',
      justifyContent: 'center',
  },
});

export default function Example() {
  return (
      <View style={{ gap: 12 }}>
          <TouchableRipple style={styles.container} onPress={() => console.log('Pressed')}>
              <Text>Touchable Ripple</Text>
          </TouchableRipple>
      </View>
  );
}
PropTypeDefaultDescription
onPress(((event: GestureResponderEvent) => void) & ((e: GestureResponderEvent) => void)) | undefined——
onLongPress(((event: GestureResponderEvent) => void) & ((e: GestureResponderEvent) => void)) | undefined——
children((string | number | bigint | boolean | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<string | number | bigint | boolean | ReactPortal | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | ((state: PressableStateCallbackType) => React.ReactNode)) & (string | number | bigint | boolean | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<string | number | bigint | boolean | ReactPortal | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined>)) | null | undefined——
disabledboolean | undefined——
style((false | "" | ViewStyle | RegisteredStyle<ViewStyle> | RecursiveArray<Falsy | ViewStyle | RegisteredStyle<ViewStyle>> | ((state: PressableStateCallbackType) => StyleProp<ViewStyle>)) & (false | "" | ViewStyle | RegisteredStyle<ViewStyle> | RecursiveArray<Falsy | ViewStyle | RegisteredStyle<ViewStyle>>)) | null | undefined——
borderlessboolean | undefined——
backgroundObject | undefined——
centeredboolean | undefined——
rippleColorstring | undefined——
underlayColorstring | undefined——
Defined in react-native-molecules/components/TouchableRipple