Zenn
Open3

ReactNativeでTouchableOpacityがposition absoluteのときにタップが反応しない問題の対応

Android
React Native
React
qaynamqaynam

環境

ReactNative: 0.70.5
React: 18
Android emiulator

機能しなかったコード

iosの場合は問題なく動きましたが、androidの場合はタップしても反応しない。

Toast.tsx
const Toast = () => (
<View style={style.container}>
  <TouchableOpacity>
    <Text>click me </Text>
  </TouchableOpacity>
</View>);

const style = StyleSheet.create({
  container: {
    position: 'absolute'
    zIndex: 9999,
    elevation: 9999, // <- androidのzIndex
  }
});

何故か、expo の inspectorで一回touchableを有効にしておくと、押せるようになる。（何かのレンダリングのもんだなのかな）

react-native-ouchableOpacity-issue

関連ソース

https://stackoverflow.com/a/69388896

react-native-gesture-handlerからimportすればいけるとと書いてありますが、同じくだめだった。

親のpositionを消すと押せるようになる。

qaynamqaynam

試したこと

width, heightをつけてみる。(だめだった)

Toast.tsx

const Toast = () => (
<View style={style.container}>
  <TouchableOpacity>
    <Text>click me </Text>
  </TouchableOpacity>
</View>);

const style = StyleSheet.create({
  container: {
    position: 'absolute'
    zIndex: 9999,
    height: '100%', // 👈追加
    widht: '100%', // 👈追加
    elevation: 9999 // <- androidのzIndex
  }
});

stackoverflow通り、react-native-gesture-handlerからimport (だめだった)

ただ、親のpositionを消すと押せるようになる。

qaynamqaynam

結果はやはり一番外側に親玉のViewでラップしないと、toucheventがトリガーされなかった、解決策として、react-native-root-siblingsを使うしかないきがする。