Clickable

A container that lets views respond when touched.

Usage

import React from "react";
import { Clickable, Text } from "./components";

const Example = () => {
  return (
    <Clickable>
      <Text color="black">Press Me</Text>
    </Clickable>
  );
};

export default Example;

Props

Extends the TouchableOpacityProps from React Native.

Clickable component comes with the following restyle functions:

⚠️ Note: Remember, props must match their corresponding theme keys

Restyle Function	Props	Theme Key
backgroundColor	backgroundColor [bg]	colors
spacing	margin [m], marginTop [mt], marginRight [mr], marginBottom [mb], marginLeft [ml], marginStart [ms], marginEnd[me], marginHorizontal [mx], marginVertical [my], padding [p], paddingTop [pt], paddingRight [pr], paddingBottom [pb], paddingLeft [pl], paddingStart [ps], paddingEnd [pe], paddingHorizontal [px], paddingVertical [py], gap [g], rowGap [rG], columnGap [cG]	spacing
layout	width, height, minWidth, maxWidth, minHeight, maxHeight, overflow, aspectRatio, alignContent, alignItems, alignSelf, justifyContent, flex, flexBasis, flexDirection, flexGrow, flexShrink, flexWrap	none
border	borderBottomWidth, borderLeftWidth, borderRightWidth, borderStartWidth, borderEndWidth, borderStyle, borderTopWidth, borderWidth	none
border	borderColor, borderTopColor, borderRightColor, borderLeftColor, borderStartColor, borderEndColor, borderBottomColor	colors
border	borderRadius, borderBottomLeftRadius, borderBottomRightRadius, borderBottomStartRadius, borderBottomEndRadius, borderTopLeftRadius, borderTopRightRadius, borderTopStartRadius, borderTopEndRadius	borderRadii