react-native-terra-ui 0.13.5 → 0.13.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +6 -0
- package/lib/module/components/header/variants/LargeTitleHeader/parts/LargeTitleContent.js +1 -1
- package/lib/module/components/header/variants/LargeTitleHeader/parts/LargeTitleContent.js.map +1 -1
- package/lib/module/components/pressable/index.js +1 -0
- package/lib/module/components/pressable/index.js.map +1 -1
- package/lib/module/components/pressable/variants/PressableOpacity/index.js +79 -0
- package/lib/module/components/pressable/variants/PressableOpacity/index.js.map +1 -0
- package/lib/typescript/src/components/header/variants/LargeTitleHeader/parts/LargeTitleContent.d.ts.map +1 -1
- package/lib/typescript/src/components/pressable/index.d.ts +2 -0
- package/lib/typescript/src/components/pressable/index.d.ts.map +1 -1
- package/lib/typescript/src/components/pressable/variants/PressableOpacity/index.d.ts +23 -0
- package/lib/typescript/src/components/pressable/variants/PressableOpacity/index.d.ts.map +1 -0
- package/package.json +1 -1
- package/src/components/header/variants/LargeTitleHeader/parts/LargeTitleContent.tsx +1 -1
- package/src/components/pressable/index.ts +2 -0
- package/src/components/pressable/variants/PressableOpacity/index.tsx +114 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## [0.13.6](https://github.com/earthlin9/react-native-terra-ui/compare/v0.13.5...v0.13.6) (2026-10-04)
|
|
4
|
+
|
|
5
|
+
### Features
|
|
6
|
+
|
|
7
|
+
* add PressableOpacity and make large title default to title-1 ([e2d4f50](https://github.com/earthlin9/react-native-terra-ui/commit/e2d4f501902a10ccc3ea888767fcabaaea4ec353))
|
|
8
|
+
|
|
3
9
|
## [0.13.5](https://github.com/earthlin9/react-native-terra-ui/compare/v0.13.4...v0.13.5) (2026-10-04)
|
|
4
10
|
|
|
5
11
|
### Bug Fixes
|
|
@@ -9,7 +9,7 @@ import { isTextTitle } from "../../../utils.js";
|
|
|
9
9
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
10
10
|
export function LargeTitleContent({
|
|
11
11
|
title,
|
|
12
|
-
largeTitleVariant = "
|
|
12
|
+
largeTitleVariant = "title-1",
|
|
13
13
|
largeTitleWeight = "semibold",
|
|
14
14
|
overline,
|
|
15
15
|
subtitle,
|
package/lib/module/components/header/variants/LargeTitleHeader/parts/LargeTitleContent.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["Animated","StyleSheet","useUnistyles","FONT_WEIGHT_VALUE","SYSTEM_FONT","Text","ThemedText","isTextTitle","jsx","_jsx","jsxs","_jsxs","LargeTitleContent","title","largeTitleVariant","largeTitleWeight","overline","subtitle","hasAccessoryBelow","onHeightChange","animatedStyle","theme","handleLayout","event","nativeEvent","layout","height","View","style","styles","portalContent","onLayout","children","maxFontSizeMultiplier","typography","variants","variant","weight","create","overlineWeight","fontWeight","overlineFont","fonts","isSystemOverlineFont","subtitleWeight","subtitleFont","isSystemSubtitleFont","gap","spacing","paddingBottom","paddingHorizontal","screen","padding","x","uni__dependencies","fontSize","lineHeight","letterSpacing","fontFamily","undefined","color"],"sourceRoot":"../../../../../../../src","sources":["components/header/variants/LargeTitleHeader/parts/LargeTitleContent.tsx"],"mappings":";;;AAGA,OAAOA,QAAQ,MAAM,yBAAyB;AAC9C,SAASC,UAAU,EAAEC,YAAY,QAAQ,wBAAwB;AAEjE,SAASC,iBAAiB,EAAEC,WAAW;AACvC,SAASC,IAAI,IAAIC,UAAU;AAC3B,SAASC,WAAW;AAAyB,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAG7C,OAAO,SAASC,iBAAiBA,CAAC;EAChCC,KAAK;EACLC,iBAAiB,GAAG,
|
|
1
|
+
{"version":3,"names":["Animated","StyleSheet","useUnistyles","FONT_WEIGHT_VALUE","SYSTEM_FONT","Text","ThemedText","isTextTitle","jsx","_jsx","jsxs","_jsxs","LargeTitleContent","title","largeTitleVariant","largeTitleWeight","overline","subtitle","hasAccessoryBelow","onHeightChange","animatedStyle","theme","handleLayout","event","nativeEvent","layout","height","View","style","styles","portalContent","onLayout","children","maxFontSizeMultiplier","typography","variants","variant","weight","create","overlineWeight","fontWeight","overlineFont","fonts","isSystemOverlineFont","subtitleWeight","subtitleFont","isSystemSubtitleFont","gap","spacing","paddingBottom","paddingHorizontal","screen","padding","x","uni__dependencies","fontSize","lineHeight","letterSpacing","fontFamily","undefined","color"],"sourceRoot":"../../../../../../../src","sources":["components/header/variants/LargeTitleHeader/parts/LargeTitleContent.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["PressableScale"],"sourceRoot":"../../../../src","sources":["components/pressable/index.ts"],"mappings":";;
|
|
1
|
+
{"version":3,"names":["PressableOpacity","PressableScale"],"sourceRoot":"../../../../src","sources":["components/pressable/index.ts"],"mappings":";;AACA,SAASA,gBAAgB;AAKzB,SAASC,cAAc","ignoreList":[]}
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import { Pressable } from "react-native-unistyles/components/native/Pressable";
|
|
4
|
+
import { forwardRef, useCallback, useEffect, useState } from "react";
|
|
5
|
+
import Animated, { Easing, interpolate, useAnimatedStyle, useSharedValue, withTiming } from "react-native-reanimated";
|
|
6
|
+
import { StyleSheet } from "react-native-unistyles";
|
|
7
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
8
|
+
const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
|
|
9
|
+
const DEFAULT_TIMING = {
|
|
10
|
+
duration: 150,
|
|
11
|
+
easing: Easing.bezier(0.25, 0.1, 0.25, 1)
|
|
12
|
+
};
|
|
13
|
+
/**
|
|
14
|
+
* A `Pressable` that fades to `activeOpacity` while pressed, driven by a shared
|
|
15
|
+
* value on the UI thread. Use it for text links, icon buttons and other
|
|
16
|
+
* controls where a scale change would look out of place.
|
|
17
|
+
*/
|
|
18
|
+
export const PressableOpacity = /*#__PURE__*/forwardRef(function PressableOpacity({
|
|
19
|
+
activeOpacity = 0.6,
|
|
20
|
+
timingConfig,
|
|
21
|
+
isDisabled = false,
|
|
22
|
+
style,
|
|
23
|
+
onPressIn,
|
|
24
|
+
onPressOut,
|
|
25
|
+
...rest
|
|
26
|
+
}, ref) {
|
|
27
|
+
const progress = useSharedValue(0);
|
|
28
|
+
|
|
29
|
+
// Only the function form of `style` needs a re-render to resolve.
|
|
30
|
+
const isStyleFunction = typeof style === "function";
|
|
31
|
+
const [pressed, setPressed] = useState(false);
|
|
32
|
+
const animateTo = useCallback(to => {
|
|
33
|
+
progress.value = withTiming(to, {
|
|
34
|
+
...DEFAULT_TIMING,
|
|
35
|
+
...timingConfig
|
|
36
|
+
});
|
|
37
|
+
}, [timingConfig, progress]);
|
|
38
|
+
const handlePressIn = useCallback(event => {
|
|
39
|
+
animateTo(1);
|
|
40
|
+
if (isStyleFunction) setPressed(true);
|
|
41
|
+
onPressIn?.(event);
|
|
42
|
+
}, [animateTo, isStyleFunction, onPressIn]);
|
|
43
|
+
const handlePressOut = useCallback(event => {
|
|
44
|
+
animateTo(0);
|
|
45
|
+
if (isStyleFunction) setPressed(false);
|
|
46
|
+
onPressOut?.(event);
|
|
47
|
+
}, [animateTo, isStyleFunction, onPressOut]);
|
|
48
|
+
|
|
49
|
+
// A press that disables its own pressable never gets an `onPressOut`.
|
|
50
|
+
useEffect(() => {
|
|
51
|
+
if (!isDisabled) return;
|
|
52
|
+
animateTo(0);
|
|
53
|
+
setPressed(false);
|
|
54
|
+
}, [isDisabled, animateTo]);
|
|
55
|
+
const animatedStyle = useAnimatedStyle(() => ({
|
|
56
|
+
opacity: interpolate(progress.value, [0, 1], [1, activeOpacity])
|
|
57
|
+
}));
|
|
58
|
+
const pressableState = {
|
|
59
|
+
pressed
|
|
60
|
+
};
|
|
61
|
+
return /*#__PURE__*/_jsx(AnimatedPressable, {
|
|
62
|
+
ref: ref,
|
|
63
|
+
disabled: isDisabled,
|
|
64
|
+
...rest,
|
|
65
|
+
onPressIn: handlePressIn,
|
|
66
|
+
onPressOut: handlePressOut
|
|
67
|
+
// The animated style goes first so anything the caller sets — a disabled
|
|
68
|
+
// opacity, say — still wins.
|
|
69
|
+
,
|
|
70
|
+
style: [styles.root, animatedStyle, isStyleFunction ? style(pressableState) : style]
|
|
71
|
+
});
|
|
72
|
+
});
|
|
73
|
+
|
|
74
|
+
// Empty on purpose: the stylesheet makes the Unistyles Babel plugin swap in its
|
|
75
|
+
// Unistyles-aware `Pressable`, so themed styles passed via `style` follow theme changes.
|
|
76
|
+
const styles = StyleSheet.create(() => ({
|
|
77
|
+
root: {}
|
|
78
|
+
}));
|
|
79
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["forwardRef","useCallback","useEffect","useState","Animated","Easing","interpolate","useAnimatedStyle","useSharedValue","withTiming","StyleSheet","jsx","_jsx","AnimatedPressable","createAnimatedComponent","Pressable","DEFAULT_TIMING","duration","easing","bezier","PressableOpacity","activeOpacity","timingConfig","isDisabled","style","onPressIn","onPressOut","rest","ref","progress","isStyleFunction","pressed","setPressed","animateTo","to","value","handlePressIn","event","handlePressOut","animatedStyle","opacity","pressableState","disabled","styles","root","create"],"sourceRoot":"../../../../../../src","sources":["components/pressable/variants/PressableOpacity/index.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LargeTitleContent.d.ts","sourceRoot":"","sources":["../../../../../../../../src/components/header/variants/LargeTitleHeader/parts/LargeTitleContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAG5C,OAAO,QAAQ,MAAM,yBAAyB,CAAC;AAM/C,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,aAAI,CAAC;AAEhD,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,
|
|
1
|
+
{"version":3,"file":"LargeTitleContent.d.ts","sourceRoot":"","sources":["../../../../../../../../src/components/header/variants/LargeTitleHeader/parts/LargeTitleContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAG5C,OAAO,QAAQ,MAAM,yBAAyB,CAAC;AAM/C,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,aAAI,CAAC;AAEhD,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,iBAA6B,EAC7B,gBAA6B,EAC7B,QAAQ,EACR,QAAQ,EACR,iBAAiB,EACjB,cAAc,EACd,aAAa,GACd,EAAE,IAAI,CACL,qBAAqB,EACrB,OAAO,GAAG,mBAAmB,GAAG,kBAAkB,GAAG,UAAU,GAAG,UAAU,CAC7E,GAAG;IACF,gEAAgE;IAChE,iBAAiB,EAAE,OAAO,CAAC;IAC3B,2DAA2D;IAC3D,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,aAAa,EAAE,cAAc,CAAC,OAAO,QAAQ,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC;CAC9D,+BAgCA"}
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
export type { PressableOpacityProps } from "./variants/PressableOpacity/index.js";
|
|
2
|
+
export { PressableOpacity } from "./variants/PressableOpacity/index.js";
|
|
1
3
|
export type { PressableScaleAnimationConfig, PressableScaleProps, } from "./variants/PressableScale/index.js";
|
|
2
4
|
export { PressableScale } from "./variants/PressableScale/index.js";
|
|
3
5
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/pressable/index.ts"],"names":[],"mappings":"AAAA,YAAY,EACV,6BAA6B,EAC7B,mBAAmB,GACpB,MAAM,oCAA2B,CAAC;AACnC,OAAO,EAAE,cAAc,EAAE,MAAM,oCAA2B,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/pressable/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,qBAAqB,EAAE,MAAM,sCAA6B,CAAC;AACzE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAA6B,CAAC;AAC/D,YAAY,EACV,6BAA6B,EAC7B,mBAAmB,GACpB,MAAM,oCAA2B,CAAC;AACnC,OAAO,EAAE,cAAc,EAAE,MAAM,oCAA2B,CAAC"}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import type { PressableProps, PressableStateCallbackType, StyleProp, ViewStyle } from "react-native";
|
|
2
|
+
import { type WithTimingConfig } from "react-native-reanimated";
|
|
3
|
+
export interface PressableOpacityProps extends Omit<PressableProps, "style" | "disabled"> {
|
|
4
|
+
/** Opacity held while pressed. Defaults to `0.6`. */
|
|
5
|
+
activeOpacity?: number;
|
|
6
|
+
/** Timing config for the opacity transition. Defaults to a 150ms ease. */
|
|
7
|
+
timingConfig?: WithTimingConfig;
|
|
8
|
+
/** Blocks presses and releases the pressed opacity. Defaults to `false`. */
|
|
9
|
+
isDisabled?: boolean;
|
|
10
|
+
/**
|
|
11
|
+
* Styles for the pressable itself. The function form receives `pressed`
|
|
12
|
+
* only — `hovered` and `focused` are not tracked, because the animated
|
|
13
|
+
* style has to be merged outside of `Pressable`'s own callback.
|
|
14
|
+
*/
|
|
15
|
+
style?: StyleProp<ViewStyle> | ((state: PressableStateCallbackType) => StyleProp<ViewStyle>);
|
|
16
|
+
}
|
|
17
|
+
/**
|
|
18
|
+
* A `Pressable` that fades to `activeOpacity` while pressed, driven by a shared
|
|
19
|
+
* value on the UI thread. Use it for text links, icon buttons and other
|
|
20
|
+
* controls where a scale change would look out of place.
|
|
21
|
+
*/
|
|
22
|
+
export declare const PressableOpacity: import("react").ForwardRefExoticComponent<PressableOpacityProps & import("react").RefAttributes<import("react-native/types_generated/src/private/webapis/dom/nodes/ReactNativeElement").default>>;
|
|
23
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/pressable/variants/PressableOpacity/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAEV,cAAc,EACd,0BAA0B,EAC1B,SAAS,EACT,SAAS,EACV,MAAM,cAAc,CAAC;AAGtB,OAAiB,EAKf,KAAK,gBAAgB,EAEtB,MAAM,yBAAyB,CAAC;AAUjC,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CAAC,cAAc,EAAE,OAAO,GAAG,UAAU,CAAC;IACvF,qDAAqD;IACrD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,0EAA0E;IAC1E,YAAY,CAAC,EAAE,gBAAgB,CAAC;IAChC,4EAA4E;IAC5E,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,0BAA0B,KAAK,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC;CAC9F;AAED;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,mMA8D5B,CAAC"}
|
package/package.json
CHANGED
|
@@ -0,0 +1,114 @@
|
|
|
1
|
+
import { type ComponentRef, forwardRef, useCallback, useEffect, useState } from "react";
|
|
2
|
+
import type {
|
|
3
|
+
GestureResponderEvent,
|
|
4
|
+
PressableProps,
|
|
5
|
+
PressableStateCallbackType,
|
|
6
|
+
StyleProp,
|
|
7
|
+
ViewStyle,
|
|
8
|
+
} from "react-native";
|
|
9
|
+
import { Pressable } from "react-native";
|
|
10
|
+
|
|
11
|
+
import Animated, {
|
|
12
|
+
Easing,
|
|
13
|
+
interpolate,
|
|
14
|
+
useAnimatedStyle,
|
|
15
|
+
useSharedValue,
|
|
16
|
+
type WithTimingConfig,
|
|
17
|
+
withTiming,
|
|
18
|
+
} from "react-native-reanimated";
|
|
19
|
+
import { StyleSheet } from "react-native-unistyles";
|
|
20
|
+
|
|
21
|
+
const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
|
|
22
|
+
|
|
23
|
+
const DEFAULT_TIMING: WithTimingConfig = {
|
|
24
|
+
duration: 150,
|
|
25
|
+
easing: Easing.bezier(0.25, 0.1, 0.25, 1),
|
|
26
|
+
};
|
|
27
|
+
|
|
28
|
+
export interface PressableOpacityProps extends Omit<PressableProps, "style" | "disabled"> {
|
|
29
|
+
/** Opacity held while pressed. Defaults to `0.6`. */
|
|
30
|
+
activeOpacity?: number;
|
|
31
|
+
/** Timing config for the opacity transition. Defaults to a 150ms ease. */
|
|
32
|
+
timingConfig?: WithTimingConfig;
|
|
33
|
+
/** Blocks presses and releases the pressed opacity. Defaults to `false`. */
|
|
34
|
+
isDisabled?: boolean;
|
|
35
|
+
/**
|
|
36
|
+
* Styles for the pressable itself. The function form receives `pressed`
|
|
37
|
+
* only — `hovered` and `focused` are not tracked, because the animated
|
|
38
|
+
* style has to be merged outside of `Pressable`'s own callback.
|
|
39
|
+
*/
|
|
40
|
+
style?: StyleProp<ViewStyle> | ((state: PressableStateCallbackType) => StyleProp<ViewStyle>);
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
/**
|
|
44
|
+
* A `Pressable` that fades to `activeOpacity` while pressed, driven by a shared
|
|
45
|
+
* value on the UI thread. Use it for text links, icon buttons and other
|
|
46
|
+
* controls where a scale change would look out of place.
|
|
47
|
+
*/
|
|
48
|
+
export const PressableOpacity = forwardRef<ComponentRef<typeof Pressable>, PressableOpacityProps>(
|
|
49
|
+
function PressableOpacity(
|
|
50
|
+
{ activeOpacity = 0.6, timingConfig, isDisabled = false, style, onPressIn, onPressOut, ...rest },
|
|
51
|
+
ref
|
|
52
|
+
) {
|
|
53
|
+
const progress = useSharedValue(0);
|
|
54
|
+
|
|
55
|
+
// Only the function form of `style` needs a re-render to resolve.
|
|
56
|
+
const isStyleFunction = typeof style === "function";
|
|
57
|
+
const [pressed, setPressed] = useState(false);
|
|
58
|
+
|
|
59
|
+
const animateTo = useCallback(
|
|
60
|
+
(to: number) => {
|
|
61
|
+
progress.value = withTiming(to, { ...DEFAULT_TIMING, ...timingConfig });
|
|
62
|
+
},
|
|
63
|
+
[timingConfig, progress]
|
|
64
|
+
);
|
|
65
|
+
|
|
66
|
+
const handlePressIn = useCallback(
|
|
67
|
+
(event: GestureResponderEvent) => {
|
|
68
|
+
animateTo(1);
|
|
69
|
+
if (isStyleFunction) setPressed(true);
|
|
70
|
+
onPressIn?.(event);
|
|
71
|
+
},
|
|
72
|
+
[animateTo, isStyleFunction, onPressIn]
|
|
73
|
+
);
|
|
74
|
+
|
|
75
|
+
const handlePressOut = useCallback(
|
|
76
|
+
(event: GestureResponderEvent) => {
|
|
77
|
+
animateTo(0);
|
|
78
|
+
if (isStyleFunction) setPressed(false);
|
|
79
|
+
onPressOut?.(event);
|
|
80
|
+
},
|
|
81
|
+
[animateTo, isStyleFunction, onPressOut]
|
|
82
|
+
);
|
|
83
|
+
|
|
84
|
+
// A press that disables its own pressable never gets an `onPressOut`.
|
|
85
|
+
useEffect(() => {
|
|
86
|
+
if (!isDisabled) return;
|
|
87
|
+
animateTo(0);
|
|
88
|
+
setPressed(false);
|
|
89
|
+
}, [isDisabled, animateTo]);
|
|
90
|
+
|
|
91
|
+
const animatedStyle = useAnimatedStyle(() => ({
|
|
92
|
+
opacity: interpolate(progress.value, [0, 1], [1, activeOpacity]),
|
|
93
|
+
}));
|
|
94
|
+
|
|
95
|
+
const pressableState: PressableStateCallbackType = { pressed };
|
|
96
|
+
|
|
97
|
+
return (
|
|
98
|
+
<AnimatedPressable
|
|
99
|
+
ref={ref}
|
|
100
|
+
disabled={isDisabled}
|
|
101
|
+
{...rest}
|
|
102
|
+
onPressIn={handlePressIn}
|
|
103
|
+
onPressOut={handlePressOut}
|
|
104
|
+
// The animated style goes first so anything the caller sets — a disabled
|
|
105
|
+
// opacity, say — still wins.
|
|
106
|
+
style={[styles.root, animatedStyle, isStyleFunction ? style(pressableState) : style]}
|
|
107
|
+
/>
|
|
108
|
+
);
|
|
109
|
+
}
|
|
110
|
+
);
|
|
111
|
+
|
|
112
|
+
// Empty on purpose: the stylesheet makes the Unistyles Babel plugin swap in its
|
|
113
|
+
// Unistyles-aware `Pressable`, so themed styles passed via `style` follow theme changes.
|
|
114
|
+
const styles = StyleSheet.create(() => ({ root: {} }));
|