@niibase/uniwind 1.0.0 → 1.0.11

package/dist/module/core/native/store.js

@@ -9,6 +9,7 @@ class UniwindStoreBuilder {
   vars = {};
   runtimeThemeVariables = /* @__PURE__ */ new Map();
   stylesheet = {};
+  varsWithMediaQueries = [];
   cache = /* @__PURE__ */ new Map();
   generateStyleSheetCallbackResult = null;
   getStyles(className, state) {
@@ -36,10 +37,11 @@ class UniwindStoreBuilder {
     if (!config) {
       return;
     }
-    const { scopedVars, stylesheet, vars } = config;
+    const { scopedVars, stylesheet, vars, varsWithMediaQueries } = config;
+    this.vars = varsWithMediaQueries.length > 0 ? { ...vars } : vars;
+    this.varsWithMediaQueries = varsWithMediaQueries;
     this.generateStyleSheetCallbackResult = config;
     this.stylesheet = stylesheet;
-    this.vars = vars;
     const themeVars = scopedVars[`__uniwind-theme-${this.runtime.currentThemeName}`];
     const platformVars = scopedVars[`__uniwind-platform-${Platform.OS}`];
     const runtimeThemeVars = this.runtimeThemeVariables.get(this.runtime.currentThemeName);
@@ -56,11 +58,36 @@ class UniwindStoreBuilder {
       UniwindListener.notifyAll();
     }
   };
+  resolveMediaQueryVars(dependencies) {
+    for (const [varName, mqVariants] of this.varsWithMediaQueries) {
+      let bestMatch = null;
+      for (const variant of mqVariants) {
+        if (variant.orientation !== null) dependencies.add(StyleDependency.Orientation);
+        if (variant.maxWidth !== null || variant.minWidth !== null) dependencies.add(StyleDependency.Dimensions);
+        if (variant.colorScheme !== null) {
+          dependencies.add(StyleDependency.ColorScheme);
+          dependencies.add(StyleDependency.Theme);
+        }
+        if (variant.minWidth !== null && variant.minWidth > this.runtime.screen.width || variant.maxWidth !== null && variant.maxWidth !== Number.MAX_VALUE && variant.maxWidth < this.runtime.screen.width || variant.orientation !== null && this.runtime.orientation !== variant.orientation || variant.colorScheme !== null && this.runtime.currentThemeName !== variant.colorScheme) {
+          continue;
+        }
+        if (bestMatch === null || (variant.minWidth ?? 0) > (bestMatch.minWidth ?? 0)) bestMatch = variant;
+      }
+      if (bestMatch !== null) {
+        Object.defineProperty(this.vars, varName, {
+          configurable: true,
+          enumerable: true,
+          get: () => bestMatch.value
+        });
+      }
+    }
+    return this.vars;
+  }
   resolveStyles(classNames, state) {
     const result = {};
-    let vars = this.vars;
     const dependencies = /* @__PURE__ */ new Set();
     const bestBreakpoints = /* @__PURE__ */ new Map();
+    let vars = this.resolveMediaQueryVars(dependencies);
     for (const className of classNames.split(" ")) {
       if (!(className in this.stylesheet)) {
         continue;

package/dist/module/core/types.d.ts

@@ -22,6 +22,16 @@ export type GenerateStyleSheetsCallback = (rt: UniwindRuntime) => {
     stylesheet: StyleSheets;
     vars: Record<string, unknown>;
     scopedVars: Partial<Record<string, Record<string, unknown>>>;
+    varsWithMediaQueries: Array<[
+        string,
+        Array<{
+            value: unknown;
+            minWidth: number | null;
+            maxWidth: number | null;
+            orientation: Orientation | null;
+            colorScheme: ColorScheme | null;
+        }>
+    ]>;
 };
 type UserThemes = UniwindConfig extends {
     themes: infer T extends readonly string[];

package/package.json

@@ -1,7 +1,7 @@
 {
     "private": false,
     "name": "@niibase/uniwind",
-    "version": "1.0.0",
+    "version": "1.0.11",
     "description": "The fastest Tailwind bindings for React Native",
     "homepage": "https://uniwind.dev",
     "author": "Unistack",
@@ -84,6 +84,8 @@
     "peerDependencies": {
         "react": ">=19.0.0",
         "react-native": ">=0.81.0",
+        "react-native-gesture-handler": ">=2.28.0",
+        "react-native-svg": ">=15.15.1",
         "tailwindcss": ">=4"
     },
     "devDependencies": {
@@ -96,6 +98,9 @@
         "unbuild": "3.6.1",
         "vite": "7.2.7",
         "jest": "30.2.0",
+        "react-native-gesture-handler": "2.28.0",
+        "react-native-safe-area-context": "5.6.0",
+        "react-native-svg": "15.15.1",
         "react-test-renderer": "19.1.0",
         "@react-native/babel-preset": "0.83.0",
         "@testing-library/jest-native": "5.4.3",

package/readme.md

@@ -25,6 +25,9 @@ bun add @niibase/uniwind tailwindcss
 
 # Or install from the original package
 bun add uniwind tailwindcss
+
+# Or install @niibase/uniwind as alias for uniwind
+bun add uniwind@npm:@niibase/uniwind tailwindcss
 ```
 
 Then follow [installation guides](https://docs.uniwind.dev/quickstart)

package/src/components/react-native-gesture-handler/index.ts

@@ -0,0 +1,121 @@
+module.exports = {
+    get BaseButton() {
+        return require('./native/BaseButton').BaseButton
+    },
+    get BorderlessButton() {
+        return require('./native/BorderlessButton').BorderlessButton
+    },
+    get DrawerLayoutAndroid() {
+        return require('./native/DrawerLayoutAndroid').DrawerLayoutAndroid
+    },
+    get FlatList() {
+        return require('./native/FlatList').FlatList
+    },
+    get GestureHandlerRootView() {
+        return require('./native/GestureHandlerRootView').GestureHandlerRootView
+    },
+    get Pressable() {
+        return require('./native/Pressable').Pressable
+    },
+    get PureNativeButton() {
+        return require('./native/PureNativeButton').PureNativeButton
+    },
+    get RawButton() {
+        return require('./native/RawButton').RawButton
+    },
+    get RectButton() {
+        return require('./native/RectButton').RectButton
+    },
+    get RefreshControl() {
+        return require('./native/RefreshControl').RefreshControl
+    },
+    get ScrollView() {
+        return require('./native/ScrollView').ScrollView
+    },
+    get Switch() {
+        return require('./native/Switch').Switch
+    },
+    get Text() {
+        return require('./native/Text').Text
+    },
+    get TextInput() {
+        return require('./native/TextInput').TextInput
+    },
+    get TouchableNativeFeedback() {
+        return require('./native/TouchableNativeFeedback').TouchableNativeFeedback
+    },
+    get TouchableOpacity() {
+        return require('./native/TouchableOpacity').TouchableOpacity
+    },
+    get TouchableWithoutFeedback() {
+        return require('./native/TouchableWithoutFeedback').TouchableWithoutFeedback
+    },
+
+    // Re-export non-component exports from react-native-gesture-handler
+    get DrawerLayout() {
+        return require('react-native-gesture-handler').DrawerLayout
+    },
+    get Swipeable() {
+        return require('react-native-gesture-handler').Swipeable
+    },
+    get TouchableHighlight() {
+        return require('react-native-gesture-handler').TouchableHighlight
+    },
+    get Directions() {
+        return require('react-native-gesture-handler').Directions
+    },
+    get State() {
+        return require('react-native-gesture-handler').State
+    },
+    get PointerType() {
+        return require('react-native-gesture-handler').PointerType
+    },
+    get gestureHandlerRootHOC() {
+        return require('react-native-gesture-handler').gestureHandlerRootHOC
+    },
+    get GestureDetector() {
+        return require('react-native-gesture-handler').GestureDetector
+    },
+    get Gesture() {
+        return require('react-native-gesture-handler').Gesture
+    },
+    get TapGestureHandler() {
+        return require('react-native-gesture-handler').TapGestureHandler
+    },
+    get ForceTouchGestureHandler() {
+        return require('react-native-gesture-handler').ForceTouchGestureHandler
+    },
+    get LongPressGestureHandler() {
+        return require('react-native-gesture-handler').LongPressGestureHandler
+    },
+    get PanGestureHandler() {
+        return require('react-native-gesture-handler').PanGestureHandler
+    },
+    get PinchGestureHandler() {
+        return require('react-native-gesture-handler').PinchGestureHandler
+    },
+    get RotationGestureHandler() {
+        return require('react-native-gesture-handler').RotationGestureHandler
+    },
+    get FlingGestureHandler() {
+        return require('react-native-gesture-handler').FlingGestureHandler
+    },
+    get createNativeWrapper() {
+        return require('react-native-gesture-handler').createNativeWrapper
+    },
+    get NativeViewGestureHandler() {
+        return require('react-native-gesture-handler').NativeViewGestureHandler
+    },
+    get HoverEffect() {
+        return require('react-native-gesture-handler').HoverEffect
+    },
+    get MouseButton() {
+        return require('react-native-gesture-handler').MouseButton
+    },
+    get enableExperimentalWebImplementation() {
+        return require('react-native-gesture-handler').enableExperimentalWebImplementation
+    },
+    get enableLegacyWebImplementation() {
+        return require('react-native-gesture-handler').enableLegacyWebImplementation
+    },
+}

package/src/components/react-native-gesture-handler/native/BaseButton.tsx

@@ -0,0 +1,18 @@
+import { BaseButton as RNGHBaseButton, BaseButtonProps } from 'react-native-gesture-handler'
+import { useStyle } from '../../native/useStyle'
+import { copyComponentProperties } from '../../utils'
+
+type BaseButtonPropsWithClassName = BaseButtonProps & { className?: string }
+
+export const BaseButton = copyComponentProperties(RNGHBaseButton, (props: BaseButtonPropsWithClassName) => {
+    const style = useStyle(props.className)
+
+    return (
+        <RNGHBaseButton
+            {...props}
+            style={[style, props.style]}
+        />
+    )
+})
+
+export default BaseButton

package/src/components/react-native-gesture-handler/native/BorderlessButton.tsx

@@ -0,0 +1,19 @@
+import { BorderlessButton as RNGHBorderlessButton, BorderlessButtonProps } from 'react-native-gesture-handler'
+import { useStyle } from '../../native/useStyle'
+import { copyComponentProperties } from '../../utils'
+
+export const BorderlessButton = copyComponentProperties(
+    RNGHBorderlessButton,
+    (props: BorderlessButtonProps) => {
+        const style = useStyle(props.className)
+
+        return (
+            <RNGHBorderlessButton
+                {...props}
+                style={[style, props.style]}
+            />
+        )
+    },
+)
+
+export default BorderlessButton

package/src/components/react-native-gesture-handler/native/DrawerLayoutAndroid.tsx

@@ -0,0 +1,20 @@
+import { DrawerLayoutAndroidProps } from 'react-native'
+import { DrawerLayoutAndroid as RNGHDrawerLayoutAndroid } from 'react-native-gesture-handler'
+import { useStyle } from '../../native/useStyle'
+import { copyComponentProperties } from '../../utils'
+
+export const DrawerLayoutAndroid = copyComponentProperties(
+    RNGHDrawerLayoutAndroid,
+    (props: DrawerLayoutAndroidProps) => {
+        const style = useStyle(props.className)
+
+        return (
+            <RNGHDrawerLayoutAndroid
+                {...props}
+                style={[style, props.style]}
+            />
+        )
+    },
+)
+
+export default DrawerLayoutAndroid

package/src/components/react-native-gesture-handler/native/FlatList.tsx

@@ -0,0 +1,29 @@
+import { FlatListProps } from 'react-native'
+import { FlatList as RNGHFlatList } from 'react-native-gesture-handler'
+import { useUniwindAccent } from '../../../hooks'
+import { useStyle } from '../../native/useStyle'
+import { copyComponentProperties } from '../../utils'
+
+export const FlatList = copyComponentProperties(RNGHFlatList, (props: FlatListProps<unknown>) => {
+    const style = useStyle(props.className)
+    const styleColumnWrapper = useStyle(props.columnWrapperClassName)
+    const styleContentContainer = useStyle(props.contentContainerClassName)
+    const styleListFooterComponent = useStyle(props.ListFooterComponentClassName)
+    const styleListHeaderComponent = useStyle(props.ListHeaderComponentClassName)
+    const endFillColor = useUniwindAccent(props.endFillColorClassName)
+    const hasSingleColumn = !('numColumns' in props) || props.numColumns === 1
+
+    return (
+        <RNGHFlatList
+            {...props}
+            style={[style, props.style]}
+            columnWrapperStyle={hasSingleColumn ? undefined : [styleColumnWrapper, props.columnWrapperStyle]}
+            contentContainerStyle={[styleContentContainer, props.contentContainerStyle]}
+            ListFooterComponentStyle={[styleListFooterComponent, props.ListFooterComponentStyle]}
+            ListHeaderComponentStyle={[styleListHeaderComponent, props.ListHeaderComponentStyle]}
+            endFillColor={props.endFillColor ?? endFillColor}
+        />
+    )
+})
+
+export default FlatList

package/src/components/react-native-gesture-handler/native/GestureHandlerRootView.tsx

@@ -0,0 +1,20 @@
+import { GestureHandlerRootView as RNGestureHandlerRootView } from 'react-native-gesture-handler'
+import { GestureHandlerRootViewProps } from 'react-native-gesture-handler/lib/typescript/components/GestureHandlerRootView'
+import { useStyle } from '../../native/useStyle'
+import { copyComponentProperties } from '../../utils'
+
+export const GestureHandlerRootView = copyComponentProperties(
+    RNGestureHandlerRootView,
+    (props: GestureHandlerRootViewProps) => {
+        const style = useStyle(props.className)
+
+        return (
+            <RNGestureHandlerRootView
+                {...props}
+                style={[style, props.style]}
+            />
+        )
+    },
+)
+
+export default GestureHandlerRootView

package/src/components/react-native-gesture-handler/native/Pressable.tsx

@@ -0,0 +1,31 @@
+import { Pressable as RNGHPressable, PressableProps } from 'react-native-gesture-handler'
+import { UniwindStore } from '../../../core/native'
+import { useStyle } from '../../native/useStyle'
+import { copyComponentProperties } from '../../utils'
+
+export const Pressable = copyComponentProperties(RNGHPressable, (props: PressableProps) => {
+    const style = useStyle(props.className, {
+        isDisabled: Boolean(props.disabled),
+    })
+
+    return (
+        <RNGHPressable
+            {...props}
+            style={state => {
+                if (state.pressed) {
+                    return [
+                        UniwindStore.getStyles(
+                            props.className,
+                            { isDisabled: Boolean(props.disabled), isPressed: true },
+                        ).styles,
+                        typeof props.style === 'function' ? props.style(state) : props.style,
+                    ]
+                }
+
+                return [style, typeof props.style === 'function' ? props.style(state) : props.style]
+            }}
+        />
+    )
+})
+
+export default Pressable

package/src/components/react-native-gesture-handler/native/PureNativeButton.tsx

@@ -0,0 +1,16 @@
+import { PureNativeButton as RNGHPureNativeButton, RawButtonProps } from 'react-native-gesture-handler'
+import { useStyle } from '../../native/useStyle'
+import { copyComponentProperties } from '../../utils'
+
+export const PureNativeButton = copyComponentProperties(RNGHPureNativeButton, (props: RawButtonProps) => {
+    const style = useStyle(props.className)
+
+    return (
+        <RNGHPureNativeButton
+            {...props}
+            style={[style, props.style]}
+        />
+    )
+})
+
+export default PureNativeButton

package/src/components/react-native-gesture-handler/native/RawButton.tsx

@@ -0,0 +1,16 @@
+import { RawButton as RNGHRawButton, RawButtonProps } from 'react-native-gesture-handler'
+import { useStyle } from '../../native/useStyle'
+import { copyComponentProperties } from '../../utils'
+
+export const RawButton = copyComponentProperties(RNGHRawButton, (props: RawButtonProps) => {
+    const style = useStyle(props.className)
+
+    return (
+        <RNGHRawButton
+            {...props}
+            style={[style, props.style]}
+        />
+    )
+})
+
+export default RawButton

package/src/components/react-native-gesture-handler/native/RectButton.tsx

@@ -0,0 +1,16 @@
+import { RectButton as RNGHRectButton, RectButtonProps } from 'react-native-gesture-handler'
+import { useStyle } from '../../native/useStyle'
+import { copyComponentProperties } from '../../utils'
+
+export const RectButton = copyComponentProperties(RNGHRectButton, (props: RectButtonProps) => {
+    const style = useStyle(props.className)
+
+    return (
+        <RNGHRectButton
+            {...props}
+            style={[style, props.style]}
+        />
+    )
+})
+
+export default RectButton

package/src/components/react-native-gesture-handler/native/RefreshControl.tsx

@@ -0,0 +1,26 @@
+import { RefreshControlProps } from 'react-native'
+import { RefreshControl as RNGHRefreshControl } from 'react-native-gesture-handler'
+import { useUniwindAccent } from '../../../hooks'
+import { useStyle } from '../../native/useStyle'
+import { copyComponentProperties } from '../../utils'
+
+export const RefreshControl = copyComponentProperties(RNGHRefreshControl, (props: RefreshControlProps) => {
+    const style = useStyle(props.className)
+    const color = useUniwindAccent(props.colorsClassName)
+    const tintColor = useUniwindAccent(props.tintColorClassName)
+    const titleColor = useUniwindAccent(props.titleColorClassName)
+    const progressBackgroundColor = useUniwindAccent(props.progressBackgroundColorClassName)
+
+    return (
+        <RNGHRefreshControl
+            {...props}
+            style={[style, props.style]}
+            colors={props.colors ?? (color !== undefined ? [color] : undefined)}
+            tintColor={props.tintColor ?? tintColor}
+            titleColor={props.titleColor ?? titleColor}
+            progressBackgroundColor={props.progressBackgroundColor ?? progressBackgroundColor}
+        />
+    )
+})
+
+export default RefreshControl

package/src/components/react-native-gesture-handler/native/ScrollView.tsx

@@ -0,0 +1,22 @@
+import { ScrollViewProps } from 'react-native'
+import { ScrollView as RNGHScrollView } from 'react-native-gesture-handler'
+import { useUniwindAccent } from '../../../hooks'
+import { useStyle } from '../../native/useStyle'
+import { copyComponentProperties } from '../../utils'
+
+export const ScrollView = copyComponentProperties(RNGHScrollView, (props: ScrollViewProps) => {
+    const style = useStyle(props.className)
+    const contentContainerStyle = useStyle(props.contentContainerClassName)
+    const endFillColor = useUniwindAccent(props.endFillColorClassName)
+
+    return (
+        <RNGHScrollView
+            {...props}
+            style={[style, props.style]}
+            contentContainerStyle={[contentContainerStyle, props.contentContainerStyle]}
+            endFillColor={props.endFillColor ?? endFillColor}
+        />
+    )
+})
+
+export default ScrollView

package/src/components/react-native-gesture-handler/native/Switch.tsx

@@ -0,0 +1,29 @@
+import { SwitchProps } from 'react-native'
+import { Switch as RNGHSwitch } from 'react-native-gesture-handler'
+import { ComponentState } from '../../../core/types'
+import { useUniwindAccent } from '../../../hooks/useUniwindAccent.native'
+import { useStyle } from '../../native/useStyle'
+import { copyComponentProperties } from '../../utils'
+
+export const Switch = copyComponentProperties(RNGHSwitch, (props: SwitchProps) => {
+    const state = {
+        isDisabled: Boolean(props.disabled),
+    } satisfies ComponentState
+    const style = useStyle(props.className, state)
+    const trackColorOn = useUniwindAccent(props.trackColorOnClassName, state)
+    const trackColorOff = useUniwindAccent(props.trackColorOffClassName, state)
+    const thumbColor = useUniwindAccent(props.thumbColorClassName, state)
+    const ios_backgroundColor = useUniwindAccent(props.ios_backgroundColorClassName, state)
+
+    return (
+        <RNGHSwitch
+            {...props}
+            style={[style, props.style]}
+            thumbColor={props.thumbColor ?? thumbColor}
+            trackColor={{ true: props.trackColor?.true ?? trackColorOn, false: props.trackColor?.false ?? trackColorOff }}
+            ios_backgroundColor={props.ios_backgroundColor ?? ios_backgroundColor}
+        />
+    )
+})
+
+export default Switch

package/src/components/react-native-gesture-handler/native/Text.tsx

@@ -0,0 +1,40 @@
+import { useState } from 'react'
+import { TextProps } from 'react-native'
+import { Text as RNGHText } from 'react-native-gesture-handler'
+import { ComponentState } from '../../../core/types'
+import { useUniwindAccent } from '../../../hooks/useUniwindAccent.native'
+import { useStyle } from '../../native/useStyle'
+import { copyComponentProperties } from '../../utils'
+
+type StyleWithWebkitLineClamp = {
+    WebkitLineClamp?: number
+}
+
+export const Text = copyComponentProperties(RNGHText, (props: TextProps) => {
+    const [isPressed, setIsPressed] = useState(false)
+    const state = {
+        isPressed,
+        isDisabled: Boolean(props.disabled),
+    } satisfies ComponentState
+    const style = useStyle(props.className, state)
+    const selectionColor = useUniwindAccent(props.selectionColorClassName, state)
+
+    return (
+        <RNGHText
+            {...props}
+            style={[style, props.style]}
+            selectionColor={props.selectionColor ?? selectionColor}
+            numberOfLines={(style as StyleWithWebkitLineClamp).WebkitLineClamp ?? props.numberOfLines}
+            onPressIn={event => {
+                setIsPressed(true)
+                props.onPressIn?.(event)
+            }}
+            onPressOut={event => {
+                setIsPressed(false)
+                props.onPressOut?.(event)
+            }}
+        />
+    )
+})
+
+export default Text

package/src/components/react-native-gesture-handler/native/TextInput.tsx

@@ -0,0 +1,53 @@
+import { useState } from 'react'
+import { TextInputProps } from 'react-native'
+import { TextInput as RNGHTextInput } from 'react-native-gesture-handler'
+import { ComponentState } from '../../../core/types'
+import { useUniwindAccent } from '../../../hooks/useUniwindAccent.native'
+import { useStyle } from '../../native/useStyle'
+import { copyComponentProperties } from '../../utils'
+
+export const TextInput = copyComponentProperties(RNGHTextInput, (props: TextInputProps) => {
+    const [isFocused, setIsFocused] = useState(false)
+    const [isPressed, setIsPressed] = useState(false)
+    const state = {
+        isDisabled: props.editable === false,
+        isFocused,
+        isPressed,
+    } satisfies ComponentState
+    const style = useStyle(props.className, state)
+    const cursorColor = useUniwindAccent(props.cursorColorClassName, state)
+    const selectionColor = useUniwindAccent(props.selectionColorClassName, state)
+    const placeholderTextColor = useUniwindAccent(props.placeholderTextColorClassName, state)
+    const selectionHandleColor = useUniwindAccent(props.selectionHandleColorClassName, state)
+    const underlineColorAndroid = useUniwindAccent(props.underlineColorAndroidClassName, state)
+
+    return (
+        <RNGHTextInput
+            {...props}
+            style={[style, props.style]}
+            cursorColor={props.cursorColor ?? cursorColor}
+            selectionColor={props.selectionColor ?? selectionColor}
+            placeholderTextColor={props.placeholderTextColor ?? placeholderTextColor}
+            selectionHandleColor={props.selectionHandleColor ?? selectionHandleColor}
+            underlineColorAndroid={props.underlineColorAndroid ?? underlineColorAndroid}
+            onFocus={event => {
+                setIsFocused(true)
+                props.onFocus?.(event)
+            }}
+            onBlur={event => {
+                setIsFocused(false)
+                props.onBlur?.(event)
+            }}
+            onPressIn={event => {
+                setIsPressed(true)
+                props.onPressIn?.(event)
+            }}
+            onPressOut={event => {
+                setIsPressed(false)
+                props.onPressOut?.(event)
+            }}
+        />
+    )
+})
+
+export default TextInput

package/src/components/react-native-gesture-handler/native/TouchableNativeFeedback.tsx

@@ -0,0 +1,35 @@
+import { useState } from 'react'
+import { TouchableNativeFeedbackProps } from 'react-native'
+import { TouchableNativeFeedback as RNGHTouchableNativeFeedback } from 'react-native-gesture-handler'
+import { ComponentState } from '../../../core/types'
+import { useStyle } from '../../native/useStyle'
+import { copyComponentProperties } from '../../utils'
+
+export const TouchableNativeFeedback = copyComponentProperties(
+    RNGHTouchableNativeFeedback,
+    (props: TouchableNativeFeedbackProps) => {
+        const [isPressed, setIsPressed] = useState(false)
+        const state = {
+            isDisabled: Boolean(props.disabled),
+            isPressed,
+        } satisfies ComponentState
+        const style = useStyle(props.className, state)
+
+        return (
+            <RNGHTouchableNativeFeedback
+                {...props}
+                style={[style, props.style]}
+                onPressIn={event => {
+                    setIsPressed(true)
+                    props.onPressIn?.(event)
+                }}
+                onPressOut={event => {
+                    setIsPressed(false)
+                    props.onPressOut?.(event)
+                }}
+            />
+        )
+    },
+)
+
+export default TouchableNativeFeedback