Component

Ripple

Pressable wrapper that adds a configurable ripple interaction.

React Native

Ripple

Pressable content with a visible touch response.

Tap this surface

import { View } from 'react-native';
import { Ripple, Text, toast, useTheme } from '@sohantalukder/rn-kit';

export function PressableRow() {
  const { borders, gutters } = useTheme();

  return (
    <Ripple
      accessibilityRole="button"
      accessibilityLabel="Open account details"
      onPress={() => toast.show({ type: 'info', title: 'Opening details' })}
    >
      <View style={[gutters.padding_16, borders.rounded_12]}>
        <Text weight="semibold">Account details</Text>
        <Text color="secondary">Tap to review the latest activity.</Text>
      </View>
    </Ripple>
  );
}

Live component

defaultcustom colordisabled

Wrap simple pressable content.
Keep ripple contrast visible in both themes.

Usage

import { Ripple } from '@sohantalukder/rn-kit';

import { View } from 'react-native';
import { Ripple, Text, toast, useTheme } from '@sohantalukder/rn-kit';

export function PressableRow() {
  const { borders, gutters } = useTheme();

  return (
    <Ripple
      accessibilityRole="button"
      accessibilityLabel="Open account details"
      onPress={() => toast.show({ type: 'info', title: 'Opening details' })}
    >
      <View style={[gutters.padding_16, borders.rounded_12]}>
        <Text weight="semibold">Account details</Text>
        <Text color="secondary">Tap to review the latest activity.</Text>
      </View>
    </Ripple>
  );
}

Props

These are the most important props to consider first. The custom preview highlights the common setup before you move into app-specific states.

PropTypeDefaultDescription

childrenReactNode-Content rendered inside the component surface.

rippleColorColorValuethemeColor used for the press feedback ripple.

durationnumber300Animation duration in milliseconds.

disabledbooleanfalsePrevents interaction and renders the disabled visual state.

onPress() => void-Called when the pressable component is activated.

Theme

Ripple reads from the rn-kit theme context where applicable. Wrap your app with ThemeProvider and prefer package theme tokens over hardcoded screen-level colors.

Variants

default
custom color
disabled

Best Practices

Wrap simple pressable content.
Keep ripple contrast visible in both themes.