question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

Description

Overflowed child view is not touchable in 0.65.x. It works as expected in the previous versions. This affects react-navigation library(https://github.com/react-navigation/react-navigation/issues/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',

  },
});

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Reactions:3
  • Comments:8 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
kyo504commented, Nov 18, 2021

@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.

0reactions
hotaryuzakicommented, Mar 28, 2022

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

View within Touchable not rendered on Android - Stack Overflow
I have created a custom button component that should respond to touches. It works as expected on iOS, however on Android it doesn't...
Read more >
Intersection Observer API - MDN Web Docs
The Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor ...
Read more >
Elk Antlers Extra Large Whole Dog Chew - Pet Wants
Food Calculator. Step 1: Calculate Daily Calorie Goal. Pet Type, Cat, Dog. Life Stage. Activity. lbs, kg. GO. Add To My Existing Subscriptions....
Read more >
React Native touchable vs. pressable components
View component to implement the opacity transition — then, you can use the style prop for styling, unlike the platform-specific Button component ......
Read more >
CSS Box Shadow - CSS-Tricks
Amazingly heady stuff to view the world through an Apple optic, ... Sounds like you need to use the box-shadow without a X...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found