@jobber/components-native 0.116.11 → 0.116.12
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.
|
@@ -262,6 +262,17 @@ function App() {
|
|
|
262
262
|
}
|
|
263
263
|
```
|
|
264
264
|
|
|
265
|
+
### Active breakpoint (Web Only)
|
|
266
|
+
|
|
267
|
+
On web, `AtlantisThemeContextProvider` also provides the active breakpoint that
|
|
268
|
+
[`useBreakpoints`](/hooks/useBreakpoints) and
|
|
269
|
+
[`useResponsiveValue`](/hooks/useResponsiveValue) read, so apps don't add a
|
|
270
|
+
`BreakpointProvider` themselves. It subscribes to the viewport once, however
|
|
271
|
+
many components use the hooks.
|
|
272
|
+
|
|
273
|
+
Nested providers reuse the breakpoint from the outer provider instead of
|
|
274
|
+
subscribing again.
|
|
275
|
+
|
|
265
276
|
### Creating themed styles with buildThemedStyles (Mobile Only)
|
|
266
277
|
|
|
267
278
|
The `buildThemedStyles` utility is available to help create themed StyleSheets
|
|
@@ -9,6 +9,10 @@ We have 3 different ways to deal with responsive breakpoints in our components.
|
|
|
9
9
|
components responsive depending on the size of its container rather than the
|
|
10
10
|
browser.
|
|
11
11
|
|
|
12
|
+
Use [`useBreakpoints`](/hooks/useBreakpoints) to read the active breakpoint in
|
|
13
|
+
JS, and [`useResponsiveValue`](/hooks/useResponsiveValue) to choose a value per
|
|
14
|
+
breakpoint. Both use the same breakpoint values as the CSS variables.
|
|
15
|
+
|
|
12
16
|
## CSS variables
|
|
13
17
|
|
|
14
18
|
We have 5 CSS breakpoints that you can choose from when styling your components.
|
package/dist/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@jobber/components-native",
|
|
3
|
-
"version": "0.116.
|
|
3
|
+
"version": "0.116.12",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "React Native implementation of Atlantis",
|
|
6
6
|
"author": "The Frends",
|
|
@@ -67,7 +67,7 @@
|
|
|
67
67
|
"@babel/runtime": "^7.29.2",
|
|
68
68
|
"@gorhom/bottom-sheet": "^5.2.8",
|
|
69
69
|
"@jobber/design": "0.124.0",
|
|
70
|
-
"@jobber/hooks": "2.
|
|
70
|
+
"@jobber/hooks": "2.22.0",
|
|
71
71
|
"@react-native-community/datetimepicker": "^8.4.5",
|
|
72
72
|
"@react-native/babel-preset": "^0.82.1",
|
|
73
73
|
"@storybook/addon-a11y": "10.3.5",
|
|
@@ -118,5 +118,5 @@
|
|
|
118
118
|
"react-native-screens": ">=4.18.0",
|
|
119
119
|
"react-native-svg": ">=12.0.0"
|
|
120
120
|
},
|
|
121
|
-
"gitHead": "
|
|
121
|
+
"gitHead": "483fa16db4fa78cefddcade2c7181c3ade357c86"
|
|
122
122
|
}
|