react-native-ui-lib/src/components/touchableOpacity/touchableOpacity.api.json

[](https://stand-with-ukraine.pp.ua)

{
  "name": "TouchableOpacity",
  "category": "basic",
  "description": "A wrapper for TouchableOpacity component. Support onPress, throttling and activeBackgroundColor",
  "extends": ["TouchableOpacity"],
  "extendsLink": ["https://reactnative.dev/docs/touchableopacity"],
  "modifiers": ["margins", "paddings", "alignments", "background", "borderRadius"],
  "example": "https://github.com/wix/react-native-ui-lib/blob/master/src/components/touchableOpacity/index.tsx",
  "images": ["https://media.giphy.com/media/xULW8AMIgw7l31zjm8/giphy.gif"],
  "props": [
    {"name": "backgroundColor", "type": "string", "description": "Background color for TouchableOpacity"},
    {"name": "throttleTime", "type": "number", "description": "Throttle time in MS for onPress callback"},
    {"name": "throttleOptions", "type": "ThrottleOptions", "description": "Throttle options"},
    {
      "name": "activeBackgroundColor",
      "type": "string",
      "description": "Apply background color on TouchableOpacity when active (press is on)"
    },
    {
      "name": "useNative",
      "type": "boolean",
      "description": "Should use an enhanced native implementation with extra features"
    },
    {
      "name": "customValue",
      "type": "any",
      "description": "Custom value of any type to pass on to TouchableOpacity and receive back in onPress callback"
    },
    {"name": "style", "type": "ViewStyle", "description": "Custom style"},
    {"name": "recorderTag", "type": "'mask' | 'unmask'", "description": "Recorder Tag"},
    {
      "name": "onPress",
      "type": "(props?: TouchableOpacityProps & {event: GestureResponderEvent} | any) => void",
      "description": "On press callback"
    }
  ],
  "snippet": [
    "<View flex center>",
    "<TouchableOpacity onPress={() => console.log('pressed')$1}>",
    "   <Text text40>Touchable</Text>",
    "</TouchableOpacity>",
    "</View>"
  ],
  "docs": {
    "hero": {
      "title": "TouchableOpacity",
      "description": "An enhanced version of React Native's TouchableOpacity component providing additional features and modifiers support",
      "type": "hero",
      "layout": "horizontal",
      "content": [{}]
    }
  }
}