feat: Add touchable components and update package version to 0.1.25

CHANGELOG.md

@@ -1,5 +1,13 @@
 # expo-nativewind-components
 
+## 0.1.25
+
+### Patch Changes
+
+- Added touchable opacity component
+- Added touchable without feedback component
+- Added touchable highlight component
+
 ## 0.1.24
 
 ### Patch Changes

package.json

@@ -1,6 +1,6 @@
 {
   "name": "expo-nativewind-components",
-  "version": "0.1.24",
+  "version": "0.1.25",
   "description": "React Native components supercharged with Native Wind",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

src/components/StyledWindTouchableHighlight.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { styled } from "nativewind";
+import { StyledWindTouchableHighlightProps } from "../types";
+import { TouchableHighlight } from "react-native";
+
+const StyledWindTouchableHighlightComp = styled(TouchableHighlight);
+
+export const StyledWindTouchableHighlight: React.FC<
+  StyledWindTouchableHighlightProps
+> = ({ children, className, style, ...rest }) => {
+  return (
+    <StyledWindTouchableHighlightComp
+      className={className}
+      style={style}
+      {...rest}
+    >
+      {children}
+    </StyledWindTouchableHighlightComp>
+  );
+};

src/components/StyledWindTouchableOpacity.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { styled } from "nativewind";
+import { StyledWindTouchableOpacityProps } from "../types";
+import { TouchableOpacity } from "react-native";
+
+const StyledWindTouchableOpacityComp = styled(TouchableOpacity);
+
+export const StyledWindTouchableOpacity: React.FC<
+  StyledWindTouchableOpacityProps
+> = ({ children, className, style, ...rest }) => {
+  return (
+    <StyledWindTouchableOpacityComp
+      className={className}
+      style={style}
+      {...rest}
+    >
+      {children}
+    </StyledWindTouchableOpacityComp>
+  );
+};

src/components/StyledWindTouchableWithoutFeedback.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { styled } from "nativewind";
+import { StyledWindTouchableWithoutFeedbackProps } from "../types";
+import { TouchableWithoutFeedback } from "react-native";
+
+const StyledWindTouchableWithoutFeedbackComp = styled(TouchableWithoutFeedback);
+
+export const StyledWindTouchableWithoutFeedback: React.FC<
+  StyledWindTouchableWithoutFeedbackProps
+> = ({ children, className, style, ...rest }) => {
+  return (
+    <StyledWindTouchableWithoutFeedbackComp
+      className={className}
+      style={style}
+      {...rest}
+    >
+      {children}
+    </StyledWindTouchableWithoutFeedbackComp>
+  );
+};

src/index.ts

@@ -11,3 +11,6 @@ export * from "./components/StyledWindKeyboardAvoidingView";
 export * from "./components/StyledWindModal";
 export * from "./components/StyledWindRefreshControl";
 export * from "./components/StyledWindTextInput";
+export * from "./components/StyledWindTouchableHighlight";
+export * from "./components/StyledWindTouchableOpacity";
+export * from "./components/StyledWindTouchableWithoutFeedback";

src/types.ts

@@ -8,8 +8,11 @@ import {
   type ScrollViewProps,
   type KeyboardAvoidingViewProps,
   type ModalProps,
-  RefreshControlProps,
-  TextInputProps,
+  type RefreshControlProps,
+  type TextInputProps,
+  type TouchableHighlightProps,
+  type TouchableOpacityProps,
+  type TouchableWithoutFeedbackProps,
 } from "react-native";
 import { type ImageProps as ExpoImageProps } from "expo-image";
 import React from "react";
@@ -77,3 +80,22 @@ export type StyledWindTextInputProps = TextInputProps & {
   className?: string;
   style?: object;
 };
+
+export type StyledWindTouchableHighlightProps = TouchableHighlightProps & {
+  className?: string;
+  style?: object;
+  children?: React.ReactNode;
+};
+
+export type StyledWindTouchableOpacityProps = TouchableOpacityProps & {
+  className?: string;
+  style?: object;
+  children?: React.ReactNode;
+};
+
+export type StyledWindTouchableWithoutFeedbackProps =
+  TouchableWithoutFeedbackProps & {
+    className?: string;
+    style?: object;
+    children?: React.ReactNode;
+  };