Android Ripple

Android Ripple

TouchableNativeFeedback and the Android Ripple Effect

Android's own feedback is the ripple, an ink circle growing from the touch point. TouchableNativeFeedback (Android only, one View child) takes background={TouchableNativeFeedback.Ripple(color, borderless)} or the theme's SelectableBackground(). Pressable has it built in as android_ripple, which adds foreground (draw over the children) and, for icon buttons, borderless with a radius:

Two bounded ripples and a borderless one (Ripple.js, excerpt)XML

      <Pressable android_ripple={{ color: '#90caf9', foreground: true }} style={box}>
        <Text>Pressable with android_ripple</Text>
      </Pressable>
      <TouchableNativeFeedback background={TouchableNativeFeedback.Ripple('#ffb74d', false)}>
        <View style={box}><Text>TouchableNativeFeedback</Text></View>
      </TouchableNativeFeedback>
      <Pressable
        android_ripple={{ color: '#a5d6a7', borderless: true, radius: 36 }}
        style={{ alignSelf: 'center', padding: 12 }}
      >

box sets overflow: 'hidden' so the bounded ripples respect the rounded corners. The left screen of the figure in Wiring Up Buttons in BookNest shows the first ripple held under a synthetic long touch, drawn over the text because of foreground. iOS ignores these props, so add a pressed style there.

MENU