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

TouchableWithoutFeedback does not support style

Open famdude opened this issue 2 months ago • 2 comments

Description

the TouchableWithoutFeedback component does not support styling. There was another issue about this problem which is closed, and not fixed. it was suggested to add a View inside TouchableWithoutFeedback and add style to View. But it does not fix the problem! for example if if you want to create a circular TouchableWithoutFeedback, that is only touchable from inside the circle (onPress be called only if the circle area is touched), you should be able to add a borderRadius style to TouchableWithoutFeedback component itself.

Steps to reproduce

create a TouchableWithoutFeedback component, and add style to it.

React Native Version

0.73.6

Affected Platforms

Runtime - Android, Runtime - iOS

Output of npx react-native info

System:
  OS: Linux 6.5 Ubuntu 22.04.4 LTS 22.04.4 LTS (Jammy Jellyfish)
  CPU: (16) x64 13th Gen Intel(R) Core(TM) i7-13620H
  Memory: 20.65 GB / 31.07 GB
  Shell:
    version: 5.8.1
    path: /usr/bin/zsh
Binaries:
  Node:
    version: 20.12.1
    path: ~/.nvm/versions/node/v20.12.1/bin/node
  Yarn: Not Found
  npm:
    version: 10.5.0
    path: ~/.nvm/versions/node/v20.12.1/bin/npm
  Watchman: Not Found
SDKs:
  Android SDK: Not Found
IDEs:
  Android Studio: AI-232.10300.40.2321.11567975
Languages:
  Java: Not Found
  Ruby: Not Found
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.73.6
    wanted: 0.73.6
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: Not found
  newArchEnabled: Not found
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found


### Stacktrace or Logs

```text
no log

Reproducer

http://localhost:3000

Screenshots and Videos

No response

famdude avatar Apr 13 '24 09:04 famdude

:warning: Missing Reproducible Example
:information_source: We could not detect a reproducible example in your issue report. Please provide either:
  • If your bug is UI related: a Snack
  • If your bug is build/update related: use our Reproducer Template. A reproducer needs to be in a GitHub repository under your username.

github-actions[bot] avatar Apr 13 '24 09:04 github-actions[bot]

Hey, @famdude! Check this custom file to support styling in the component https://gist.github.com/mensonones/d615f87ea752e181164e5170f115c0f8

After change file. Use

<TouchableWithoutFeedback onPress={() => Alert.alert('Hello, world!')} style={styles.button}>
    <Text style={styles.paragraph}>Press me!</Text>
 </TouchableWithoutFeedback>

mensonones avatar Apr 24 '24 22:04 mensonones