[Android] overflowed child view not touchable in 0.65.x

[kyo504]

Description

Overflowed child view is not touchable in 0.65.x. It works as expected in the previous versions. This affects react-navigation library(react-navigation/react-navigation#9846).

React Native version:

System:
    OS: macOS 11.3.1
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 107.47 MB / 32.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.16.0 - ~/.nvm/versions/node/v14.16.0/bin/node
    Yarn: 1.22.11 - ~/.nvm/versions/node/v14.16.0/bin/yarn
    npm: 6.14.11 - ~/.nvm/versions/node/v14.16.0/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.10.2 - /Users/danieljung/.rbenv/shims/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 14.5, DriverKit 20.4, macOS 11.3, tvOS 14.5, watchOS 7.4
    Android SDK:
      API Levels: 29, 30
      Build Tools: 28.0.3, 29.0.2, 30.0.2, 30.0.3
      System Images: android-29 | Google Play Intel x86 Atom, android-30 | Google APIs Intel x86 Atom
      Android NDK: Not Found
  IDEs:
    Android Studio: 4.2 AI-202.7660.26.42.7351085
    Xcode: 12.5.1/12E507 - /usr/bin/xcodebuild
  Languages:
    Java: 1.8.0_282 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 17.0.2 => 17.0.2 
    react-native: 0.65.1 => 0.65.1 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Steps To Reproduce

1. Run code example in 0.65.x
2. Press CLICK ME! button

Expected Results

User can press the button and see the alert.

Snack, code example, screenshot, or link to a repository:

import React from 'react';
import { View, Button, Alert, Animated, StyleSheet } from 'react-native';

export default function App() {
  return (
    <Animated.View style={{ flex: 1, flexDirection: 'column-reverse' }}>
      <View style={{ flex: 1, backgroundColor: 'yellow' }} />

      <Animated.View>
        <View style={styles.header}>
          <Button
            title="Click Me!"
            onPress={() => {
              Alert.alert('Button clicked!');
            }}
          />
        </View>
      </Animated.View>
    </Animated.View>
  );
}

const styles = StyleSheet.create({
  header: {
    position: 'absolute',
    top: 0,
    left: 0,
    width: '100%',

    alignItems: 'center',
    justifyContent: 'center',

  },
});

[RigottiG]

I'm facing the same issue here

[kyo504]

This issue has been fixed via #29039 on 0.66.rc-0 and it would be back-ported to 0.65.2. But still I don't understand what happens between 0.63 and 0.64 because it worked on 0.63.x without the PR which was being reviewed).

[hippiejuice]

@kyo504 was this added to 65.2? I'm having this issue after upgrading to 65.2.

[kyo504]

@hippiejuice No, it's not . 0.65.2 only contains this commit so that I think you may need to upgrade RN to 0.66.x.

[hippiejuice]

@kyo504 Just tried to upgrade, but one of our dependencies still uses ReactPicker which was removed in 0.66.x... why was Picker removed, do you know? Is there any way we could patch this fix to 65?

[kyo504]

@hippiejuice According to "Lean Core" projects, many components were extracted from RN and now they have their own repo. Refer to this issue. You can use this as drop-in replacement.

[hippiejuice]

@hippiejuice According to "Lean Core" projects, many components were extracted from RN and now they have their own repo. Refer to this issue. You can use this as drop-in replacement.

Hmm.. I already have that dependency in my root project, but one of my packages is importing the picker as "import com.facebook.react.views.picker.ReactPicker;" which Android Studio is saying doesn't exist. I'll reach out to the package manager to update it, but wondering why this fix wasn't cherry-picked to 65 as it completely breaks react-navigation on some apps. Thanks for the quick responses btw!

[hotaryuzaki]

is it true the issue already fix in 0.66??
can anyone confirm it?