1. はじめに
React Native で Android 対応アプリを作っていて、
「タブバーを押したときの Ripple（波紋）エフェクト、いらないんだけど…消えない！」
と思ったことはありませんか？
私も、「android_ripple={{ color: 'transparent' }} をつければ消えるでしょ？」と甘く見ていた一人です。
実は、Ripple Effect の制御は環境や使い方によって挙動が異なるため、正しく無効化するには注意が必要です。
今回はその背景と、確実に Ripple を消す方法を初心者の私が自分なりに分かりやすく解説します。
この記事が誰かの沼からの脱出のヒントになれば嬉しいです。
2. Ripple Effectって何？
Androidでは、ボタンをタップしたときに水の波紋のようなアニメーションが出ることがあります。
これが Ripple Effect（リップルエフェクト） です。
これは Android の Material Design で標準になっているUIの一部です。
しかし、アプリのデザインや世界観によっては「いらない」こともありますよね。
3. よくあるやり方（うまくいかない）
<PlatformPressable android_ripple={{ color: 'transparent' }} />
<PlatformPressable android_ripple={null} />
この書き方、よく紹介されています。
ですが、実際消えない事があります！
✅ 4. 解決策：TouchableWithoutFeedback を使う
完全に視覚的な反応をなくしたい場合は、以下のように TouchableWithoutFeedback を使うのが確実です。
この方法は Ripple だけでなく、一切の視覚的フィードバックを表示しません。
import { TouchableWithoutFeedback, View } from 'react-native';
export function HapticTab(props) {
return (
<TouchableWithoutFeedback onPress={props.onPress}>
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
{props.children}
</View>
</TouchableWithoutFeedback>
);
}
これでようやく Ripple Effect を完全に無効化できます！
ただし注意点もあります👇
5. 🤔 なぜこんなに難しいのか？
React Native の Pressable や PlatformPressable は内部的に Android のネイティブな UI（RippleDrawable）を使っているらしいです。
つまり、React Native 側で color: transparent を指定しても、Android 側の波紋生成は止められないことがあるとの事。
しかも、Expo Go などのテスト環境では、Ripple が強制的に出てしまうこともあるらしいです。
6. まとめ
| 方法 | 効果 | コメント |
|---|---|---|
android_ripple={{ color: 'transparent' }} |
△ | 見た目に残る場合あり |
android_ripple={null} |
△ | SDK によって効かない場合あり |
TouchableWithoutFeedback + View(flex: 1) |
✅ | 最も確実な方法 |
Discussion