expo-dev-client-components 1.4.0 → 1.5.0

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.
Files changed (12) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/build/Button.d.ts +6 -4
  3. package/build/Button.d.ts.map +1 -1
  4. package/build/Button.js +27 -26
  5. package/build/Button.js.map +1 -1
  6. package/build/View.d.ts +4 -4
  7. package/build/View.d.ts.map +1 -1
  8. package/build/View.js +10 -0
  9. package/build/View.js.map +1 -1
  10. package/package.json +2 -2
  11. package/src/Button.tsx +47 -31
  12. package/src/View.tsx +12 -0
package/CHANGELOG.md CHANGED
@@ -10,6 +10,16 @@
10
10
 
11
11
  ### 💡 Others
12
12
 
13
+ ## 1.5.0 — 2023-06-21
14
+
15
+ ### 🐛 Bug fixes
16
+
17
+ - Fixed Spacers background color in dark mode. ([#22612](https://github.com/expo/expo/pull/22612) by [@gabrieldonadel](https://github.com/gabrieldonadel))
18
+
19
+ ### 💡 Others
20
+
21
+ - Replace buttons bounce animation with fading animation. ([#22681](https://github.com/expo/expo/pull/22681) by [@gabrieldonadel](https://github.com/gabrieldonadel))
22
+
13
23
  ## 1.4.0 — 2023-05-08
14
24
 
15
25
  _This version does not introduce any user-facing changes._
package/build/Button.d.ts CHANGED
@@ -51,7 +51,8 @@ export declare const Button: {
51
51
  dark?: (import("react-native").ViewStyle | import("react-native").TextStyle | import("react-native").ImageStyle) | undefined;
52
52
  } | undefined;
53
53
  }, "selectors" | "padding" | "margin" | keyof import("react-native").PressableProps | "key" | "bg" | "border" | "shadow" | "mx" | "my" | "mb" | "mt" | "px" | "py" | "pb" | "pt" | "rounded" | "roundedTop" | "roundedBottom"> & React.RefAttributes<Animated.AnimatedProps<import("react-native").PressableProps & React.RefAttributes<import("react-native").View>>>>;
54
- ScaleOnPressContainer: typeof ScaleOnPressContainer;
54
+ FadeOnPressContainer: typeof FadeOnPressContainer;
55
+ HighlightOnPressContainer: typeof HighlightOnPressContainer;
55
56
  Text: React.ForwardRefExoticComponent<import("react-native").TextProps & {
56
57
  children?: React.ReactNode;
57
58
  } & {
@@ -68,9 +69,10 @@ export declare const Button: {
68
69
  } | undefined;
69
70
  } & React.RefAttributes<import("react-native").TextProps>>;
70
71
  };
71
- type ScalingPressableProps = {
72
- minScale?: number;
72
+ type FadingPressableProps = {
73
+ activeOpacity?: number;
73
74
  };
74
- declare function ScaleOnPressContainer({ minScale, ...props }: React.ComponentProps<typeof Container> & ScalingPressableProps): JSX.Element;
75
+ declare function FadeOnPressContainer({ activeOpacity, ...props }: React.ComponentProps<typeof Container> & FadingPressableProps): JSX.Element;
76
+ declare function HighlightOnPressContainer(props: React.ComponentProps<typeof Container>): JSX.Element;
75
77
  export {};
76
78
  //# sourceMappingURL=Button.d.ts.map
package/build/Button.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../src/Button.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAkB,QAAQ,EAA4C,MAAM,cAAc,CAAC;AAkDlG,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;uWAgDb,CAAC;AAEH,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAIlB,CAAC;AAEF,KAAK,qBAAqB,GAAG;IAC3B,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAkCF,iBAAS,qBAAqB,CAAC,EAC7B,QAAgB,EAChB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,GAAG,qBAAqB,eAoDhE"}
1
+ {"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../src/Button.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAEL,QAAQ,EAIT,MAAM,cAAc,CAAC;AAkDtB,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;uWAgDb,CAAC;AAEH,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAKlB,CAAC;AAEF,KAAK,oBAAoB,GAAG;IAC1B,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAkCF,iBAAS,oBAAoB,CAAC,EAC5B,aAAmB,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,GAAG,oBAAoB,eAgC/D;AAED,iBAAS,yBAAyB,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,eA2B/E"}
package/build/Button.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { lightTheme, darkTheme, borderRadius, shadows, palette } from '@expo/styleguide-native';
2
2
  import * as React from 'react';
3
- import { Text as RNText, Animated, useColorScheme, Pressable as RNPressable } from 'react-native';
3
+ import { Text as RNText, Animated, useColorScheme, Pressable as RNPressable, Easing, } from 'react-native';
4
4
  import { create } from './create-primitive';
5
5
  import { rounded, margin, padding, text } from './theme';
6
6
  const AnimatedPressable = Animated.createAnimatedComponent(RNPressable);
@@ -86,7 +86,8 @@ const Container = create(AnimatedPressable, {
86
86
  });
87
87
  export const Button = {
88
88
  Container,
89
- ScaleOnPressContainer,
89
+ FadeOnPressContainer,
90
+ HighlightOnPressContainer,
90
91
  Text,
91
92
  };
92
93
  const lightHighlightColorMap = {
@@ -111,37 +112,37 @@ const highlightColorMap = {
111
112
  dark: darkHighlightColorMap,
112
113
  light: lightHighlightColorMap,
113
114
  };
114
- function ScaleOnPressContainer({ minScale = 0.975, ...props }) {
115
- const theme = useColorScheme();
116
- const animatedValue = React.useRef(new Animated.Value(0));
117
- const [isPressing, setIsPressing] = React.useState(false);
115
+ function FadeOnPressContainer({ activeOpacity = 0.2, ...props }) {
116
+ const animatedValue = React.useRef(new Animated.Value(1));
118
117
  const onPressIn = React.useCallback(() => {
119
- setIsPressing(true);
120
- Animated.spring(animatedValue.current, {
121
- toValue: 1,
122
- stiffness: 1000,
123
- damping: 500,
124
- mass: 3,
125
- overshootClamping: true,
118
+ Animated.timing(animatedValue.current, {
119
+ toValue: activeOpacity,
120
+ duration: 150,
121
+ easing: Easing.inOut(Easing.quad),
126
122
  useNativeDriver: true,
127
123
  }).start();
128
124
  }, []);
129
125
  const onPressOut = React.useCallback(() => {
130
- setIsPressing(false);
131
- Animated.spring(animatedValue.current, {
132
- toValue: 0,
133
- stiffness: 1000,
134
- damping: 500,
135
- mass: 3,
136
- overshootClamping: true,
126
+ Animated.timing(animatedValue.current, {
127
+ toValue: 1,
128
+ duration: 150,
129
+ easing: Easing.inOut(Easing.quad),
137
130
  useNativeDriver: true,
138
131
  }).start();
139
132
  }, []);
140
- const scale = animatedValue.current.interpolate({
141
- inputRange: [0, 1],
142
- outputRange: [1, minScale],
143
- });
144
- const scaleStyle = { transform: [{ scale }] };
133
+ return (React.createElement(Container, { onPressIn: onPressIn, onPressOut: onPressOut, ...props, style: {
134
+ opacity: animatedValue.current,
135
+ } }, props.children));
136
+ }
137
+ function HighlightOnPressContainer(props) {
138
+ const theme = useColorScheme();
139
+ const [isPressing, setIsPressing] = React.useState(false);
140
+ const onPressIn = React.useCallback(() => {
141
+ setIsPressing(true);
142
+ }, []);
143
+ const onPressOut = React.useCallback(() => {
144
+ setIsPressing(false);
145
+ }, []);
145
146
  let backgroundColor = 'transparent';
146
147
  if (props.bg && isPressing && theme != null) {
147
148
  backgroundColor = highlightColorMap[theme][props.bg];
@@ -149,7 +150,7 @@ function ScaleOnPressContainer({ minScale = 0.975, ...props }) {
149
150
  const underlayStyle = {
150
151
  backgroundColor,
151
152
  };
152
- return (React.createElement(Container, { onPressIn: onPressIn, onPressOut: onPressOut, ...props, style: [scaleStyle] },
153
+ return (React.createElement(Container, { onPressIn: onPressIn, onPressOut: onPressOut, ...props },
153
154
  React.createElement(Animated.View, { style: underlayStyle }, props.children)));
154
155
  }
155
156
  //# sourceMappingURL=Button.js.map
package/build/Button.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Button.js","sourceRoot":"","sources":["../src/Button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { lightTheme, darkTheme, borderRadius, shadows, palette } from '@expo/styleguide-native';\nimport * as React from 'react';\nimport { Text as RNText, Animated, useColorScheme, Pressable as RNPressable } from 'react-native';\n\nimport { create } from './create-primitive';\nimport { rounded, margin, padding, text } from './theme';\n\nconst AnimatedPressable = Animated.createAnimatedComponent(RNPressable);\n\nconst Text = create(RNText, {\n base: {\n fontFamily: 'Inter-Regular',\n color: lightTheme.text.default,\n fontSize: 16,\n lineHeight: 22,\n },\n\n props: {\n accessibilityRole: 'text',\n },\n\n variants: {\n ...text,\n\n color: {\n primary: { color: lightTheme.button.primary.foreground },\n secondary: { color: lightTheme.button.secondary.foreground },\n tertiary: { color: lightTheme.button.tertiary.foreground },\n ghost: { color: lightTheme.button.ghost.foreground },\n transparent: { color: lightTheme.button.transparent.foreground },\n default: { color: lightTheme.text.default },\n },\n },\n\n selectors: {\n dark: {\n base: {\n color: darkTheme.text.default,\n },\n\n color: {\n primary: { color: darkTheme.button.primary.foreground },\n secondary: { color: darkTheme.button.secondary.foreground },\n tertiary: { color: darkTheme.button.tertiary.foreground },\n ghost: { color: darkTheme.button.ghost.foreground },\n transparent: { color: darkTheme.button.transparent.foreground },\n default: { color: darkTheme.text.default },\n },\n },\n },\n});\n\nconst Container = create(AnimatedPressable, {\n base: {\n overflow: 'hidden',\n borderRadius: borderRadius.medium,\n },\n\n props: {\n accessibilityRole: 'button',\n android_disableSound: true,\n },\n\n variants: {\n bg: {\n default: { backgroundColor: lightTheme.background.default },\n primary: { backgroundColor: lightTheme.button.primary.background },\n secondary: { backgroundColor: lightTheme.button.secondary.background },\n tertiary: { backgroundColor: lightTheme.button.tertiary.background },\n ghost: { backgroundColor: lightTheme.button.ghost.background },\n transparent: { backgroundColor: lightTheme.button.transparent.background },\n disabled: { backgroundColor: lightTheme.status.default },\n },\n\n border: {\n ghost: { borderColor: lightTheme.button.ghost.border, borderWidth: 1 },\n },\n\n shadow: {\n button: shadows.button,\n },\n\n ...rounded,\n ...padding,\n ...margin,\n },\n\n selectors: {\n dark: {\n bg: {\n default: { backgroundColor: darkTheme.background.default },\n primary: { backgroundColor: darkTheme.button.primary.background },\n secondary: { backgroundColor: darkTheme.button.secondary.background },\n tertiary: { backgroundColor: darkTheme.button.tertiary.background },\n ghost: { backgroundColor: darkTheme.button.ghost.background },\n transparent: { backgroundColor: darkTheme.button.transparent.background },\n disabled: { backgroundColor: darkTheme.status.default },\n },\n },\n },\n});\n\nexport const Button = {\n Container,\n ScaleOnPressContainer,\n Text,\n};\n\ntype ScalingPressableProps = {\n minScale?: number;\n};\n\ntype NoOptionals<T> = {\n [P in keyof T]-?: T[P];\n};\n\ntype ContainerProps = React.ComponentProps<typeof Container>;\ntype ContainerBackgroundColors = NoOptionals<ContainerProps>['bg'];\n\nconst lightHighlightColorMap: Record<ContainerBackgroundColors, string> = {\n disabled: 'transparent',\n default: lightTheme.background.secondary,\n primary: lightTheme.background.tertiary,\n secondary: lightTheme.background.quaternary,\n tertiary: palette.light.gray[600],\n ghost: lightTheme.background.tertiary,\n transparent: lightTheme.background.secondary,\n};\n\nconst darkHighlightColorMap: Record<ContainerBackgroundColors, string> = {\n disabled: 'transparent',\n default: darkTheme.background.secondary,\n primary: darkTheme.background.tertiary,\n secondary: darkTheme.background.quaternary,\n tertiary: palette.dark.gray[600],\n ghost: darkTheme.background.tertiary,\n transparent: darkTheme.background.secondary,\n};\n\nconst highlightColorMap = {\n dark: darkHighlightColorMap,\n light: lightHighlightColorMap,\n};\n\nfunction ScaleOnPressContainer({\n minScale = 0.975,\n ...props\n}: React.ComponentProps<typeof Container> & ScalingPressableProps) {\n const theme = useColorScheme();\n const animatedValue = React.useRef(new Animated.Value(0));\n const [isPressing, setIsPressing] = React.useState(false);\n\n const onPressIn = React.useCallback(() => {\n setIsPressing(true);\n\n Animated.spring(animatedValue.current, {\n toValue: 1,\n stiffness: 1000,\n damping: 500,\n mass: 3,\n overshootClamping: true,\n useNativeDriver: true,\n }).start();\n }, []);\n\n const onPressOut = React.useCallback(() => {\n setIsPressing(false);\n Animated.spring(animatedValue.current, {\n toValue: 0,\n stiffness: 1000,\n damping: 500,\n mass: 3,\n overshootClamping: true,\n useNativeDriver: true,\n }).start();\n }, []);\n\n const scale = animatedValue.current.interpolate({\n inputRange: [0, 1],\n outputRange: [1, minScale],\n });\n\n const scaleStyle = { transform: [{ scale }] };\n\n let backgroundColor = 'transparent';\n\n if (props.bg && isPressing && theme != null) {\n backgroundColor = highlightColorMap[theme][props.bg];\n }\n\n const underlayStyle = {\n backgroundColor,\n };\n\n return (\n <Container onPressIn={onPressIn} onPressOut={onPressOut} {...props} style={[scaleStyle]}>\n <Animated.View style={underlayStyle}>{props.children}</Animated.View>\n </Container>\n );\n}\n"]}
1
+ {"version":3,"file":"Button.js","sourceRoot":"","sources":["../src/Button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { lightTheme, darkTheme, borderRadius, shadows, palette } from '@expo/styleguide-native';\nimport * as React from 'react';\nimport {\n Text as RNText,\n Animated,\n useColorScheme,\n Pressable as RNPressable,\n Easing,\n} from 'react-native';\n\nimport { create } from './create-primitive';\nimport { rounded, margin, padding, text } from './theme';\n\nconst AnimatedPressable = Animated.createAnimatedComponent(RNPressable);\n\nconst Text = create(RNText, {\n base: {\n fontFamily: 'Inter-Regular',\n color: lightTheme.text.default,\n fontSize: 16,\n lineHeight: 22,\n },\n\n props: {\n accessibilityRole: 'text',\n },\n\n variants: {\n ...text,\n\n color: {\n primary: { color: lightTheme.button.primary.foreground },\n secondary: { color: lightTheme.button.secondary.foreground },\n tertiary: { color: lightTheme.button.tertiary.foreground },\n ghost: { color: lightTheme.button.ghost.foreground },\n transparent: { color: lightTheme.button.transparent.foreground },\n default: { color: lightTheme.text.default },\n },\n },\n\n selectors: {\n dark: {\n base: {\n color: darkTheme.text.default,\n },\n\n color: {\n primary: { color: darkTheme.button.primary.foreground },\n secondary: { color: darkTheme.button.secondary.foreground },\n tertiary: { color: darkTheme.button.tertiary.foreground },\n ghost: { color: darkTheme.button.ghost.foreground },\n transparent: { color: darkTheme.button.transparent.foreground },\n default: { color: darkTheme.text.default },\n },\n },\n },\n});\n\nconst Container = create(AnimatedPressable, {\n base: {\n overflow: 'hidden',\n borderRadius: borderRadius.medium,\n },\n\n props: {\n accessibilityRole: 'button',\n android_disableSound: true,\n },\n\n variants: {\n bg: {\n default: { backgroundColor: lightTheme.background.default },\n primary: { backgroundColor: lightTheme.button.primary.background },\n secondary: { backgroundColor: lightTheme.button.secondary.background },\n tertiary: { backgroundColor: lightTheme.button.tertiary.background },\n ghost: { backgroundColor: lightTheme.button.ghost.background },\n transparent: { backgroundColor: lightTheme.button.transparent.background },\n disabled: { backgroundColor: lightTheme.status.default },\n },\n\n border: {\n ghost: { borderColor: lightTheme.button.ghost.border, borderWidth: 1 },\n },\n\n shadow: {\n button: shadows.button,\n },\n\n ...rounded,\n ...padding,\n ...margin,\n },\n\n selectors: {\n dark: {\n bg: {\n default: { backgroundColor: darkTheme.background.default },\n primary: { backgroundColor: darkTheme.button.primary.background },\n secondary: { backgroundColor: darkTheme.button.secondary.background },\n tertiary: { backgroundColor: darkTheme.button.tertiary.background },\n ghost: { backgroundColor: darkTheme.button.ghost.background },\n transparent: { backgroundColor: darkTheme.button.transparent.background },\n disabled: { backgroundColor: darkTheme.status.default },\n },\n },\n },\n});\n\nexport const Button = {\n Container,\n FadeOnPressContainer,\n HighlightOnPressContainer,\n Text,\n};\n\ntype FadingPressableProps = {\n activeOpacity?: number;\n};\n\ntype NoOptionals<T> = {\n [P in keyof T]-?: T[P];\n};\n\ntype ContainerProps = React.ComponentProps<typeof Container>;\ntype ContainerBackgroundColors = NoOptionals<ContainerProps>['bg'];\n\nconst lightHighlightColorMap: Record<ContainerBackgroundColors, string> = {\n disabled: 'transparent',\n default: lightTheme.background.secondary,\n primary: lightTheme.background.tertiary,\n secondary: lightTheme.background.quaternary,\n tertiary: palette.light.gray[600],\n ghost: lightTheme.background.tertiary,\n transparent: lightTheme.background.secondary,\n};\n\nconst darkHighlightColorMap: Record<ContainerBackgroundColors, string> = {\n disabled: 'transparent',\n default: darkTheme.background.secondary,\n primary: darkTheme.background.tertiary,\n secondary: darkTheme.background.quaternary,\n tertiary: palette.dark.gray[600],\n ghost: darkTheme.background.tertiary,\n transparent: darkTheme.background.secondary,\n};\n\nconst highlightColorMap = {\n dark: darkHighlightColorMap,\n light: lightHighlightColorMap,\n};\n\nfunction FadeOnPressContainer({\n activeOpacity = 0.2,\n ...props\n}: React.ComponentProps<typeof Container> & FadingPressableProps) {\n const animatedValue = React.useRef(new Animated.Value(1));\n\n const onPressIn = React.useCallback(() => {\n Animated.timing(animatedValue.current, {\n toValue: activeOpacity,\n duration: 150,\n easing: Easing.inOut(Easing.quad),\n useNativeDriver: true,\n }).start();\n }, []);\n\n const onPressOut = React.useCallback(() => {\n Animated.timing(animatedValue.current, {\n toValue: 1,\n duration: 150,\n easing: Easing.inOut(Easing.quad),\n useNativeDriver: true,\n }).start();\n }, []);\n\n return (\n <Container\n onPressIn={onPressIn}\n onPressOut={onPressOut}\n {...props}\n style={{\n opacity: animatedValue.current,\n }}>\n {props.children}\n </Container>\n );\n}\n\nfunction HighlightOnPressContainer(props: React.ComponentProps<typeof Container>) {\n const theme = useColorScheme();\n const [isPressing, setIsPressing] = React.useState(false);\n\n const onPressIn = React.useCallback(() => {\n setIsPressing(true);\n }, []);\n\n const onPressOut = React.useCallback(() => {\n setIsPressing(false);\n }, []);\n\n let backgroundColor = 'transparent';\n\n if (props.bg && isPressing && theme != null) {\n backgroundColor = highlightColorMap[theme][props.bg];\n }\n\n const underlayStyle = {\n backgroundColor,\n };\n\n return (\n <Container onPressIn={onPressIn} onPressOut={onPressOut} {...props}>\n <Animated.View style={underlayStyle}>{props.children}</Animated.View>\n </Container>\n );\n}\n"]}
package/build/View.d.ts CHANGED
@@ -23,7 +23,7 @@ export declare const View: import("react").ForwardRefExoticComponent<import("rea
23
23
  flex?: "0" | "1" | undefined;
24
24
  shrink?: "0" | "1" | undefined;
25
25
  grow?: "0" | "1" | undefined;
26
- bg?: "secondary" | "default" | "none" | "error" | "warning" | "success" | "overlay" | undefined;
26
+ bg?: "none" | "secondary" | "default" | "error" | "warning" | "success" | "overlay" | undefined;
27
27
  opacity?: "0" | "1" | "0.5" | "0.75" | undefined;
28
28
  inset?: "full" | "bottom" | "top" | undefined;
29
29
  border?: "default" | "error" | "warning" | "hairline" | undefined;
@@ -50,7 +50,7 @@ export declare const Row: import("react").ForwardRefExoticComponent<import("reac
50
50
  py?: "0" | "1" | "2" | "3" | "4" | "0.5" | "1.5" | "2.5" | "3.5" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | ("small" | "micro" | "tiny" | "medium" | "large" | "xl") | undefined;
51
51
  pb?: "0" | "1" | "2" | "3" | "4" | "0.5" | "1.5" | "2.5" | "3.5" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | ("small" | "micro" | "tiny" | "medium" | "large" | "xl") | undefined;
52
52
  pt?: "0" | "1" | "2" | "3" | "4" | "0.5" | "1.5" | "2.5" | "3.5" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | ("small" | "micro" | "tiny" | "medium" | "large" | "xl") | undefined;
53
- bg?: "secondary" | "default" | "none" | "error" | "warning" | "success" | "overlay" | undefined;
53
+ bg?: "none" | "secondary" | "default" | "error" | "warning" | "success" | "overlay" | undefined;
54
54
  flex?: "0" | "1" | undefined;
55
55
  shrink?: "0" | "1" | undefined;
56
56
  grow?: "0" | "1" | undefined;
@@ -66,7 +66,7 @@ export declare const Spacer: {
66
66
  Vertical: import("react").ForwardRefExoticComponent<import("react-native").ViewProps & {
67
67
  children?: import("react").ReactNode;
68
68
  } & {
69
- bg?: "secondary" | "default" | "none" | "error" | "warning" | "success" | "overlay" | undefined;
69
+ bg?: "none" | "secondary" | "default" | "error" | "warning" | "success" | "overlay" | undefined;
70
70
  size?: "small" | "micro" | "tiny" | "medium" | "large" | "xl" | undefined;
71
71
  } & {
72
72
  selectors?: {
@@ -77,7 +77,7 @@ export declare const Spacer: {
77
77
  Horizontal: import("react").ForwardRefExoticComponent<import("react-native").ViewProps & {
78
78
  children?: import("react").ReactNode;
79
79
  } & {
80
- bg?: "secondary" | "default" | "none" | "error" | "warning" | "success" | "overlay" | undefined;
80
+ bg?: "none" | "secondary" | "default" | "error" | "warning" | "success" | "overlay" | undefined;
81
81
  size?: "small" | "micro" | "tiny" | "medium" | "large" | "xl" | undefined;
82
82
  } & {
83
83
  selectors?: {
package/build/View.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"View.d.ts","sourceRoot":"","sources":["../src/View.tsx"],"names":[],"mappings":";AAiBA,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oEAqGf,CAAC;AAEH,eAAO,MAAM,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;oEAmDd,CAAC;AAoCH,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;CAGlB,CAAC;AAEF,eAAO,MAAM,OAAO;;;;;;;;;;;;;;oEAwBlB,CAAC;AAEH,eAAO,MAAM,eAAe;;;;;;;;;;oEAoC1B,CAAC"}
1
+ {"version":3,"file":"View.d.ts","sourceRoot":"","sources":["../src/View.tsx"],"names":[],"mappings":";AAiBA,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oEAqGf,CAAC;AAEH,eAAO,MAAM,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;oEAmDd,CAAC;AAgDH,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;CAGlB,CAAC;AAEF,eAAO,MAAM,OAAO;;;;;;;;;;;;;;oEAwBlB,CAAC;AAEH,eAAO,MAAM,eAAe;;;;;;;;;;oEAoC1B,CAAC"}
package/build/View.js CHANGED
@@ -144,6 +144,11 @@ const Horizontal = create(RNView, {
144
144
  xl: { width: scale.xl, flex: 0 },
145
145
  },
146
146
  },
147
+ selectors: {
148
+ dark: {
149
+ bg: bgDark,
150
+ },
151
+ },
147
152
  });
148
153
  const Vertical = create(RNView, {
149
154
  base: {
@@ -160,6 +165,11 @@ const Vertical = create(RNView, {
160
165
  xl: { height: scale.xl, flex: 0 },
161
166
  },
162
167
  },
168
+ selectors: {
169
+ dark: {
170
+ bg: bgDark,
171
+ },
172
+ },
163
173
  });
164
174
  export const Spacer = {
165
175
  Vertical,
package/build/View.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"View.js","sourceRoot":"","sources":["../src/View.tsx"],"names":[],"mappings":"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","sourcesContent":["import { lightTheme, darkTheme, shadows } from '@expo/styleguide-native';\nimport { View as RNView, StyleSheet } from 'react-native';\n\nimport { create } from './create-primitive';\nimport {\n scale,\n padding,\n margin,\n rounded,\n bg,\n bgDark,\n width,\n height,\n borderDark,\n border,\n} from './theme';\n\nexport const View = create(RNView, {\n variants: {\n overflow: {\n hidden: {\n overflow: 'hidden',\n },\n },\n\n align: {\n centered: {\n justifyContent: 'center',\n alignItems: 'center',\n },\n start: {\n alignItems: 'flex-start',\n },\n },\n\n flex: {\n '1': { flex: 1 },\n '0': { flex: 0 },\n },\n\n shrink: {\n '1': { flexShrink: 1 },\n '0': { flexShrink: 0 },\n },\n\n grow: {\n '1': { flexGrow: 1 },\n '0': { flexGrow: 0 },\n },\n\n bg,\n\n opacity: {\n '1': { opacity: 1 },\n '0.5': { opacity: 0.5 },\n '0.75': { opacity: 0.75 },\n '0': { opacity: 0 },\n },\n\n inset: {\n top: {\n position: 'absolute',\n top: 0,\n left: 0,\n right: 0,\n },\n\n bottom: {\n position: 'absolute',\n bottom: 0,\n left: 0,\n right: 0,\n },\n\n full: {\n position: 'absolute',\n top: 0,\n left: 0,\n right: 0,\n bottom: 0,\n },\n },\n\n border: {\n default: { borderColor: lightTheme.border.default, borderWidth: 1 },\n hairline: { borderColor: lightTheme.border.default, borderWidth: StyleSheet.hairlineWidth },\n warning: { borderColor: lightTheme.border.warning, borderWidth: 1 },\n error: { borderColor: lightTheme.border.error, borderWidth: 1 },\n },\n\n ...rounded,\n\n shadow: {\n micro: shadows.micro,\n tiny: shadows.tiny,\n small: shadows.small,\n medium: shadows.medium,\n button: shadows.button,\n },\n\n width,\n height,\n\n ...padding,\n ...margin,\n },\n\n selectors: {\n dark: {\n bg: bgDark,\n\n border: borderDark,\n },\n\n light: {\n bg: {},\n },\n },\n});\n\nexport const Row = create(RNView, {\n base: {\n flexDirection: 'row',\n },\n\n variants: {\n bg,\n\n flex: {\n '1': { flex: 1 },\n '0': { flex: 0 },\n },\n\n shrink: {\n '1': { flexShrink: 1 },\n '0': { flexShrink: 0 },\n },\n\n grow: {\n '1': { flexGrow: 1 },\n '0': { flexGrow: 0 },\n },\n\n align: {\n center: { alignItems: 'center' },\n start: { alignItems: 'flex-start' },\n end: { alignItems: 'flex-end' },\n },\n\n justify: {\n center: { justifyContent: 'center' },\n start: { justifyContent: 'flex-start' },\n end: { justifyContent: 'flex-end' },\n between: { justifyContent: 'space-between' },\n around: { justifyContent: 'space-around' },\n },\n\n ...padding,\n ...margin,\n\n ...rounded,\n\n border,\n },\n\n selectors: {\n dark: {\n bg: bgDark,\n border: borderDark,\n },\n },\n});\n\nconst Horizontal = create(RNView, {\n base: {\n flex: 1,\n },\n variants: {\n bg,\n size: {\n micro: { width: scale.micro, flex: 0 },\n tiny: { width: scale.tiny, flex: 0 },\n small: { width: scale.small, flex: 0 },\n medium: { width: scale.medium, flex: 0 },\n large: { width: scale.large, flex: 0 },\n xl: { width: scale.xl, flex: 0 },\n },\n },\n});\n\nconst Vertical = create(RNView, {\n base: {\n flex: 1,\n },\n variants: {\n bg,\n size: {\n micro: { height: scale.micro, flex: 0 },\n tiny: { height: scale.tiny, flex: 0 },\n small: { height: scale.small, flex: 0 },\n medium: { height: scale.medium, flex: 0 },\n large: { height: scale.large, flex: 0 },\n xl: { height: scale.xl, flex: 0 },\n },\n },\n});\n\nexport const Spacer = {\n Vertical,\n Horizontal,\n};\n\nexport const Divider = create(RNView, {\n base: {\n height: StyleSheet.hairlineWidth,\n backgroundColor: lightTheme.border.default,\n },\n\n variants: {\n weight: {\n thin: { height: StyleSheet.hairlineWidth },\n normal: { height: 1 },\n heavy: { height: 2 },\n },\n\n ...margin,\n },\n\n selectors: {\n dark: {\n base: {\n height: StyleSheet.hairlineWidth,\n backgroundColor: darkTheme.border.default,\n },\n },\n },\n});\n\nexport const StatusIndicator = create(RNView, {\n base: {\n backgroundColor: lightTheme.status.default,\n borderRadius: 9999,\n },\n\n variants: {\n status: {\n info: { backgroundColor: lightTheme.status.info },\n success: { backgroundColor: lightTheme.status.success },\n warning: { backgroundColor: lightTheme.status.warning },\n error: { backgroundColor: lightTheme.status.error },\n default: { backgroundColor: lightTheme.status.default },\n },\n\n size: {\n small: {\n width: scale.small,\n height: scale.small,\n },\n medium: {\n width: scale.medium,\n height: scale.medium,\n },\n },\n },\n\n selectors: {\n dark: {\n info: { backgroundColor: darkTheme.status.info },\n success: { backgroundColor: darkTheme.status.success },\n warning: { backgroundColor: darkTheme.status.warning },\n error: { backgroundColor: darkTheme.status.error },\n default: { backgroundColor: darkTheme.status.default },\n },\n },\n});\n"]}
1
+ {"version":3,"file":"View.js","sourceRoot":"","sources":["../src/View.tsx"],"names":[],"mappings":"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","sourcesContent":["import { lightTheme, darkTheme, shadows } from '@expo/styleguide-native';\nimport { View as RNView, StyleSheet } from 'react-native';\n\nimport { create } from './create-primitive';\nimport {\n scale,\n padding,\n margin,\n rounded,\n bg,\n bgDark,\n width,\n height,\n borderDark,\n border,\n} from './theme';\n\nexport const View = create(RNView, {\n variants: {\n overflow: {\n hidden: {\n overflow: 'hidden',\n },\n },\n\n align: {\n centered: {\n justifyContent: 'center',\n alignItems: 'center',\n },\n start: {\n alignItems: 'flex-start',\n },\n },\n\n flex: {\n '1': { flex: 1 },\n '0': { flex: 0 },\n },\n\n shrink: {\n '1': { flexShrink: 1 },\n '0': { flexShrink: 0 },\n },\n\n grow: {\n '1': { flexGrow: 1 },\n '0': { flexGrow: 0 },\n },\n\n bg,\n\n opacity: {\n '1': { opacity: 1 },\n '0.5': { opacity: 0.5 },\n '0.75': { opacity: 0.75 },\n '0': { opacity: 0 },\n },\n\n inset: {\n top: {\n position: 'absolute',\n top: 0,\n left: 0,\n right: 0,\n },\n\n bottom: {\n position: 'absolute',\n bottom: 0,\n left: 0,\n right: 0,\n },\n\n full: {\n position: 'absolute',\n top: 0,\n left: 0,\n right: 0,\n bottom: 0,\n },\n },\n\n border: {\n default: { borderColor: lightTheme.border.default, borderWidth: 1 },\n hairline: { borderColor: lightTheme.border.default, borderWidth: StyleSheet.hairlineWidth },\n warning: { borderColor: lightTheme.border.warning, borderWidth: 1 },\n error: { borderColor: lightTheme.border.error, borderWidth: 1 },\n },\n\n ...rounded,\n\n shadow: {\n micro: shadows.micro,\n tiny: shadows.tiny,\n small: shadows.small,\n medium: shadows.medium,\n button: shadows.button,\n },\n\n width,\n height,\n\n ...padding,\n ...margin,\n },\n\n selectors: {\n dark: {\n bg: bgDark,\n\n border: borderDark,\n },\n\n light: {\n bg: {},\n },\n },\n});\n\nexport const Row = create(RNView, {\n base: {\n flexDirection: 'row',\n },\n\n variants: {\n bg,\n\n flex: {\n '1': { flex: 1 },\n '0': { flex: 0 },\n },\n\n shrink: {\n '1': { flexShrink: 1 },\n '0': { flexShrink: 0 },\n },\n\n grow: {\n '1': { flexGrow: 1 },\n '0': { flexGrow: 0 },\n },\n\n align: {\n center: { alignItems: 'center' },\n start: { alignItems: 'flex-start' },\n end: { alignItems: 'flex-end' },\n },\n\n justify: {\n center: { justifyContent: 'center' },\n start: { justifyContent: 'flex-start' },\n end: { justifyContent: 'flex-end' },\n between: { justifyContent: 'space-between' },\n around: { justifyContent: 'space-around' },\n },\n\n ...padding,\n ...margin,\n\n ...rounded,\n\n border,\n },\n\n selectors: {\n dark: {\n bg: bgDark,\n border: borderDark,\n },\n },\n});\n\nconst Horizontal = create(RNView, {\n base: {\n flex: 1,\n },\n variants: {\n bg,\n size: {\n micro: { width: scale.micro, flex: 0 },\n tiny: { width: scale.tiny, flex: 0 },\n small: { width: scale.small, flex: 0 },\n medium: { width: scale.medium, flex: 0 },\n large: { width: scale.large, flex: 0 },\n xl: { width: scale.xl, flex: 0 },\n },\n },\n\n selectors: {\n dark: {\n bg: bgDark,\n },\n },\n});\n\nconst Vertical = create(RNView, {\n base: {\n flex: 1,\n },\n variants: {\n bg,\n size: {\n micro: { height: scale.micro, flex: 0 },\n tiny: { height: scale.tiny, flex: 0 },\n small: { height: scale.small, flex: 0 },\n medium: { height: scale.medium, flex: 0 },\n large: { height: scale.large, flex: 0 },\n xl: { height: scale.xl, flex: 0 },\n },\n },\n\n selectors: {\n dark: {\n bg: bgDark,\n },\n },\n});\n\nexport const Spacer = {\n Vertical,\n Horizontal,\n};\n\nexport const Divider = create(RNView, {\n base: {\n height: StyleSheet.hairlineWidth,\n backgroundColor: lightTheme.border.default,\n },\n\n variants: {\n weight: {\n thin: { height: StyleSheet.hairlineWidth },\n normal: { height: 1 },\n heavy: { height: 2 },\n },\n\n ...margin,\n },\n\n selectors: {\n dark: {\n base: {\n height: StyleSheet.hairlineWidth,\n backgroundColor: darkTheme.border.default,\n },\n },\n },\n});\n\nexport const StatusIndicator = create(RNView, {\n base: {\n backgroundColor: lightTheme.status.default,\n borderRadius: 9999,\n },\n\n variants: {\n status: {\n info: { backgroundColor: lightTheme.status.info },\n success: { backgroundColor: lightTheme.status.success },\n warning: { backgroundColor: lightTheme.status.warning },\n error: { backgroundColor: lightTheme.status.error },\n default: { backgroundColor: lightTheme.status.default },\n },\n\n size: {\n small: {\n width: scale.small,\n height: scale.small,\n },\n medium: {\n width: scale.medium,\n height: scale.medium,\n },\n },\n },\n\n selectors: {\n dark: {\n info: { backgroundColor: darkTheme.status.info },\n success: { backgroundColor: darkTheme.status.success },\n warning: { backgroundColor: darkTheme.status.warning },\n error: { backgroundColor: darkTheme.status.error },\n default: { backgroundColor: darkTheme.status.default },\n },\n },\n});\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "expo-dev-client-components",
3
- "version": "1.4.0",
3
+ "version": "1.5.0",
4
4
  "description": "Shared JS components and configuration for expo-dev-client",
5
5
  "main": "src/index.ts",
6
6
  "scripts": {
@@ -42,5 +42,5 @@
42
42
  "./setupTests.js"
43
43
  ]
44
44
  },
45
- "gitHead": "4ba50c428c8369bb6b3a51a860d4898ad4ccbe78"
45
+ "gitHead": "fa5ecca8251986b9f197cc14074eec0ab6dfb6db"
46
46
  }
package/src/Button.tsx CHANGED
@@ -1,6 +1,12 @@
1
1
  import { lightTheme, darkTheme, borderRadius, shadows, palette } from '@expo/styleguide-native';
2
2
  import * as React from 'react';
3
- import { Text as RNText, Animated, useColorScheme, Pressable as RNPressable } from 'react-native';
3
+ import {
4
+ Text as RNText,
5
+ Animated,
6
+ useColorScheme,
7
+ Pressable as RNPressable,
8
+ Easing,
9
+ } from 'react-native';
4
10
 
5
11
  import { create } from './create-primitive';
6
12
  import { rounded, margin, padding, text } from './theme';
@@ -102,12 +108,13 @@ const Container = create(AnimatedPressable, {
102
108
 
103
109
  export const Button = {
104
110
  Container,
105
- ScaleOnPressContainer,
111
+ FadeOnPressContainer,
112
+ HighlightOnPressContainer,
106
113
  Text,
107
114
  };
108
115
 
109
- type ScalingPressableProps = {
110
- minScale?: number;
116
+ type FadingPressableProps = {
117
+ activeOpacity?: number;
111
118
  };
112
119
 
113
120
  type NoOptionals<T> = {
@@ -142,45 +149,54 @@ const highlightColorMap = {
142
149
  light: lightHighlightColorMap,
143
150
  };
144
151
 
145
- function ScaleOnPressContainer({
146
- minScale = 0.975,
152
+ function FadeOnPressContainer({
153
+ activeOpacity = 0.2,
147
154
  ...props
148
- }: React.ComponentProps<typeof Container> & ScalingPressableProps) {
149
- const theme = useColorScheme();
150
- const animatedValue = React.useRef(new Animated.Value(0));
151
- const [isPressing, setIsPressing] = React.useState(false);
155
+ }: React.ComponentProps<typeof Container> & FadingPressableProps) {
156
+ const animatedValue = React.useRef(new Animated.Value(1));
152
157
 
153
158
  const onPressIn = React.useCallback(() => {
154
- setIsPressing(true);
155
-
156
- Animated.spring(animatedValue.current, {
157
- toValue: 1,
158
- stiffness: 1000,
159
- damping: 500,
160
- mass: 3,
161
- overshootClamping: true,
159
+ Animated.timing(animatedValue.current, {
160
+ toValue: activeOpacity,
161
+ duration: 150,
162
+ easing: Easing.inOut(Easing.quad),
162
163
  useNativeDriver: true,
163
164
  }).start();
164
165
  }, []);
165
166
 
166
167
  const onPressOut = React.useCallback(() => {
167
- setIsPressing(false);
168
- Animated.spring(animatedValue.current, {
169
- toValue: 0,
170
- stiffness: 1000,
171
- damping: 500,
172
- mass: 3,
173
- overshootClamping: true,
168
+ Animated.timing(animatedValue.current, {
169
+ toValue: 1,
170
+ duration: 150,
171
+ easing: Easing.inOut(Easing.quad),
174
172
  useNativeDriver: true,
175
173
  }).start();
176
174
  }, []);
177
175
 
178
- const scale = animatedValue.current.interpolate({
179
- inputRange: [0, 1],
180
- outputRange: [1, minScale],
181
- });
176
+ return (
177
+ <Container
178
+ onPressIn={onPressIn}
179
+ onPressOut={onPressOut}
180
+ {...props}
181
+ style={{
182
+ opacity: animatedValue.current,
183
+ }}>
184
+ {props.children}
185
+ </Container>
186
+ );
187
+ }
182
188
 
183
- const scaleStyle = { transform: [{ scale }] };
189
+ function HighlightOnPressContainer(props: React.ComponentProps<typeof Container>) {
190
+ const theme = useColorScheme();
191
+ const [isPressing, setIsPressing] = React.useState(false);
192
+
193
+ const onPressIn = React.useCallback(() => {
194
+ setIsPressing(true);
195
+ }, []);
196
+
197
+ const onPressOut = React.useCallback(() => {
198
+ setIsPressing(false);
199
+ }, []);
184
200
 
185
201
  let backgroundColor = 'transparent';
186
202
 
@@ -193,7 +209,7 @@ function ScaleOnPressContainer({
193
209
  };
194
210
 
195
211
  return (
196
- <Container onPressIn={onPressIn} onPressOut={onPressOut} {...props} style={[scaleStyle]}>
212
+ <Container onPressIn={onPressIn} onPressOut={onPressOut} {...props}>
197
213
  <Animated.View style={underlayStyle}>{props.children}</Animated.View>
198
214
  </Container>
199
215
  );
package/src/View.tsx CHANGED
@@ -186,6 +186,12 @@ const Horizontal = create(RNView, {
186
186
  xl: { width: scale.xl, flex: 0 },
187
187
  },
188
188
  },
189
+
190
+ selectors: {
191
+ dark: {
192
+ bg: bgDark,
193
+ },
194
+ },
189
195
  });
190
196
 
191
197
  const Vertical = create(RNView, {
@@ -203,6 +209,12 @@ const Vertical = create(RNView, {
203
209
  xl: { height: scale.xl, flex: 0 },
204
210
  },
205
211
  },
212
+
213
+ selectors: {
214
+ dark: {
215
+ bg: bgDark,
216
+ },
217
+ },
206
218
  });
207
219
 
208
220
  export const Spacer = {