react-native icon indicating copy to clipboard operation
react-native copied to clipboard

some TouchableOpacity isn't working on IOS 0.76

Open iwater opened this issue 1 year ago • 1 comments

Description

After upgrading from 0.73 to 0.76, I found that some TouchableOpacity could not be clicked, so I made a minimize buggy demo code, which just depend on react-native, no 3rd libs

Steps to reproduce

  1. npx @react-native-community/cli@latest init TouchableOpacityDemo
  2. cd ios && bundle exec pod install
  3. modify App.tsx
import * as React from "react";
import {
  StyleSheet,
  TouchableOpacity,
  ScrollView,
  Alert,
  View,
  Text,
  Image,
} from "react-native";

const styles = StyleSheet.create({
  text: {
    color: "#FFF",
    fontSize: 16,
  },
  icons: {
    display: "flex",
    flexDirection: "row",
    justifyContent: "space-evenly",
    paddingVertical: 5,
    alignSelf: "stretch",
    backgroundColor: "#FFF",
  },
  title: { fontSize: 18, flexWrap: "wrap", color: "#000" },
});

const App = ({ }) => {
  return (
    <ScrollView
      style={{ flex: 1, backgroundColor: '#808000' }}
      contentContainerStyle={{
        flexDirection: "row",
        flexWrap: "wrap",
        justifyContent: "space-evenly",
      }}
    >
      <View
        style={{
          width: 150,
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
          marginTop: 10,
        }}
      >
        <TouchableOpacity style={{ width: 150, height: "100%", backgroundColor: '#CC0' }} onPress={() => {
          Alert.alert('cover click');
        }}>
          <Image source={{ uri: 'https://placehold.jp/3d4070/ffffff/150x150.png' }} style={{ height: 150 }} />
        </TouchableOpacity>
        <View style={styles.icons}>
          <TouchableOpacity style={{ width: 20, height: "100%", backgroundColor: '#C00' }} onPress={() => {
            Alert.alert('A click');
          }}><Text>A</Text></TouchableOpacity>
          <TouchableOpacity style={{ width: 20, height: "100%", backgroundColor: '#C00' }} onPress={() => {
            Alert.alert('B click');
          }}><Text>B</Text></TouchableOpacity>
          <TouchableOpacity style={{ width: 20, height: "100%", backgroundColor: '#C00' }} onPress={() => {
            Alert.alert('C click');
          }}><Text>C</Text></TouchableOpacity>
        </View>
      </View>
    </ScrollView>
  );
};

export default App;

  1. yarn ios
  2. you can see the image can click but the buttons A/B/C can not click
  3. if change height: "100%" to height: 150 in line 47 the buttons A/B/C can click again

React Native Version

0.76.6

Affected Platforms

Runtime - iOS

Output of npx react-native info

System:
  OS: macOS 15.2
  CPU: (10) arm64 Apple M4
  Memory: 139.52 MB / 16.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 22.11.0
    path: ~/.nvm/versions/node/v22.11.0/bin/node
  Yarn:
    version: 4.6.0
    path: ~/.nvm/versions/node/v22.11.0/bin/yarn
  npm:
    version: 10.9.0
    path: ~/.nvm/versions/node/v22.11.0/bin/npm
  Watchman:
    version: 2024.12.02.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.16.2
    path: /opt/homebrew/lib/ruby/gems/3.4.0/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 24.2
      - iOS 18.2
      - macOS 15.2
      - tvOS 18.2
      - visionOS 2.2
      - watchOS 11.2
  Android SDK: Not Found
IDEs:
  Android Studio: 2024.2 AI-242.23726.103.2422.12816248
  Xcode:
    version: 16.2/16C5032a
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.10
    path: /Users/iwater/.sdkman/candidates/java/current/bin/javac
  Ruby:
    version: 3.4.1
    path: /opt/homebrew/opt/ruby/bin/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 15.0.1
    wanted: 15.0.1
  react:
    installed: 18.3.1
    wanted: 18.3.1
  react-native:
    installed: 0.76.6
    wanted: 0.76.6
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: true
  newArchEnabled: true

Stacktrace or Logs

no

Reproducer

https://github.com/iwater/TouchableOpacityDemo

Screenshots and Videos

Image

iwater avatar Jan 18 '25 17:01 iwater

same issue

zoobibackups avatar May 27 '25 11:05 zoobibackups