React Native アプリで position: absolute を指定して、要素の上半分を親要素からはみ出させたボタンを実装したところ、Android でのみ親要素からはみ出た部分が押せなくなるという現象が発生しました。
親要素の上にあるボタン下半分の部分はタップ可能なのですが、上部分はタップに反応しません。
なお、iOS ではこちらの現象は再現しませんでした。
で、対処方法を調べたところ、下記の記事がヒットしました。
android – TouchableOpacity not working inside an absolute positioned View – Stack Overflow
https://stackoverflow.com/questions/39250449/touchableopacity-not-working-inside-an-absolute-positioned-view
こちらの記事によると、<TouchableOpacity> コンポーネントを react-native ではなく react-native-gesture-handler からインポートすれば良いとのことでした。
変更前はこちら。
import { TouchableOpacity } from 'react-native';
上記の行を、下記のように変更します。
import { TouchableOpacity } from 'react-native-gesture-handler';
変更するのはこれだけです。
onPress や style の内容は変更せずそのままでOKです。
上記を適用したところ、なんと無事解決しました！
最初、zIndex を追加したり、親要素の記述を変えたりしたのですがどれもダメで、これは無理では…？と思っていたので、解決できてよかったです！
<TouchableOpacity> コンポーネントでお悩みの方は、是非一度上記の方法をお試しください。
以上、React Native で position:absolute を指定した <TouchableOpacity> コンポーネントが Android アプリでタップできない時の対処法でした。
ご参考になれば幸いです。
