├── .babelrc
├── .gitignore
├── DENSE_TALL.md
├── LICENSE
├── README.md
├── demo
├── .gitignore
├── README.md
├── app.json
├── app
│ ├── _layout.tsx
│ ├── human.tsx
│ ├── humanDense.tsx
│ ├── humanTall.tsx
│ ├── iOSUIKit.tsx
│ ├── iOSUIKitDense.tsx
│ ├── iOSUIKitTall.tsx
│ ├── index.tsx
│ ├── material.tsx
│ ├── materialDense.tsx
│ ├── materialTall.tsx
│ ├── notoCJK.tsx
│ ├── notoTall.tsx
│ ├── robotoWeights.tsx
│ ├── sfWeights.tsx
│ ├── systemDenseWeights.tsx
│ ├── systemTallWeights.tsx
│ └── systemWeights.tsx
├── assets
│ └── images
│ │ ├── adaptive-icon.png
│ │ ├── favicon.png
│ │ ├── icon.png
│ │ └── splash-icon.png
├── components
│ └── TypeDemo.js
├── package-lock.json
├── package.json
└── tsconfig.json
├── images
├── hello-world-chinese.png
├── hello-world.png
├── human-collection-ios.png
├── human-dense.png
├── human-tall.png
├── ios-colors.png
├── iosuikit-collection-ios.png
├── iosuikit-dense.png
├── iosuikit-tall.png
├── logo.png
├── logoDark.png
├── material-collection-android.png
├── material-colors.png
├── material-dense.png
├── material-tall.png
├── noto-cjk.png
├── noto-tall.png
├── roboto-weights.png
├── san-francisco-weights.png
├── showcase-human-android.png
├── showcase-human-ios.png
├── showcase-material-android.png
├── showcase-material-ios.png
├── system-dense-android.png
├── system-dense-ios.png
├── system-tall-android.png
├── system-tall-ios.png
├── system-weights-android.png
├── system-weights-ios.png
├── system-weights-web.png
└── web-weights.png
├── package.json
├── src
├── collections
│ ├── human.js
│ ├── humanDense.js
│ ├── humanTall.js
│ ├── iOSUIKit.js
│ ├── iOSUIKitDense.js
│ ├── iOSUIKitTall.js
│ ├── material.js
│ ├── materialDense.js
│ └── materialTall.js
├── helpers
│ ├── iOSColors.js
│ ├── materialColors.js
│ ├── notoCJKWeights.js
│ ├── notoTallWeights.js
│ ├── robotoWeights.js
│ ├── sanFranciscoSpacing.js
│ ├── sanFranciscoWeights.js
│ ├── systemDenseWeights.android.js
│ ├── systemDenseWeights.ios.js
│ ├── systemDenseWeights.web.js
│ ├── systemTallWeights.android.js
│ ├── systemTallWeights.ios.js
│ ├── systemTallWeights.web.js
│ ├── systemWeights.android.js
│ ├── systemWeights.ios.js
│ ├── systemWeights.web.js
│ └── webWeights.js
├── index.d.ts
├── index.js
└── internal
│ ├── CombinedStyleSheet.js
│ └── suffixProperties.js
└── yarn.lock
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": ["react-native"]
3 | }
4 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules/
3 | npm-debug.*
4 | dist/
--------------------------------------------------------------------------------
/DENSE_TALL.md:
--------------------------------------------------------------------------------
1 | # Dense and tall scripts
2 |
3 | ## Collections
4 |
5 | We provide the necessary adjustments for the predefined collections for both
6 | dense and tall scripts. They have the exact same properties as the other
7 | collections.
8 |
9 | You can check the language categories reference in the
10 | [Material Design page](https://material.io/guidelines/style/typography.html#typography-language-categories-reference).
11 |
12 | ### Material Design
13 |
14 | ```JSX
15 | import { materialDense, materialTall } from 'react-native-typography'
16 | ```
17 |
18 | The adjustments made are based on the
19 | [Material Design guidelines](https://material.io/guidelines/style/typography.html)
20 | for dense and tall scripts.
21 |
22 | <img alt="Material Design Dense" src="images/material-dense.png" width="750" height="734"/>
23 | <img alt="Material Design Tall" src="images/material-tall.png" width="750" height="739"/>
24 |
25 | ### Human Interface Guidelines
26 |
27 | ```JSX
28 | import { humanDense, humanTall } from 'react-native-typography'
29 | ```
30 |
31 | The adjustments here are minor and just to ensure proper rendering on all
32 | platforms.
33 |
34 | <img alt="Human Interface Guidelines Dense" src="images/human-dense.png" width="750" height="864"/>
35 | <img alt="Human Interface Guidelines Tall" src="images/human-tall.png" width="750" height="879"/>
36 |
37 | ### iOSUIKit
38 |
39 | ```JSX
40 | import { iOSUIKitDense, iOSUIKitTall } from 'react-native-typography'
41 | ```
42 |
43 | The adjustments here are minor and just to ensure proper rendering on all
44 | platforms.
45 | <img alt="iOSUIKit Dense" src="images/iosuikit-dense.png" width="750" height="943"/>
46 | <img alt="iOSUIKit Tall" src="images/iosuikit-tall.png" width="750" height="974"/>
47 |
48 | ## Weight helpers
49 |
50 | The weight helpers for dense and tall scripts are different, as they render
51 | using different fonts and weights on each platform.
52 |
53 | On iOS the San Francisco font is used for all scripts.
54 |
55 | On Android the Noto font is used to render the dense and tall scripts, in two
56 | variants.
57 |
58 | The System weights render visually similar weights of the **San Francisco/Noto
59 | typefaces** on each platform.
60 |
61 | ### System Dense Weights
62 |
63 | ```JSX
64 | import { systemDenseWeights } from 'react-native-typography'
65 | ```
66 |
67 | Not all dense languages have every weight in iOS or on Android, we try to match
68 | it to the closer existing value, but ultimately every weight might fall back to
69 | regular or bold depending on what's available.
70 |
71 | <img alt="System Dense Weights iOS" src="images/system-dense-ios.png" width="620" height="258"/>
72 | <img alt="System Dense Weights Android" src="images/system-dense-android.png" width="620" height="258"/>
73 |
74 | ### System Tall Weights
75 |
76 | ```JSX
77 | import { systemTallWeights } from 'react-native-typography'
78 | ```
79 |
80 | Noto Sans only has two weight values for tall scripts, so we fall back to the
81 | closest value. For iOS there are some other weights available depending on the
82 | language.
83 |
84 | <img alt="System Tall Weights iOS" src="images/system-tall-ios.png" width="620" height="268"/>
85 | <img alt="System Tall Weights Android" src="images/system-tall-android.png" width="620" height="268"/>
86 |
87 | ### Noto CJK Weights
88 |
89 | ```JSX
90 | import { notoCJKWeights } from 'react-native-typography'
91 | ```
92 |
93 | These weights are **only functional on Android**, as they directly reference the
94 | native Noto CJK typeface.
95 |
96 | Noto Sans CJK has seven weight values originally, but they are not shipped with
97 | Android for now, so we only have regular and bold.
98 |
99 | <img alt="Noto CJK Weights" src="images/noto-cjk.png" width="620" height="137"/>
100 |
101 | ### Noto Tall Weights
102 |
103 | ```JSX
104 | import { notoTallWeights } from 'react-native-typography'
105 | ```
106 |
107 | These weights are **only functional on Android**, as they directly reference the
108 | native Noto typeface.
109 |
110 | For the tall scripts there is only regular and bold available.
111 |
112 | <img alt="Noto Tall Weights" src="images/noto-tall.png" width="620" height="137"/>
113 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2017 Hector Garcia
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | <picture>
2 | <source media="(prefers-color-scheme: dark)" srcset="./images/logoDark.png">
3 | <img alt="React Native typography" src="./images/logo.png" width="275">
4 | </picture>
5 |
6 | Pixel–perfect, native–looking typographic styles for React Native.
7 |
8 | [](https://www.npmjs.com/package/react-native-typography)
9 | [](https://opensource.org/licenses/MIT)
10 | [](https://www.npmjs.com/package/react-native-typography)
11 |
12 | <p align="center">
13 | <img alt="React Native Typography Human Showcase" src="https://raw.githubusercontent.com/hectahertz/react-native-typography/HEAD/images/showcase-human-ios.png" width="49.7%"/>
14 | <img alt="React Native Typography Material Showcase" src="https://raw.githubusercontent.com/hectahertz/react-native-typography/HEAD/images/showcase-material-android.png" width="49.7%"/>
15 | </p>
16 |
17 | ## Why
18 |
19 | Creating great Text Styles in React Native
20 | [is not a simple task](https://medium.com/@martin_adamko/react-native-quirks-2fb1ae0bbf80),
21 | it requires a lot of fiddling and handling edge cases.
22 |
23 | This library provides a good set of defaults and helpers that cover the majority
24 | of the cases you'll need, make your code much simpler and ✨*bonus*✨ render
25 | great [on iOS, Android and the web](#cross-platform) 😄
26 |
27 | ## Quick start
28 |
29 | Add the dependency:
30 |
31 | ```sh
32 | yarn add react-native-typography
33 | ```
34 |
35 | Set a style in your component:
36 |
37 | ```JSX
38 | import { material } from 'react-native-typography'
39 |
40 | <Text style={material.display1}>Hello Typography!</Text>
41 | ```
42 |
43 | And it will look like this:
44 |
45 | <p align="center">
46 | <img alt="Material Design Collection" src="https://raw.githubusercontent.com/hectahertz/react-native-typography/HEAD/images/hello-world.png" width="40%" height="40%"/>
47 | </p>
48 |
49 | ### Demo app
50 |
51 | * You can run the [included Demo Expo app](demo/), all of the screenshots are taken directly from there!
52 |
53 | ## Typography collections
54 |
55 | We provide a series of predefined collections for you to start with that match
56 | the native design systems for iOS and Android.
57 |
58 | You can **use them directly** wherever you would supply a
59 | [textStyle](https://facebook.github.io/react-native/docs/text#style).
60 |
61 | There's also the option of [extending them](#customization--helpers) to create
62 | your own styles.
63 |
64 | ### Material Design
65 |
66 | Includes all the styles defined in the
67 | [Material Design Guidelines](https://material.io/guidelines/style/typography.html#typography-styles).
68 | Defines size, weight and color.
69 |
70 | ```JSX
71 | import { material } from 'react-native-typography'
72 |
73 | <Text style={material.display4}>Hello Material!</Text>
74 | ```
75 |
76 | <img alt="Material Design Collection" src="https://raw.githubusercontent.com/hectahertz/react-native-typography/HEAD/images/material-collection-android.png" width="80%" height="80%"/>
77 |
78 | ### Human Interface Guidelines
79 |
80 | Defined in the
81 | [Human Interface Guidelines](https://developer.apple.com/ios/human-interface-guidelines/visual-design/typography/).
82 | Defines size, weight and color.
83 |
84 | ```JSX
85 | import { human } from 'react-native-typography'
86 |
87 | <Text style={human.largeTitle}>Hello Human!</Text>
88 | ```
89 |
90 | <img alt="Human Interface Collection" src="https://raw.githubusercontent.com/hectahertz/react-native-typography/HEAD/images/human-collection-ios.png" width="80%" height="80%"/>
91 |
92 | ### iOSUIKit
93 |
94 | Extracted from
95 | [the official Apple sketch file](https://developer.apple.com/design/resources/)
96 |
97 | These are the text styles that fall under the category of iOS UIKit, and are
98 | used to build the UI components of iOS Apps.
99 |
100 | They build on top of the Human Interface styles, customizing some properties
101 | such as weight or letter spacing.
102 |
103 | ```JSX
104 | import { iOSUIKit } from 'react-native-typography'
105 |
106 | <Text style={iOSUIKit.largeTitleEmphasized}>Hello iOS UI Kit!</Text>
107 | ```
108 |
109 | <img alt="iOSUIKit Collection" src="https://raw.githubusercontent.com/hectahertz/react-native-typography/HEAD/images/iosuikit-collection-ios.png" width="80%" height="80%"/>
110 |
111 | ## Customization & Helpers
112 |
113 | The collections provide every style in 2 different ways:
114 |
115 | * As a StyleSheet, e.g.: `material.title`
116 | * As a plain object, e.g.: `material.titleObject`
117 |
118 | The basic way to use them is to set the StyleSheet directly where you would
119 | supply a
120 | [textStyle](https://facebook.github.io/react-native/docs/text#style):
121 |
122 | ```JSX
123 | <Text style={material.title}>Title</Text>
124 | ```
125 |
126 | To extend the styles, you can **spread the object** inside your own StyleSheet
127 | and override some of its attributes:
128 |
129 | ```JSX
130 | const styles = StyleSheet.create({
131 | yellowTitle: {
132 | ...material.titleObject,
133 | color: iOSColors.yellow,
134 | },
135 | });
136 |
137 | <Text style={styles.yellowTitle}>Title</Text>
138 | ```
139 |
140 | Another option would be to **combine the provided StyleSheet** with your own
141 | StyleSheet.
142 |
143 | ```JSX
144 | const styles = StyleSheet.create({
145 | yellow: {
146 | color: iOSColors.yellow,
147 | },
148 | });
149 |
150 | <Text style={[material.title, styles.yellow]}>Title</Text>
151 | ```
152 |
153 | ### Weights
154 |
155 | A font weight in React Native is sometimes formed by a pair of a fontFamily and
156 | a fontWeight, but not always! It depends on the typeface, sometimes it's just
157 | defined by the fontFamily.
158 |
159 | With these helpers, you don't have to worry about those inconsistencies.
160 |
161 | To combine them with a collection style (or your own styles) just spread them,
162 | as they are plain objects.
163 |
164 | ```JSX
165 | const styles = StyleSheet.create({
166 | lightTitle: {
167 | ...material.titleObject,
168 | ...systemWeights.light,
169 | },
170 | });
171 |
172 | <Text style={styles.lightTitle}>Title</Text>
173 | ```
174 |
175 | #### System Weights
176 |
177 | ```JSX
178 | import { systemWeights } from 'react-native-typography'
179 | ```
180 |
181 | The System weights render visually similar weights of the **Native
182 | typefaces** on each platform.
183 | [Read more about cross-platform here.](#cross-platform)
184 |
185 | This is the recommended way of customizing your weights unless you really need
186 | different visual styles for each platform.
187 |
188 | They follow the San Francisco naming convention, as it has more steps, which
189 | makes it more future–proof.
190 |
191 | <img alt="System Weights iOS" src="https://raw.githubusercontent.com/hectahertz/react-native-typography/HEAD/images/system-weights-ios.png" width="80%" height="80%"/>
192 |
193 | <img alt="System Weights Android" src="https://raw.githubusercontent.com/hectahertz/react-native-typography/HEAD/images/system-weights-android.png" width="80%" height="80%"/>
194 |
195 | <img alt="System Weights Web" src="https://raw.githubusercontent.com/hectahertz/react-native-typography/HEAD/images/system-weights-web.png" width="80%" height="80%"/>
196 |
197 | #### San Francisco Weights
198 |
199 | ```JSX
200 | import { sanFranciscoWeights } from 'react-native-typography'
201 | ```
202 |
203 | These weights are **only intended for iOS**, as they directly reference the
204 | native San Francisco typeface.
205 |
206 | <img alt="San Francisco Weights" src="https://raw.githubusercontent.com/hectahertz/react-native-typography/HEAD/images/san-francisco-weights.png" width="80%" height="50%"/>
207 |
208 | #### Roboto Weights
209 |
210 | ```JSX
211 | import { robotoWeights } from 'react-native-typography'
212 | ```
213 |
214 | These weights are **only intended for Android**, as they directly reference the
215 | native Roboto typeface.
216 |
217 | <img alt="Roboto Weights" src="https://raw.githubusercontent.com/hectahertz/react-native-typography/HEAD/images/roboto-weights.png" width="80%" height="80%"/>
218 |
219 | #### Web Weights
220 |
221 | ```JSX
222 | import { webWeights } from 'react-native-typography'
223 | ```
224 |
225 | These weights are **only intended for the web**, and render [react-native-web](https://github.com/necolas/react-native-web)'s system font stack.
226 |
227 | <img alt="Web Weights" src="https://raw.githubusercontent.com/hectahertz/react-native-typography/HEAD/images/web-weights.png" width="80%" height="80%"/>
228 |
229 | ### Colors
230 |
231 | We also include the default text color hex values for each platform.
232 |
233 | #### iOS
234 |
235 | ```JSX
236 | import { iOSColors } from 'react-native-typography'
237 | ```
238 |
239 | <img alt="Colors iOS" src="https://raw.githubusercontent.com/hectahertz/react-native-typography/HEAD/images/ios-colors.png" width="50%" height="50%"/>
240 |
241 | ```JSX
242 | const styles = StyleSheet.create({
243 | yellowTitle: {
244 | ...human.title3Object,
245 | color: iOSColors.yellow,
246 | },
247 | });
248 |
249 | <Text style={styles.yellowTitle}>Title</Text>
250 | ```
251 |
252 | #### Material
253 |
254 | ```JSX
255 | import { materialColors } from 'react-native-typography'
256 | ```
257 |
258 | <img alt="Colors Material" src="https://raw.githubusercontent.com/hectahertz/react-native-typography/HEAD/images/material-colors.png" width="50%" height="50%"/>
259 |
260 | ```JSX
261 | const styles = StyleSheet.create({
262 | tertiaryTitle: {
263 | ...material.titleObject,
264 | color: materialColors.blackTertiary,
265 | },
266 | });
267 |
268 | <Text style={styles.tertiaryTitle}>Title</Text>
269 | ```
270 |
271 | ### Spacing/Kerning
272 |
273 | #### San Francisco
274 |
275 | The San Francisco typeface defines its letter spacing via Kerning. This
276 | is not compatible with the React Native text style properties, as they take
277 | letter-spacing instead.
278 |
279 | To perform this conversion on iOS you can use the `sanFranciscoSpacing` function, which
280 | receives the font size and returns the appropriate letter spacing.
281 |
282 | This is not needed for the web as the browsers already take care of this.
283 |
284 | ```JSX
285 | import { sanFranciscoSpacing } from 'react-native-typography'
286 |
287 | const styles = StyleSheet.create({
288 | customSize: {
289 | ..., // some other props
290 | fontSize: 34,
291 | letterSpacing: sanFranciscoSpacing(34),
292 | },
293 | });
294 | ```
295 |
296 | This is already taken care of on the collections, but if you want to define your
297 | own sizes you can adjust the spacing on iOS with this helper.
298 |
299 | ## Dense and tall scripts
300 |
301 | Dense and tall scripts are fully supported, check [the full documentation here!](DENSE_TALL.md)
302 |
303 | ```JSX
304 | import { materialDense } from 'react-native-typography'
305 |
306 | <Text style={materialDense.display4}>你好排版！</Text>
307 | ```
308 |
309 | <p align="center">
310 | <img alt="Material Design Collection" src="https://raw.githubusercontent.com/hectahertz/react-native-typography/HEAD/images/hello-world-chinese.png" width="190" height="70"/>
311 | </p>
312 |
313 | ## Cross-platform
314 |
315 | Quoting
316 | [the Material Design Platform recommendations](https://material.io/guidelines/platforms/platform-adaptation.html#platform-adaptation-platform-recommendations)
317 |
318 | > The default typeface on iOS is San Francisco. Using this typeface is the
319 | > easiest way to implement accessibility features like Dynamic Type. Using other
320 | > typefaces may require making adjustments to get the same accessibility
321 | > features.
322 |
323 | This is the approach that we like to follow, and all the collections exported
324 | from this library render nicely on all the supported platforms with their respective native
325 | typefaces, for that we use the [System](#system-weights) weight helper.
326 |
327 | You can [check the code of the example app](example/App.js) where we included a
328 | couple of screens that follow this philosophy, this is how they render on iOS and Android:
329 |
330 | <p align="center">
331 | <img alt="React Native Typography Human Showcase on iOS" src="https://raw.githubusercontent.com/hectahertz/react-native-typography/HEAD/images/showcase-human-ios.png" width="49.7%"/>
332 | <img alt="React Native Typography Human Showcase on Android" src="https://raw.githubusercontent.com/hectahertz/react-native-typography/HEAD/images/showcase-human-android.png" width="49.7%"/>
333 | </p>
334 |
335 | <p align="center">
336 | <img alt="React Native Typography Human Showcase on iOS" src="https://raw.githubusercontent.com/hectahertz/react-native-typography/HEAD/images/showcase-material-ios.png" width="49.7%"/>
337 | <img alt="React Native Typography Material Showcase on Android" src="https://raw.githubusercontent.com/hectahertz/react-native-typography/HEAD/images/showcase-material-android.png" width="49.7%"/>
338 | </p>
339 |
340 | ## F.A.Q.
341 |
342 | #### But I don't wanna use the Material Design or Human Interface Guidelines! Is there any reason why I should use this library?
343 |
344 | Absolutely! The helpers are very convenient to build your own text styles as
345 | they work around
346 | [the quirks of working with text styles on React Native](https://medium.com/@martin_adamko/react-native-quirks-2fb1ae0bbf80),
347 | even if you want to specify your own sizes and weights,
348 | [check them out!](#customization--helpers)
349 |
350 | #### Kerning is not 100% accurate on the Display sizes for the Material styles on Android
351 |
352 | There's no support for letter spacing on React Native Android yet. ☹️
353 |
354 | #### Where is Roboto Black?
355 |
356 | It's not available by default on React Native Android yet. 😐
357 |
358 | #### Why are there less weights available for CJK(Chinese, Japanese, Korean) languages on Android than iOS?
359 |
360 | Android uses Noto Sans CJK (also known as Source Han Sans) to render those
361 | languages, and
362 | [even though it has seven weights](https://material.io/guidelines/style/typography.html#typography-typeface),
363 | they're not shipped with Android. 😕
364 |
365 | There are some issues tracking this already, hopefully they will be included in
366 | the future.
367 |
368 | * https://issuetracker.google.com/issues/37064674
369 | * https://issuetracker.google.com/issues/37106325
370 |
371 | #### I use styled-components/glamorous/etc. Can I use react-native-typography?
372 |
373 | Of course! Just use the plain objects accordingly as explained above.
374 |
375 | #### Why is this library exporting StyleSheets and objects instead of components?
376 |
377 | The idea behind it is that textStyles are the universally accepted way of
378 | styling text and this makes integration
379 | [with many libraries](https://reactnavigation.org/docs/navigators/stack#headerTitleStyle)
380 | easier.
381 |
382 | The StyleSheet/Object pattern is
383 | [already being used](https://facebook.github.io/react-native/docs/stylesheet.html#absolutefill)
384 | in the React Native codebase to provide an easy way to extend exported
385 | StyleSheets.
386 |
387 | If you enjoy using pre-styled components for your text, you can easily
388 | define them and just supply the desired styles from this library! 🙂
389 |
390 | ## Versioning
391 |
392 | We use [SemVer](http://semver.org/) for versioning. For the versions available,
393 | see the
394 | [tags in this repository](https://github.com/hectahertz/react-native-typography/tags).
395 |
396 | ## Authors
397 |
398 | * **[Hector Garcia](https://github.com/hectahertz)**
399 |
400 | See also the list of
401 | [contributors](https://github.com/hectahertz/react-native-typography/contributors)
402 | who participated in this project.
403 |
404 | ## License
405 |
406 | This project is licensed under the MIT License.
407 |
408 | ## Acknowledgments
409 |
410 | * [Kyle Hickinson](https://github.com/kylehickinson) - thanks for
411 | [the work on the kerning values for San Francisco](https://github.com/kylehickinson/Sketch-SF-UI-Font-Fixer)
412 | and for being so nice!
413 | * [Bartol Karuza](https://github.com/bartolkaruza) &
414 | [Chris Lewis](https://github.com/cdlewis) - thanks for the work on fixing the
415 | line heights inconsistencies in React Native.
416 | * [Alina Cvetkova](https://twitter.com/nuacco) - thanks for your help with the
417 | UX and visual fine–tuning.
418 |
419 | ### Pictures for the demo app by:
420 |
421 | * [Sasha Freemind](https://unsplash.com/@sashafreemind)
422 | * [Seth Doyle](https://unsplash.com/@sethdoylee)
423 | * [Angel Jimenez](https://unsplash.com/@particularangelvision)
424 | * [Efe Kurnaz](https://unsplash.com/@efekurnaz)
425 | * [Mário Silva](https://unsplash.com/@mariosilva)
426 | * [Paul Morris](https://unsplash.com/@oldskool2016)
427 | * [Joel Filipe](https://unsplash.com/@joelfilip)
428 | * [Wild Vibez](https://unsplash.com/@wldvbz)
429 |
430 | ## References
431 |
432 | * https://developer.apple.com/ios/human-interface-guidelines/visual-design/typography/
433 | * https://material.io/guidelines/style/typography.html
434 | * https://developer.apple.com/design/resources/
435 | * https://facebook.github.io/react-native/docs/text.html#style
436 | * https://medium.com/@knoland/typography-in-react-native-f09c43b5b435
437 | * https://developer.apple.com/videos/play/wwdc2015/804/
438 | * https://developer.apple.com/videos/play/wwdc2016/801/
439 | * https://medium.com/react-native-training/list-of-available-react-native-fonts-ed78b48bd45e
440 | * https://developer.apple.com/documentation/uikit/uifontdescriptor/font_weights
441 | * https://v1.designcode.io/iosdesign-guidelines
442 | * http://devsign.co/notes/tracking-and-character-spacing
443 | * https://www.raizlabs.com/dev/2015/08/advanced-ios-typography/
444 | * https://medium.com/@sauvik_dolui/handling-fonts-in-ios-development-a-simpler-way-32d360cdc1b6
445 | * https://readymag.com/arzamas/132908/6/
446 | * https://github.com/facebook/react-native/pull/14609
447 | * https://github.com/react-native-training/react-native-fonts
448 |
--------------------------------------------------------------------------------
/demo/.gitignore:
--------------------------------------------------------------------------------
1 | # Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
2 |
3 | # dependencies
4 | node_modules/
5 |
6 | # Expo
7 | .expo/
8 | dist/
9 | web-build/
10 | expo-env.d.ts
11 |
12 | # Native
13 | *.orig.*
14 | *.jks
15 | *.p8
16 | *.p12
17 | *.key
18 | *.mobileprovision
19 |
20 | # Metro
21 | .metro-health-check*
22 |
23 | # debug
24 | npm-debug.*
25 | yarn-debug.*
26 | yarn-error.*
27 |
28 | # macOS
29 | .DS_Store
30 | *.pem
31 |
32 | # local env files
33 | .env*.local
34 |
35 | # typescript
36 | *.tsbuildinfo
37 |
38 | app-example
39 |
--------------------------------------------------------------------------------
/demo/README.md:
--------------------------------------------------------------------------------
1 | # Welcome to your Expo app 👋
2 |
3 | This is an [Expo](https://expo.dev) project created with [`create-expo-app`](https://www.npmjs.com/package/create-expo-app).
4 |
5 | ## Get started
6 |
7 | 1. Install dependencies
8 |
9 | ```bash
10 | npm install
11 | ```
12 |
13 | 2. Start the app
14 |
15 | ```bash
16 | npx expo start
17 | ```
18 |
19 | In the output, you'll find options to open the app in a
20 |
21 | * [development build](https://docs.expo.dev/develop/development-builds/introduction/)
22 | * [Android emulator](https://docs.expo.dev/workflow/android-studio-emulator/)
23 | * [iOS simulator](https://docs.expo.dev/workflow/ios-simulator/)
24 | * [Expo Go](https://expo.dev/go), a limited sandbox for trying out app development with Expo
25 |
26 | You can start developing by editing the files inside the **app** directory. This project uses [file-based routing](https://docs.expo.dev/router/introduction).
27 |
28 | ## Get a fresh project
29 |
30 | When you're ready, run:
31 |
32 | ```bash
33 | npm run reset-project
34 | ```
35 |
36 | This command will move the starter code to the **app-example** directory and create a blank **app** directory where you can start developing.
37 |
38 | ## Learn more
39 |
40 | To learn more about developing your project with Expo, look at the following resources:
41 |
42 | * [Expo documentation](https://docs.expo.dev/): Learn fundamentals, or go into advanced topics with our [guides](https://docs.expo.dev/guides).
43 | * [Learn Expo tutorial](https://docs.expo.dev/tutorial/introduction/): Follow a step-by-step tutorial where you'll create a project that runs on Android, iOS, and the web.
44 |
45 | ## Join the community
46 |
47 | Join our community of developers creating universal apps.
48 |
49 | * [Expo on GitHub](https://github.com/expo/expo): View our open source platform and contribute.
50 | * [Discord community](https://chat.expo.dev): Chat with Expo users and ask questions.
51 |
--------------------------------------------------------------------------------
/demo/app.json:
--------------------------------------------------------------------------------
1 | {
2 | "expo": {
3 | "name": "react-native-typography-demo",
4 | "slug": "react-native-typography-demo",
5 | "version": "1.0.0",
6 | "orientation": "portrait",
7 | "icon": "./assets/images/icon.png",
8 | "scheme": "myapp",
9 | "userInterfaceStyle": "automatic",
10 | "newArchEnabled": true,
11 | "ios": {
12 | "supportsTablet": true
13 | },
14 | "android": {
15 | "adaptiveIcon": {
16 | "foregroundImage": "./assets/images/adaptive-icon.png",
17 | "backgroundColor": "#ffffff"
18 | }
19 | },
20 | "web": {
21 | "bundler": "metro",
22 | "output": "static",
23 | "favicon": "./assets/images/favicon.png"
24 | },
25 | "plugins": [
26 | "expo-router",
27 | [
28 | "expo-splash-screen",
29 | {
30 | "image": "./assets/images/splash-icon.png",
31 | "imageWidth": 200,
32 | "resizeMode": "contain",
33 | "backgroundColor": "#ffffff"
34 | }
35 | ]
36 | ],
37 | "experiments": {
38 | "typedRoutes": true
39 | },
40 | "extra": {
41 | "router": {
42 | "origin": false
43 | },
44 | "eas": {
45 | "projectId": "f437fe88-78c3-4c8a-b579-cf31ca627176"
46 | }
47 | },
48 | "owner": "hectahertz",
49 | "runtimeVersion": {
50 | "policy": "appVersion"
51 | },
52 | "updates": {
53 | "url": "https://u.expo.dev/f437fe88-78c3-4c8a-b579-cf31ca627176"
54 | }
55 | }
56 | }
57 |
--------------------------------------------------------------------------------
/demo/app/_layout.tsx:
--------------------------------------------------------------------------------
1 | import { GestureHandlerRootView } from "react-native-gesture-handler";
2 | import { Drawer } from "expo-router/drawer";
3 |
4 | export default function Layout() {
5 | return (
6 | <GestureHandlerRootView style={{ flex: 1 }}>
7 | <Drawer>
8 | <Drawer.Screen
9 | name="index"
10 | options={{
11 | drawerLabel: "Welcome",
12 | title: "Welcome"
13 | }}
14 | />
15 | <Drawer.Screen
16 | name="human"
17 | options={{
18 | drawerLabel: "Human",
19 | title: "Human"
20 | }}
21 | />
22 | <Drawer.Screen
23 | name="humanDense"
24 | options={{
25 | drawerLabel: "Human Dense",
26 | title: "Human Dense"
27 | }}
28 | />
29 | <Drawer.Screen
30 | name="humanTall"
31 | options={{
32 | drawerLabel: "Human Tall",
33 | title: "Human Tall"
34 | }}
35 | />
36 | <Drawer.Screen
37 | name="iOSUIKit"
38 | options={{
39 | drawerLabel: "iOSUIKit",
40 | title: "iOSUIKit"
41 | }}
42 | />
43 | <Drawer.Screen
44 | name="iOSUIKitDense"
45 | options={{
46 | drawerLabel: "iOSUIKit Dense",
47 | title: "iOSUIKit Dense"
48 | }}
49 | />
50 | <Drawer.Screen
51 | name="iOSUIKitTall"
52 | options={{
53 | drawerLabel: "iOSUIKit Tall",
54 | title: "iOSUIKit Tall"
55 | }}
56 | />
57 | <Drawer.Screen
58 | name="material"
59 | options={{
60 | drawerLabel: "Material",
61 | title: "Material"
62 | }}
63 | />
64 | <Drawer.Screen
65 | name="materialDense"
66 | options={{
67 | drawerLabel: "Material Dense",
68 | title: "Material Dense"
69 | }}
70 | />
71 | <Drawer.Screen
72 | name="materialTall"
73 | options={{
74 | drawerLabel: "Material Tall",
75 | title: "Material Tall"
76 | }}
77 | />
78 | <Drawer.Screen
79 | name="notoCJK"
80 | options={{
81 | drawerLabel: "Noto CJK",
82 | title: "Noto CJK"
83 | }}
84 | />
85 | <Drawer.Screen
86 | name="notoTall"
87 | options={{
88 | drawerLabel: "Noto Tall",
89 | title: "Noto Tall"
90 | }}
91 | />
92 | <Drawer.Screen
93 | name="robotoWeights"
94 | options={{
95 | drawerLabel: "Roboto Weights",
96 | title: "Roboto Weights"
97 | }}
98 | />
99 | <Drawer.Screen
100 | name="sfWeights"
101 | options={{
102 | drawerLabel: "SF Weights",
103 | title: "SF Weights"
104 | }}
105 | />
106 | <Drawer.Screen
107 | name="systemWeights"
108 | options={{
109 | drawerLabel: "System Weights",
110 | title: "System Weights"
111 | }}
112 | />
113 | <Drawer.Screen
114 | name="systemDenseWeights"
115 | options={{
116 | drawerLabel: "System Dense Weights",
117 | title: "System Dense Weights"
118 | }}
119 | />
120 | <Drawer.Screen
121 | name="systemTallWeights"
122 | options={{
123 | drawerLabel: "System Tall Weights",
124 | title: "System Tall Weights"
125 | }}
126 | />
127 | </Drawer>
128 | </GestureHandlerRootView>
129 | );
130 | }
131 |
--------------------------------------------------------------------------------
/demo/app/human.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import TypeDemo from "../components/TypeDemo";
3 | import { human } from "react-native-typography";
4 |
5 | export default function Human() {
6 | return (
7 | <TypeDemo
8 | blackStyles={[
9 | {
10 | style: human.largeTitle,
11 | text: "Regular 34",
12 | name: "largeTitle"
13 | },
14 | {
15 | style: human.title1,
16 | text: "Regular 28",
17 | name: "title1"
18 | },
19 | {
20 | style: human.title2,
21 | text: "Regular 22",
22 | name: "title2"
23 | },
24 | {
25 | style: human.title3,
26 | text: "Regular 20",
27 | name: "title3"
28 | },
29 | {
30 | style: human.headline,
31 | text: "Semi-Bold 17",
32 | name: "headline"
33 | },
34 | {
35 | style: human.body,
36 | text: "Regular 17",
37 | name: "body"
38 | },
39 | {
40 | style: human.callout,
41 | text: "Regular 16",
42 | name: "callout"
43 | },
44 | {
45 | style: human.subhead,
46 | text: "Regular 15",
47 | name: "subhead"
48 | },
49 | {
50 | style: human.footnote,
51 | text: "Regular 13",
52 | name: "footnote"
53 | },
54 | {
55 | style: human.caption1,
56 | text: "Regular 12",
57 | name: "caption1"
58 | },
59 | {
60 | style: human.caption2,
61 | text: "Regular 11",
62 | name: "caption2"
63 | }
64 | ]}
65 | whiteStyles={[
66 | {
67 | style: human.largeTitleWhite,
68 | text: "Regular 34",
69 | name: "largeTitleWhite"
70 | },
71 | {
72 | style: human.title1White,
73 | text: "Regular 28",
74 | name: "title1White"
75 | },
76 | {
77 | style: human.title2White,
78 | text: "Regular 22",
79 | name: "title2White"
80 | },
81 | {
82 | style: human.title3White,
83 | text: "Regular 20",
84 | name: "title3White"
85 | },
86 | {
87 | style: human.headlineWhite,
88 | text: "Semi-Bold 17",
89 | name: "headlineWhite"
90 | },
91 | {
92 | style: human.bodyWhite,
93 | text: "Regular 17",
94 | name: "bodyWhite"
95 | },
96 | {
97 | style: human.calloutWhite,
98 | text: "Regular 16",
99 | name: "calloutWhite"
100 | },
101 | {
102 | style: human.subheadWhite,
103 | text: "Regular 15",
104 | name: "subheadWhite"
105 | },
106 | {
107 | style: human.footnoteWhite,
108 | text: "Regular 13",
109 | name: "footnoteWhite"
110 | },
111 | {
112 | style: human.caption1White,
113 | text: "Regular 12",
114 | name: "caption1White"
115 | },
116 | {
117 | style: human.caption2White,
118 | text: "Regular 11",
119 | name: "caption2White"
120 | }
121 | ]}
122 | />
123 | );
124 | }
125 |
--------------------------------------------------------------------------------
/demo/app/humanDense.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | // @ts-ignore TODO: Fix types
3 | import { humanDense } from "react-native-typography";
4 | import TypeDemo from "../components/TypeDemo";
5 |
6 | export default function HumanDense() {
7 | return (
8 | <TypeDemo
9 | blackStyles={[
10 | {
11 | style: humanDense.largeTitle,
12 | text: "你送了一封電子郵件。",
13 | name: "largeTitle"
14 | },
15 | {
16 | style: humanDense.title1,
17 | text: "你送了一封電子郵件。",
18 | name: "title1"
19 | },
20 | {
21 | style: humanDense.title2,
22 | text: "你送了一封電子郵件。",
23 | name: "title2"
24 | },
25 | {
26 | style: humanDense.title3,
27 | text: "你送了一封電子郵件。",
28 | name: "title3"
29 | },
30 | {
31 | style: humanDense.headline,
32 | text: "你送了一封電子郵件。",
33 | name: "headline"
34 | },
35 | {
36 | style: humanDense.body,
37 | text: "你送了一封電子郵件。",
38 | name: "body"
39 | },
40 | {
41 | style: humanDense.callout,
42 | text: "你送了一封電子郵件。",
43 | name: "callout"
44 | },
45 | {
46 | style: humanDense.subhead,
47 | text: "你送了一封電子郵件。",
48 | name: "subhead"
49 | },
50 | {
51 | style: humanDense.footnote,
52 | text: "你送了一封電子郵件。",
53 | name: "footnote"
54 | },
55 | {
56 | style: humanDense.caption1,
57 | text: "你送了一封電子郵件。",
58 | name: "caption1"
59 | },
60 | {
61 | style: humanDense.caption2,
62 | text: "你送了一封電子郵件。",
63 | name: "caption2"
64 | }
65 | ]}
66 | whiteStyles={[
67 | {
68 | style: humanDense.largeTitleWhite,
69 | text: "你送了一封電子郵件。",
70 | name: "largeTitleWhite"
71 | },
72 | {
73 | style: humanDense.title1White,
74 | text: "你送了一封電子郵件。",
75 | name: "title1White"
76 | },
77 | {
78 | style: humanDense.title2White,
79 | text: "你送了一封電子郵件。",
80 | name: "title2White"
81 | },
82 | {
83 | style: humanDense.title3White,
84 | text: "你送了一封電子郵件。",
85 | name: "title3White"
86 | },
87 | {
88 | style: humanDense.headlineWhite,
89 | text: "你送了一封電子郵件。",
90 | name: "headlineWhite"
91 | },
92 | {
93 | style: humanDense.bodyWhite,
94 | text: "你送了一封電子郵件。",
95 | name: "bodyWhite"
96 | },
97 | {
98 | style: humanDense.calloutWhite,
99 | text: "你送了一封電子郵件。",
100 | name: "calloutWhite"
101 | },
102 | {
103 | style: humanDense.subheadWhite,
104 | text: "你送了一封電子郵件。",
105 | name: "subheadWhite"
106 | },
107 | {
108 | style: humanDense.footnoteWhite,
109 | text: "你送了一封電子郵件。",
110 | name: "footnoteWhite"
111 | },
112 | {
113 | style: humanDense.caption1White,
114 | text: "你送了一封電子郵件。",
115 | name: "caption1White"
116 | },
117 | {
118 | style: humanDense.caption2White,
119 | text: "你送了一封電子郵件。",
120 | name: "caption2White"
121 | }
122 | ]}
123 | />
124 | );
125 | }
126 |
--------------------------------------------------------------------------------
/demo/app/humanTall.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | // @ts-ignore TODO: Fix types
3 | import { humanTall } from "react-native-typography";
4 | import TypeDemo from "../components/TypeDemo";
5 |
6 | export default function HumanTall() {
7 | return (
8 | <TypeDemo
9 | blackStyles={[
10 | {
11 | style: humanTall.largeTitle,
12 | text: "คุณส่งอีเมลแล้ว",
13 | name: "largeTitle"
14 | },
15 | {
16 | style: humanTall.title1,
17 | text: "คุณส่งอีเมลแล้ว",
18 | name: "title1"
19 | },
20 | {
21 | style: humanTall.title2,
22 | text: "คุณส่งอีเมลแล้ว",
23 | name: "title2"
24 | },
25 | {
26 | style: humanTall.title3,
27 | text: "คุณส่งอีเมลแล้ว",
28 | name: "title3"
29 | },
30 | {
31 | style: humanTall.headline,
32 | text: "คุณส่งอีเมลแล้ว",
33 | name: "headline"
34 | },
35 | {
36 | style: humanTall.body,
37 | text: "คุณส่งอีเมลแล้ว",
38 | name: "body"
39 | },
40 | {
41 | style: humanTall.callout,
42 | text: "คุณส่งอีเมลแล้ว",
43 | name: "callout"
44 | },
45 | {
46 | style: humanTall.subhead,
47 | text: "คุณส่งอีเมลแล้ว",
48 | name: "subhead"
49 | },
50 | {
51 | style: humanTall.footnote,
52 | text: "คุณส่งอีเมลแล้ว",
53 | name: "footnote"
54 | },
55 | {
56 | style: humanTall.caption1,
57 | text: "คุณส่งอีเมลแล้ว",
58 | name: "caption1"
59 | },
60 | {
61 | style: humanTall.caption2,
62 | text: "คุณส่งอีเมลแล้ว",
63 | name: "caption2"
64 | }
65 | ]}
66 | whiteStyles={[
67 | {
68 | style: humanTall.largeTitleWhite,
69 | text: "คุณส่งอีเมลแล้ว",
70 | name: "largeTitleWhite"
71 | },
72 | {
73 | style: humanTall.title1White,
74 | text: "คุณส่งอีเมลแล้ว",
75 | name: "title1White"
76 | },
77 | {
78 | style: humanTall.title2White,
79 | text: "คุณส่งอีเมลแล้ว",
80 | name: "title2White"
81 | },
82 | {
83 | style: humanTall.title3White,
84 | text: "คุณส่งอีเมลแล้ว",
85 | name: "title3White"
86 | },
87 | {
88 | style: humanTall.headlineWhite,
89 | text: "คุณส่งอีเมลแล้ว",
90 | name: "headlineWhite"
91 | },
92 | {
93 | style: humanTall.bodyWhite,
94 | text: "คุณส่งอีเมลแล้ว",
95 | name: "bodyWhite"
96 | },
97 | {
98 | style: humanTall.calloutWhite,
99 | text: "คุณส่งอีเมลแล้ว",
100 | name: "calloutWhite"
101 | },
102 | {
103 | style: humanTall.subheadWhite,
104 | text: "คุณส่งอีเมลแล้ว",
105 | name: "subheadWhite"
106 | },
107 | {
108 | style: humanTall.footnoteWhite,
109 | text: "คุณส่งอีเมลแล้ว",
110 | name: "footnoteWhite"
111 | },
112 | {
113 | style: humanTall.caption1White,
114 | text: "คุณส่งอีเมลแล้ว",
115 | name: "caption1White"
116 | },
117 | {
118 | style: humanTall.caption2White,
119 | text: "คุณส่งอีเมลแล้ว",
120 | name: "caption2White"
121 | }
122 | ]}
123 | />
124 | );
125 | }
126 |
--------------------------------------------------------------------------------
/demo/app/iOSUIKit.tsx:
--------------------------------------------------------------------------------
1 | // @ts-nocheck TODO: Fix types
2 | import React from "react";
3 | import { iOSUIKit } from "react-native-typography";
4 | import TypeDemo from "../components/TypeDemo";
5 |
6 | export default function IOSUIKit() {
7 | return (
8 | <TypeDemo
9 | blackStyles={[
10 | {
11 | style: iOSUIKit.largeTitleEmphasized,
12 | text: "Bold 34",
13 | name: "largeTitleEmphasized"
14 | },
15 | {
16 | style: iOSUIKit.title3Emphasized,
17 | text: "Semi-Bold 20",
18 | name: "title3Emphasized"
19 | },
20 | {
21 | style: iOSUIKit.title3,
22 | text: "Regular 20",
23 | name: "title3"
24 | },
25 | {
26 | style: iOSUIKit.bodyEmphasized,
27 | text: "Semi-Bold 17",
28 | name: "bodyEmphasized"
29 | },
30 | {
31 | style: iOSUIKit.body,
32 | text: "Regular 17",
33 | name: "body"
34 | },
35 | {
36 | style: iOSUIKit.subheadEmphasized,
37 | text: "Semi-Bold 15",
38 | name: "subheadEmphasized"
39 | },
40 | {
41 | style: iOSUIKit.subhead,
42 | text: "Regular 15",
43 | name: "subhead"
44 | },
45 | {
46 | style: iOSUIKit.subheadShort,
47 | text: "Regular 15 Short",
48 | name: "subheadShort"
49 | },
50 | {
51 | style: iOSUIKit.callout,
52 | text: "Regular 16",
53 | name: "callout"
54 | },
55 | {
56 | style: iOSUIKit.footnoteEmphasized,
57 | text: "Semi-Bold 13",
58 | name: "footnoteEmphasized"
59 | },
60 | {
61 | style: iOSUIKit.footnote,
62 | text: "Regular 13",
63 | name: "footnote"
64 | },
65 | {
66 | style: iOSUIKit.caption2Emphasized,
67 | text: "Semi-Bold 11",
68 | name: "caption2Emphasized"
69 | },
70 | {
71 | style: iOSUIKit.caption2,
72 | text: "Regular 11",
73 | name: "caption2"
74 | }
75 | ]}
76 | whiteStyles={[
77 | {
78 | style: iOSUIKit.largeTitleEmphasizedWhite,
79 | text: "Bold 34",
80 | name: "largeTitleEmphasizedWhite"
81 | },
82 | {
83 | style: iOSUIKit.title3EmphasizedWhite,
84 | text: "Semi-Bold 20",
85 | name: "title3EmphasizedWhite"
86 | },
87 | {
88 | style: iOSUIKit.title3White,
89 | text: "Regular 20",
90 | name: "title3White"
91 | },
92 | {
93 | style: iOSUIKit.bodyEmphasizedWhite,
94 | text: "Semi-Bold 17",
95 | name: "bodyEmphasizedWhite"
96 | },
97 | {
98 | style: iOSUIKit.bodyWhite,
99 | text: "Regular 17",
100 | name: "bodyWhite"
101 | },
102 | {
103 | style: iOSUIKit.subheadEmphasizedWhite,
104 | text: "Semi-Bold 15",
105 | name: "subheadEmphasizedWhite"
106 | },
107 | {
108 | style: iOSUIKit.subheadWhite,
109 | text: "Regular 15",
110 | name: "subheadWhite"
111 | },
112 | {
113 | style: iOSUIKit.subheadShortWhite,
114 | text: "Regular 15 Short",
115 | name: "subheadShortWhite"
116 | },
117 | {
118 | style: iOSUIKit.calloutWhite,
119 | text: "Regular 16",
120 | name: "calloutWhite"
121 | },
122 | {
123 | style: iOSUIKit.footnoteEmphasizedWhite,
124 | text: "Semi-Bold 13",
125 | name: "footnoteEmphasizedWhite"
126 | },
127 | {
128 | style: iOSUIKit.footnoteWhite,
129 | text: "Regular 13",
130 | name: "footnoteWhite"
131 | },
132 | {
133 | style: iOSUIKit.caption2EmphasizedWhite,
134 | text: "Semi-Bold 11",
135 | name: "caption2EmphasizedWhite"
136 | },
137 | {
138 | style: iOSUIKit.caption2White,
139 | text: "Regular 11",
140 | name: "caption2White"
141 | }
142 | ]}
143 | />
144 | );
145 | }
146 |
--------------------------------------------------------------------------------
/demo/app/iOSUIKitDense.tsx:
--------------------------------------------------------------------------------
1 | // @ts-nocheck TODO: Fix types
2 | import React from "react";
3 | import { iOSUIKitDense } from "react-native-typography";
4 | import TypeDemo from "../components/TypeDemo";
5 |
6 | export default function IOSUIKitDense() {
7 | return (
8 | <TypeDemo
9 | blackStyles={[
10 | {
11 | style: iOSUIKitDense.largeTitleEmphasized,
12 | text: "你送了一封電子郵件。",
13 | name: "largeTitleEmphasized"
14 | },
15 | {
16 | style: iOSUIKitDense.title3Emphasized,
17 | text: "你送了一封電子郵件。",
18 | name: "title3Emphasized"
19 | },
20 | {
21 | style: iOSUIKitDense.title3,
22 | text: "你送了一封電子郵件。",
23 | name: "title3"
24 | },
25 | {
26 | style: iOSUIKitDense.bodyEmphasized,
27 | text: "你送了一封電子郵件。",
28 | name: "bodyEmphasized"
29 | },
30 | {
31 | style: iOSUIKitDense.body,
32 | text: "你送了一封電子郵件。",
33 | name: "body"
34 | },
35 | {
36 | style: iOSUIKitDense.subheadEmphasized,
37 | text: "你送了一封電子郵件。",
38 | name: "subheadEmphasized"
39 | },
40 | {
41 | style: iOSUIKitDense.subhead,
42 | text: "你送了一封電子郵件。",
43 | name: "subhead"
44 | },
45 | {
46 | style: iOSUIKitDense.subheadShort,
47 | text: "你送了一封電子郵件。",
48 | name: "subheadShort"
49 | },
50 | {
51 | style: iOSUIKitDense.callout,
52 | text: "你送了一封電子郵件。",
53 | name: "callout"
54 | },
55 | {
56 | style: iOSUIKitDense.footnoteEmphasized,
57 | text: "你送了一封電子郵件。",
58 | name: "footnoteEmphasized"
59 | },
60 | {
61 | style: iOSUIKitDense.footnote,
62 | text: "你送了一封電子郵件。",
63 | name: "footnote"
64 | },
65 | {
66 | style: iOSUIKitDense.caption2Emphasized,
67 | text: "你送了一封電子郵件。",
68 | name: "caption2Emphasized"
69 | },
70 | {
71 | style: iOSUIKitDense.caption2,
72 | text: "你送了一封電子郵件。",
73 | name: "caption2"
74 | }
75 | ]}
76 | whiteStyles={[
77 | {
78 | style: iOSUIKitDense.largeTitleEmphasizedWhite,
79 | text: "你送了一封電子郵件。",
80 | name: "largeTitleEmphasizedWhite"
81 | },
82 | {
83 | style: iOSUIKitDense.title3EmphasizedWhite,
84 | text: "你送了一封電子郵件。",
85 | name: "title3EmphasizedWhite"
86 | },
87 | {
88 | style: iOSUIKitDense.title3White,
89 | text: "你送了一封電子郵件。",
90 | name: "title3White"
91 | },
92 | {
93 | style: iOSUIKitDense.bodyEmphasizedWhite,
94 | text: "你送了一封電子郵件。",
95 | name: "bodyEmphasizedWhite"
96 | },
97 | {
98 | style: iOSUIKitDense.bodyWhite,
99 | text: "你送了一封電子郵件。",
100 | name: "bodyWhite"
101 | },
102 | {
103 | style: iOSUIKitDense.subheadEmphasizedWhite,
104 | text: "你送了一封電子郵件。",
105 | name: "subheadEmphasizedWhite"
106 | },
107 | {
108 | style: iOSUIKitDense.subheadWhite,
109 | text: "你送了一封電子郵件。",
110 | name: "subheadWhite"
111 | },
112 | {
113 | style: iOSUIKitDense.subheadShortWhite,
114 | text: "你送了一封電子郵件。",
115 | name: "subheadShortWhite"
116 | },
117 | {
118 | style: iOSUIKitDense.calloutWhite,
119 | text: "你送了一封電子郵件。",
120 | name: "calloutWhite"
121 | },
122 | {
123 | style: iOSUIKitDense.footnoteEmphasizedWhite,
124 | text: "你送了一封電子郵件。",
125 | name: "footnoteEmphasizedWhite"
126 | },
127 | {
128 | style: iOSUIKitDense.footnoteWhite,
129 | text: "你送了一封電子郵件。",
130 | name: "footnoteWhite"
131 | },
132 | {
133 | style: iOSUIKitDense.caption2EmphasizedWhite,
134 | text: "你送了一封電子郵件。",
135 | name: "caption2EmphasizedWhite"
136 | },
137 | {
138 | style: iOSUIKitDense.caption2White,
139 | text: "你送了一封電子郵件。",
140 | name: "caption2White"
141 | }
142 | ]}
143 | />
144 | );
145 | }
146 |
--------------------------------------------------------------------------------
/demo/app/iOSUIKitTall.tsx:
--------------------------------------------------------------------------------
1 | // @ts-nocheck TODO: Fix types
2 | import React from "react";
3 | import { iOSUIKitTall } from "react-native-typography";
4 | import TypeDemo from "../components/TypeDemo";
5 |
6 | export default function IOSUIKitTall() {
7 | return (
8 | <TypeDemo
9 | blackStyles={[
10 | {
11 | style: iOSUIKitTall.largeTitleEmphasized,
12 | text: "คุณส่งอีเมลแล้ว",
13 | name: "largeTitleEmphasized"
14 | },
15 | {
16 | style: iOSUIKitTall.title3Emphasized,
17 | text: "คุณส่งอีเมลแล้ว",
18 | name: "title3Emphasized"
19 | },
20 | {
21 | style: iOSUIKitTall.title3,
22 | text: "คุณส่งอีเมลแล้ว",
23 | name: "title3"
24 | },
25 | {
26 | style: iOSUIKitTall.bodyEmphasized,
27 | text: "คุณส่งอีเมลแล้ว",
28 | name: "bodyEmphasized"
29 | },
30 | {
31 | style: iOSUIKitTall.body,
32 | text: "คุณส่งอีเมลแล้ว",
33 | name: "body"
34 | },
35 | {
36 | style: iOSUIKitTall.subheadEmphasized,
37 | text: "คุณส่งอีเมลแล้ว",
38 | name: "subheadEmphasized"
39 | },
40 | {
41 | style: iOSUIKitTall.subhead,
42 | text: "คุณส่งอีเมลแล้ว",
43 | name: "subhead"
44 | },
45 | {
46 | style: iOSUIKitTall.subheadShort,
47 | text: "คุณส่งอีเมลแล้ว",
48 | name: "subheadShort"
49 | },
50 | {
51 | style: iOSUIKitTall.callout,
52 | text: "คุณส่งอีเมลแล้ว",
53 | name: "callout"
54 | },
55 | {
56 | style: iOSUIKitTall.footnoteEmphasized,
57 | text: "คุณส่งอีเมลแล้ว",
58 | name: "footnoteEmphasized"
59 | },
60 | {
61 | style: iOSUIKitTall.footnote,
62 | text: "คุณส่งอีเมลแล้ว",
63 | name: "footnote"
64 | },
65 | {
66 | style: iOSUIKitTall.caption2Emphasized,
67 | text: "คุณส่งอีเมลแล้ว",
68 | name: "caption2Emphasized"
69 | },
70 | {
71 | style: iOSUIKitTall.caption2,
72 | text: "คุณส่งอีเมลแล้ว",
73 | name: "caption2"
74 | }
75 | ]}
76 | whiteStyles={[
77 | {
78 | style: iOSUIKitTall.largeTitleEmphasizedWhite,
79 | text: "คุณส่งอีเมลแล้ว",
80 | name: "largeTitleEmphasizedWhite"
81 | },
82 | {
83 | style: iOSUIKitTall.title3EmphasizedWhite,
84 | text: "คุณส่งอีเมลแล้ว",
85 | name: "title3EmphasizedWhite"
86 | },
87 | {
88 | style: iOSUIKitTall.title3White,
89 | text: "คุณส่งอีเมลแล้ว",
90 | name: "title3White"
91 | },
92 | {
93 | style: iOSUIKitTall.bodyEmphasizedWhite,
94 | text: "คุณส่งอีเมลแล้ว",
95 | name: "bodyEmphasizedWhite"
96 | },
97 | {
98 | style: iOSUIKitTall.bodyWhite,
99 | text: "คุณส่งอีเมลแล้ว",
100 | name: "bodyWhite"
101 | },
102 | {
103 | style: iOSUIKitTall.subheadEmphasizedWhite,
104 | text: "คุณส่งอีเมลแล้ว",
105 | name: "subheadEmphasizedWhite"
106 | },
107 | {
108 | style: iOSUIKitTall.subheadWhite,
109 | text: "คุณส่งอีเมลแล้ว",
110 | name: "subheadWhite"
111 | },
112 | {
113 | style: iOSUIKitTall.subheadShortWhite,
114 | text: "คุณส่งอีเมลแล้ว",
115 | name: "subheadShortWhite"
116 | },
117 | {
118 | style: iOSUIKitTall.calloutWhite,
119 | text: "คุณส่งอีเมลแล้ว",
120 | name: "calloutWhite"
121 | },
122 | {
123 | style: iOSUIKitTall.footnoteEmphasizedWhite,
124 | text: "คุณส่งอีเมลแล้ว",
125 | name: "footnoteEmphasizedWhite"
126 | },
127 | {
128 | style: iOSUIKitTall.footnoteWhite,
129 | text: "คุณส่งอีเมลแล้ว",
130 | name: "footnoteWhite"
131 | },
132 | {
133 | style: iOSUIKitTall.caption2EmphasizedWhite,
134 | text: "คุณส่งอีเมลแล้ว",
135 | name: "caption2EmphasizedWhite"
136 | },
137 | {
138 | style: iOSUIKitTall.caption2White,
139 | text: "คุณส่งอีเมลแล้ว",
140 | name: "caption2White"
141 | }
142 | ]}
143 | />
144 | );
145 | }
146 |
--------------------------------------------------------------------------------
/demo/app/index.tsx:
--------------------------------------------------------------------------------
1 | import { Text, View, StyleSheet } from "react-native";
2 | import { iOSUIKit, systemWeights } from "react-native-typography";
3 |
4 | export default function Index() {
5 | return (
6 | <View
7 | style={{
8 | flex: 1,
9 | justifyContent: "flex-start",
10 | alignItems: "flex-start",
11 | paddingHorizontal: 15,
12 | paddingVertical: 15
13 | }}
14 | >
15 | <Text style={styles.title}>
16 | Thank you for testing react-native-typography!
17 | </Text>
18 | <Text style={iOSUIKit.body}>
19 | You can find examples of the different collections on the menu.
20 | </Text>
21 | </View>
22 | );
23 | }
24 |
25 | const styles = StyleSheet.create({
26 | title: {
27 | ...iOSUIKit.largeTitleEmphasizedObject,
28 | marginBottom: 15
29 | }
30 | });
31 |
--------------------------------------------------------------------------------
/demo/app/material.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { material } from "react-native-typography";
3 | import TypeDemo from "../components/TypeDemo";
4 |
5 | export default function Material() {
6 | return (
7 | <TypeDemo
8 | blackStyles={[
9 | {
10 | style: material.display4,
11 | text: "Light 112",
12 | name: "display4"
13 | },
14 | {
15 | style: material.display3,
16 | text: "Regular 56",
17 | name: "display3"
18 | },
19 | {
20 | style: material.display2,
21 | text: "Regular 45",
22 | name: "display2"
23 | },
24 | {
25 | style: material.display1,
26 | text: "Regular 34",
27 | name: "display1"
28 | },
29 | {
30 | style: material.headline,
31 | text: "Regular 24",
32 | name: "headline"
33 | },
34 | {
35 | style: material.title,
36 | text: "Medium 20",
37 | name: "title"
38 | },
39 | {
40 | style: material.subheading,
41 | text: "Regular 16",
42 | name: "subheading"
43 | },
44 | {
45 | style: material.body2,
46 | text: "Medium 14",
47 | name: "body2"
48 | },
49 | {
50 | style: material.body1,
51 | text: "Regular 14",
52 | name: "body1"
53 | },
54 | {
55 | style: material.caption,
56 | text: "Regular 12",
57 | name: "caption"
58 | },
59 | {
60 | style: material.button,
61 | text: "MEDIUM 14",
62 | name: "button"
63 | }
64 | ]}
65 | whiteStyles={[
66 | {
67 | style: material.display4White,
68 | text: "Light 112",
69 | name: "display4White"
70 | },
71 | {
72 | style: material.display3White,
73 | text: "Regular 56",
74 | name: "display3White"
75 | },
76 | {
77 | style: material.display2White,
78 | text: "Regular 45",
79 | name: "display2White"
80 | },
81 | {
82 | style: material.display1White,
83 | text: "Regular 34",
84 | name: "display1White"
85 | },
86 | {
87 | style: material.headlineWhite,
88 | text: "Regular 24",
89 | name: "headlineWhite"
90 | },
91 | {
92 | style: material.titleWhite,
93 | text: "Medium 20",
94 | name: "titleWhite"
95 | },
96 | {
97 | style: material.subheadingWhite,
98 | text: "Regular 16",
99 | name: "subheadingWhite"
100 | },
101 | {
102 | style: material.body2White,
103 | text: "Medium 14",
104 | name: "body2White"
105 | },
106 | {
107 | style: material.body1White,
108 | text: "Regular 14",
109 | name: "body1White"
110 | },
111 | {
112 | style: material.captionWhite,
113 | text: "Regular 12",
114 | name: "captionWhite"
115 | },
116 | {
117 | style: material.buttonWhite,
118 | text: "MEDIUM 14",
119 | name: "buttonWhite"
120 | }
121 | ]}
122 | />
123 | );
124 | }
125 |
--------------------------------------------------------------------------------
/demo/app/materialDense.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | // @ts-ignore TODO: Fix types
3 | import { materialDense } from "react-native-typography";
4 | import TypeDemo from "../components/TypeDemo";
5 |
6 | export default function MaterialDense() {
7 | return (
8 | <TypeDemo
9 | blackStyles={[
10 | {
11 | style: materialDense.display4,
12 | text: "你送了一封電子郵件。",
13 | name: "display4"
14 | },
15 | {
16 | style: materialDense.display3,
17 | text: "你送了一封電子郵件。",
18 | name: "display3"
19 | },
20 | {
21 | style: materialDense.display2,
22 | text: "你送了一封電子郵件。",
23 | name: "display2"
24 | },
25 | {
26 | style: materialDense.display1,
27 | text: "你送了一封電子郵件。",
28 | name: "display1"
29 | },
30 | {
31 | style: materialDense.headline,
32 | text: "你送了一封電子郵件。",
33 | name: "headline"
34 | },
35 | {
36 | style: materialDense.title,
37 | text: "你送了一封電子郵件。",
38 | name: "title"
39 | },
40 | {
41 | style: materialDense.subheading,
42 | text: "你送了一封電子郵件。",
43 | name: "subheading"
44 | },
45 | {
46 | style: materialDense.body2,
47 | text: "你送了一封電子郵件。",
48 | name: "body2"
49 | },
50 | {
51 | style: materialDense.body1,
52 | text: "你送了一封電子郵件。",
53 | name: "body1"
54 | },
55 | {
56 | style: materialDense.caption,
57 | text: "你送了一封電子郵件。",
58 | name: "caption"
59 | },
60 | {
61 | style: materialDense.button,
62 | text: "你送了一封電子郵件。",
63 | name: "button"
64 | }
65 | ]}
66 | whiteStyles={[
67 | {
68 | style: materialDense.display4White,
69 | text: "你送了一封電子郵件。",
70 | name: "display4White"
71 | },
72 | {
73 | style: materialDense.display3White,
74 | text: "你送了一封電子郵件。",
75 | name: "display3White"
76 | },
77 | {
78 | style: materialDense.display2White,
79 | text: "你送了一封電子郵件。",
80 | name: "display2White"
81 | },
82 | {
83 | style: materialDense.display1White,
84 | text: "你送了一封電子郵件。",
85 | name: "display1White"
86 | },
87 | {
88 | style: materialDense.headlineWhite,
89 | text: "你送了一封電子郵件。",
90 | name: "headlineWhite"
91 | },
92 | {
93 | style: materialDense.titleWhite,
94 | text: "你送了一封電子郵件。",
95 | name: "titleWhite"
96 | },
97 | {
98 | style: materialDense.subheadingWhite,
99 | text: "你送了一封電子郵件。",
100 | name: "subheadingWhite"
101 | },
102 | {
103 | style: materialDense.body2White,
104 | text: "你送了一封電子郵件。",
105 | name: "body2White"
106 | },
107 | {
108 | style: materialDense.body1White,
109 | text: "你送了一封電子郵件。",
110 | name: "body1White"
111 | },
112 | {
113 | style: materialDense.captionWhite,
114 | text: "你送了一封電子郵件。",
115 | name: "captionWhite"
116 | },
117 | {
118 | style: materialDense.buttonWhite,
119 | text: "你送了一封電子郵件。",
120 | name: "buttonWhite"
121 | }
122 | ]}
123 | />
124 | );
125 | }
126 |
--------------------------------------------------------------------------------
/demo/app/materialTall.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | // @ts-ignore TODO: Fix types
3 | import { materialTall } from "react-native-typography";
4 | import TypeDemo from "../components/TypeDemo";
5 |
6 | export default function MaterialTall() {
7 | return (
8 | <TypeDemo
9 | blackStyles={[
10 | {
11 | style: materialTall.display4,
12 | text: "คุณส่งอีเมลแล้ว",
13 | name: "display4"
14 | },
15 | {
16 | style: materialTall.display3,
17 | text: "คุณส่งอีเมลแล้ว",
18 | name: "display3"
19 | },
20 | {
21 | style: materialTall.display2,
22 | text: "คุณส่งอีเมลแล้ว",
23 | name: "display2"
24 | },
25 | {
26 | style: materialTall.display1,
27 | text: "คุณส่งอีเมลแล้ว",
28 | name: "display1"
29 | },
30 | {
31 | style: materialTall.headline,
32 | text: "คุณส่งอีเมลแล้ว",
33 | name: "headline"
34 | },
35 | {
36 | style: materialTall.title,
37 | text: "คุณส่งอีเมลแล้ว",
38 | name: "title"
39 | },
40 | {
41 | style: materialTall.subheading,
42 | text: "คุณส่งอีเมลแล้ว",
43 | name: "subheading"
44 | },
45 | {
46 | style: materialTall.body2,
47 | text: "คุณส่งอีเมลแล้ว",
48 | name: "body2"
49 | },
50 | {
51 | style: materialTall.body1,
52 | text: "คุณส่งอีเมลแล้ว",
53 | name: "body1"
54 | },
55 | {
56 | style: materialTall.caption,
57 | text: "คุณส่งอีเมลแล้ว",
58 | name: "caption"
59 | },
60 | {
61 | style: materialTall.button,
62 | text: "คุณส่งอีเมลแล้ว",
63 | name: "button"
64 | }
65 | ]}
66 | whiteStyles={[
67 | {
68 | style: materialTall.display4White,
69 | text: "คุณส่งอีเมลแล้ว",
70 | name: "display4White"
71 | },
72 | {
73 | style: materialTall.display3White,
74 | text: "คุณส่งอีเมลแล้ว",
75 | name: "display3White"
76 | },
77 | {
78 | style: materialTall.display2White,
79 | text: "คุณส่งอีเมลแล้ว",
80 | name: "display2White"
81 | },
82 | {
83 | style: materialTall.display1White,
84 | text: "คุณส่งอีเมลแล้ว",
85 | name: "display1White"
86 | },
87 | {
88 | style: materialTall.headlineWhite,
89 | text: "คุณส่งอีเมลแล้ว",
90 | name: "headlineWhite"
91 | },
92 | {
93 | style: materialTall.titleWhite,
94 | text: "คุณส่งอีเมลแล้ว",
95 | name: "titleWhite"
96 | },
97 | {
98 | style: materialTall.subheadingWhite,
99 | text: "คุณส่งอีเมลแล้ว",
100 | name: "subheadingWhite"
101 | },
102 | {
103 | style: materialTall.body2White,
104 | text: "คุณส่งอีเมลแล้ว",
105 | name: "body2White"
106 | },
107 | {
108 | style: materialTall.body1White,
109 | text: "คุณส่งอีเมลแล้ว",
110 | name: "body1White"
111 | },
112 | {
113 | style: materialTall.captionWhite,
114 | text: "คุณส่งอีเมลแล้ว",
115 | name: "captionWhite"
116 | },
117 | {
118 | style: materialTall.buttonWhite,
119 | text: "คุณส่งอีเมลแล้ว",
120 | name: "buttonWhite"
121 | }
122 | ]}
123 | />
124 | );
125 | }
126 |
--------------------------------------------------------------------------------
/demo/app/notoCJK.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { StyleSheet } from "react-native";
3 | // @ts-ignore TODO: Fix types
4 | import { material, notoCJKWeights } from "react-native-typography";
5 | import TypeDemo from "../components/TypeDemo";
6 |
7 | export default function NotoCJK() {
8 | return (
9 | <TypeDemo
10 | blackStyles={[
11 | {
12 | style: styles.regular,
13 | text: "你送了一封電子郵件。",
14 | name: "regular"
15 | },
16 | {
17 | style: styles.bold,
18 | text: "你送了一封電子郵件。",
19 | name: "bold"
20 | }
21 | ]}
22 | whiteStyles={[
23 | {
24 | style: styles.regularWhite,
25 | text: "你送了一封電子郵件。",
26 | name: "regular"
27 | },
28 | {
29 | style: styles.boldWhite,
30 | text: "你送了一封電子郵件。",
31 | name: "bold"
32 | }
33 | ]}
34 | />
35 | );
36 | }
37 |
38 | const styles = StyleSheet.create({
39 | regular: {
40 | ...material.headlineObject,
41 | ...notoCJKWeights.regular
42 | },
43 | bold: {
44 | ...material.headlineObject,
45 | ...notoCJKWeights.bold
46 | },
47 | regularWhite: {
48 | ...material.headlineWhiteObject,
49 | ...notoCJKWeights.regular
50 | },
51 | boldWhite: {
52 | ...material.headlineWhiteObject,
53 | ...notoCJKWeights.bold
54 | }
55 | });
56 |
--------------------------------------------------------------------------------
/demo/app/notoTall.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { StyleSheet } from "react-native";
3 | // @ts-ignore TODO: Fix types
4 | import { material, notoTallWeights } from "react-native-typography";
5 | import TypeDemo from "../components/TypeDemo";
6 |
7 | export default function NotoTall() {
8 | return (
9 | <TypeDemo
10 | blackStyles={[
11 | {
12 | style: styles.regular,
13 | text: "คุณส่งอีเมลแล้ว",
14 | name: "regular"
15 | },
16 | {
17 | style: styles.bold,
18 | text: "คุณส่งอีเมลแล้ว",
19 | name: "bold"
20 | }
21 | ]}
22 | whiteStyles={[
23 | {
24 | style: styles.regularWhite,
25 | text: "คุณส่งอีเมลแล้ว",
26 | name: "regular"
27 | },
28 | {
29 | style: styles.boldWhite,
30 | text: "คุณส่งอีเมลแล้ว",
31 | name: "bold"
32 | }
33 | ]}
34 | />
35 | );
36 | }
37 |
38 | const styles = StyleSheet.create({
39 | regular: {
40 | ...material.headlineObject,
41 | ...notoTallWeights.regular
42 | },
43 | bold: {
44 | ...material.headlineObject,
45 | ...notoTallWeights.bold
46 | },
47 | regularWhite: {
48 | ...material.headlineWhiteObject,
49 | ...notoTallWeights.regular
50 | },
51 | boldWhite: {
52 | ...material.headlineWhiteObject,
53 | ...notoTallWeights.bold
54 | }
55 | });
56 |
--------------------------------------------------------------------------------
/demo/app/robotoWeights.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { StyleSheet } from "react-native";
3 | import { material, robotoWeights } from "react-native-typography";
4 | import TypeDemo from "../components/TypeDemo";
5 |
6 | export default function RobotoWeights() {
7 | return (
8 | <TypeDemo
9 | blackStyles={[
10 | {
11 | style: styles.thin,
12 | text: "Roboto Thin",
13 | name: "thin"
14 | },
15 | {
16 | style: styles.light,
17 | text: "Roboto Light",
18 | name: "light"
19 | },
20 | {
21 | style: styles.regular,
22 | text: "Roboto Regular",
23 | name: "regular"
24 | },
25 | {
26 | style: styles.medium,
27 | text: "Roboto Medium",
28 | name: "medium"
29 | },
30 | {
31 | style: styles.bold,
32 | text: "Roboto Bold",
33 | name: "bold"
34 | },
35 | {
36 | style: styles.condensed,
37 | text: "Roboto Condensed",
38 | name: "condensed"
39 | },
40 | {
41 | style: styles.condensedBold,
42 | text: "Roboto Condensed Bold",
43 | name: "condensedBold"
44 | }
45 | ]}
46 | whiteStyles={[
47 | {
48 | style: styles.thinWhite,
49 | text: "Roboto Thin",
50 | name: "thin"
51 | },
52 | {
53 | style: styles.lightWhite,
54 | text: "Roboto Light",
55 | name: "light"
56 | },
57 | {
58 | style: styles.regularWhite,
59 | text: "Roboto Regular",
60 | name: "regular"
61 | },
62 | {
63 | style: styles.mediumWhite,
64 | text: "Roboto Medium",
65 | name: "medium"
66 | },
67 | {
68 | style: styles.boldWhite,
69 | text: "Roboto Bold",
70 | name: "bold"
71 | },
72 | {
73 | style: styles.condensedWhite,
74 | text: "Roboto Condensed",
75 | name: "condensed"
76 | },
77 | {
78 | style: styles.condensedBoldWhite,
79 | text: "Roboto Condensed Bold",
80 | name: "condensedBold"
81 | }
82 | ]}
83 | />
84 | );
85 | }
86 |
87 | const styles = StyleSheet.create({
88 | thin: {
89 | ...material.headlineObject,
90 | ...robotoWeights.thin
91 | },
92 | light: {
93 | ...material.headlineObject,
94 | ...robotoWeights.light
95 | },
96 | regular: {
97 | ...material.headlineObject,
98 | ...robotoWeights.regular
99 | },
100 | medium: {
101 | ...material.headlineObject,
102 | ...robotoWeights.medium
103 | },
104 | bold: {
105 | ...material.headlineObject,
106 | ...robotoWeights.bold
107 | },
108 | condensed: {
109 | ...material.headlineObject,
110 | ...robotoWeights.condensed
111 | },
112 | condensedBold: {
113 | ...material.headlineObject,
114 | ...robotoWeights.condensedBold
115 | },
116 | thinWhite: {
117 | ...material.headlineWhiteObject,
118 | ...robotoWeights.thin
119 | },
120 | lightWhite: {
121 | ...material.headlineWhiteObject,
122 | ...robotoWeights.light
123 | },
124 | regularWhite: {
125 | ...material.headlineWhiteObject,
126 | ...robotoWeights.regular
127 | },
128 | mediumWhite: {
129 | ...material.headlineWhiteObject,
130 | ...robotoWeights.medium
131 | },
132 | boldWhite: {
133 | ...material.headlineWhiteObject,
134 | ...robotoWeights.bold
135 | },
136 | condensedWhite: {
137 | ...material.headlineWhiteObject,
138 | ...robotoWeights.condensed
139 | },
140 | condensedBoldWhite: {
141 | ...material.headlineWhiteObject,
142 | ...robotoWeights.condensedBold
143 | }
144 | });
145 |
--------------------------------------------------------------------------------
/demo/app/sfWeights.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { StyleSheet } from "react-native";
3 | import { human, sanFranciscoWeights } from "react-native-typography";
4 | import TypeDemo from "../components/TypeDemo";
5 |
6 | export default function SFWeights() {
7 | return (
8 | <TypeDemo
9 | blackStyles={[
10 | {
11 | style: styles.thin,
12 | text: "San Francisco Thin",
13 | name: "thin"
14 | },
15 | {
16 | style: styles.ultraLight,
17 | text: "San Francisco Ultralight",
18 | name: "ultraLight"
19 | },
20 | {
21 | style: styles.light,
22 | text: "San Francisco Light",
23 | name: "light"
24 | },
25 | {
26 | style: styles.regular,
27 | text: "San Francisco Regular",
28 | name: "regular"
29 | },
30 | {
31 | style: styles.medium,
32 | text: "San Francisco Medium",
33 | name: "medium"
34 | },
35 | {
36 | style: styles.semibold,
37 | text: "San Francisco Semi-Bold",
38 | name: "semibold"
39 | },
40 | {
41 | style: styles.bold,
42 | text: "San Francisco Bold",
43 | name: "bold"
44 | },
45 | {
46 | style: styles.heavy,
47 | text: "San Francisco Heavy",
48 | name: "heavy"
49 | },
50 | {
51 | style: styles.black,
52 | text: "San Francisco Black",
53 | name: "black"
54 | }
55 | ]}
56 | whiteStyles={[
57 | {
58 | style: styles.thinWhite,
59 | text: "San Francisco Thin",
60 | name: "thin"
61 | },
62 | {
63 | style: styles.ultraLightWhite,
64 | text: "San Francisco Ultralight",
65 | name: "ultraLight"
66 | },
67 | {
68 | style: styles.lightWhite,
69 | text: "San Francisco Light",
70 | name: "light"
71 | },
72 | {
73 | style: styles.regularWhite,
74 | text: "San Francisco Regular",
75 | name: "regular"
76 | },
77 | {
78 | style: styles.mediumWhite,
79 | text: "San Francisco Medium",
80 | name: "medium"
81 | },
82 | {
83 | style: styles.semiboldWhite,
84 | text: "San Francisco Semi-Bold",
85 | name: "semibold"
86 | },
87 | {
88 | style: styles.boldWhite,
89 | text: "San Francisco Bold",
90 | name: "bold"
91 | },
92 | {
93 | style: styles.heavyWhite,
94 | text: "San Francisco Heavy",
95 | name: "heavy"
96 | },
97 | {
98 | style: styles.blackWhite,
99 | text: "San Francisco Black",
100 | name: "black"
101 | }
102 | ]}
103 | />
104 | );
105 | }
106 |
107 | const styles = StyleSheet.create({
108 | thin: {
109 | ...human.title1Object,
110 | ...sanFranciscoWeights.thin
111 | },
112 | ultraLight: {
113 | ...human.title1Object,
114 | ...sanFranciscoWeights.ultraLight
115 | },
116 | light: {
117 | ...human.title1Object,
118 | ...sanFranciscoWeights.light
119 | },
120 | regular: {
121 | ...human.title1Object,
122 | ...sanFranciscoWeights.regular
123 | },
124 | medium: {
125 | ...human.title1Object,
126 | ...sanFranciscoWeights.medium
127 | },
128 | semibold: {
129 | ...human.title1Object,
130 | ...sanFranciscoWeights.semibold
131 | },
132 | bold: {
133 | ...human.title1Object,
134 | ...sanFranciscoWeights.bold
135 | },
136 | heavy: {
137 | ...human.title1Object,
138 | ...sanFranciscoWeights.heavy
139 | },
140 | black: {
141 | ...human.title1Object,
142 | ...sanFranciscoWeights.black
143 | },
144 | thinWhite: {
145 | ...human.title1WhiteObject,
146 | ...sanFranciscoWeights.thin
147 | },
148 | ultraLightWhite: {
149 | ...human.title1WhiteObject,
150 | ...sanFranciscoWeights.ultraLight
151 | },
152 | lightWhite: {
153 | ...human.title1WhiteObject,
154 | ...sanFranciscoWeights.light
155 | },
156 | regularWhite: {
157 | ...human.title1WhiteObject,
158 | ...sanFranciscoWeights.regular
159 | },
160 | mediumWhite: {
161 | ...human.title1WhiteObject,
162 | ...sanFranciscoWeights.medium
163 | },
164 | semiboldWhite: {
165 | ...human.title1WhiteObject,
166 | ...sanFranciscoWeights.semibold
167 | },
168 | boldWhite: {
169 | ...human.title1WhiteObject,
170 | ...sanFranciscoWeights.bold
171 | },
172 | heavyWhite: {
173 | ...human.title1WhiteObject,
174 | ...sanFranciscoWeights.heavy
175 | },
176 | blackWhite: {
177 | ...human.title1WhiteObject,
178 | ...sanFranciscoWeights.black
179 | }
180 | });
181 |
--------------------------------------------------------------------------------
/demo/app/systemDenseWeights.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { StyleSheet } from "react-native";
3 | // @ts-ignore TODO: Fix types
4 | import { human, systemDenseWeights } from "react-native-typography";
5 | import TypeDemo from "../components/TypeDemo";
6 |
7 | export default function SystemDenseWeights() {
8 | return (
9 | <TypeDemo
10 | blackStyles={[
11 | {
12 | style: styles.thin,
13 | text: "텍스트 가중치",
14 | name: "thin"
15 | },
16 | {
17 | style: styles.light,
18 | text: "텍스트 가중치",
19 | name: "light"
20 | },
21 | {
22 | style: styles.regular,
23 | text: "텍스트 가중치",
24 | name: "regular"
25 | },
26 | {
27 | style: styles.semibold,
28 | text: "텍스트 가중치",
29 | name: "semibold"
30 | },
31 | {
32 | style: styles.bold,
33 | text: "텍스트 가중치",
34 | name: "bold"
35 | }
36 | ]}
37 | whiteStyles={[
38 | {
39 | style: styles.thinWhite,
40 | text: "텍스트 가중치",
41 | name: "thin"
42 | },
43 | {
44 | style: styles.lightWhite,
45 | text: "텍스트 가중치",
46 | name: "light"
47 | },
48 | {
49 | style: styles.regularWhite,
50 | text: "텍스트 가중치",
51 | name: "regular"
52 | },
53 | {
54 | style: styles.semiboldWhite,
55 | text: "텍스트 가중치",
56 | name: "semibold"
57 | },
58 | {
59 | style: styles.boldWhite,
60 | text: "텍스트 가중치",
61 | name: "bold"
62 | }
63 | ]}
64 | />
65 | );
66 | }
67 |
68 | const styles = StyleSheet.create({
69 | thin: {
70 | ...human.title1Object,
71 | ...systemDenseWeights.thin
72 | },
73 | light: {
74 | ...human.title1Object,
75 | ...systemDenseWeights.light
76 | },
77 | regular: {
78 | ...human.title1Object,
79 | ...systemDenseWeights.regular
80 | },
81 | semibold: {
82 | ...human.title1Object,
83 | ...systemDenseWeights.semibold
84 | },
85 | bold: {
86 | ...human.title1Object,
87 | ...systemDenseWeights.bold
88 | },
89 | thinWhite: {
90 | ...human.title1WhiteObject,
91 | ...systemDenseWeights.thin
92 | },
93 | lightWhite: {
94 | ...human.title1WhiteObject,
95 | ...systemDenseWeights.light
96 | },
97 | regularWhite: {
98 | ...human.title1WhiteObject,
99 | ...systemDenseWeights.regular
100 | },
101 | semiboldWhite: {
102 | ...human.title1WhiteObject,
103 | ...systemDenseWeights.semibold
104 | },
105 | boldWhite: {
106 | ...human.title1WhiteObject,
107 | ...systemDenseWeights.bold
108 | }
109 | });
110 |
--------------------------------------------------------------------------------
/demo/app/systemTallWeights.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { StyleSheet } from "react-native";
3 | import TypeDemo from "../components/TypeDemo";
4 | // @ts-ignore TODO: Fix types
5 | import { human, systemTallWeights } from "react-native-typography";
6 |
7 | export default function SystemTallWeights() {
8 | return (
9 | <TypeDemo
10 | blackStyles={[
11 | {
12 | style: styles.thin,
13 | text: "टेक्स्ट वजन",
14 | name: "thin"
15 | },
16 | {
17 | style: styles.light,
18 | text: "टेक्स्ट वजन",
19 | name: "light"
20 | },
21 | {
22 | style: styles.regular,
23 | text: "टेक्स्ट वजन",
24 | name: "regular"
25 | },
26 | {
27 | style: styles.semibold,
28 | text: "टेक्स्ट वजन",
29 | name: "semibold"
30 | },
31 | {
32 | style: styles.bold,
33 | text: "टेक्स्ट वजन",
34 | name: "bold"
35 | }
36 | ]}
37 | whiteStyles={[
38 | {
39 | style: styles.thinWhite,
40 | text: "टेक्स्ट वजन",
41 | name: "thin"
42 | },
43 | {
44 | style: styles.lightWhite,
45 | text: "टेक्स्ट वजन",
46 | name: "light"
47 | },
48 | {
49 | style: styles.regularWhite,
50 | text: "टेक्स्ट वजन",
51 | name: "regular"
52 | },
53 | {
54 | style: styles.semiboldWhite,
55 | text: "टेक्स्ट वजन",
56 | name: "semibold"
57 | },
58 | {
59 | style: styles.boldWhite,
60 | text: "टेक्स्ट वजन",
61 | name: "bold"
62 | }
63 | ]}
64 | />
65 | );
66 | }
67 |
68 | const styles = StyleSheet.create({
69 | thin: {
70 | ...human.title1Object,
71 | ...systemTallWeights.thin
72 | },
73 | light: {
74 | ...human.title1Object,
75 | ...systemTallWeights.light
76 | },
77 | regular: {
78 | ...human.title1Object,
79 | ...systemTallWeights.regular
80 | },
81 | semibold: {
82 | ...human.title1Object,
83 | ...systemTallWeights.semibold
84 | },
85 | bold: {
86 | ...human.title1Object,
87 | ...systemTallWeights.bold
88 | },
89 | thinWhite: {
90 | ...human.title1WhiteObject,
91 | ...systemTallWeights.thin
92 | },
93 | lightWhite: {
94 | ...human.title1WhiteObject,
95 | ...systemTallWeights.light
96 | },
97 | regularWhite: {
98 | ...human.title1WhiteObject,
99 | ...systemTallWeights.regular
100 | },
101 | semiboldWhite: {
102 | ...human.title1WhiteObject,
103 | ...systemTallWeights.semibold
104 | },
105 | boldWhite: {
106 | ...human.title1WhiteObject,
107 | ...systemTallWeights.bold
108 | }
109 | });
110 |
--------------------------------------------------------------------------------
/demo/app/systemWeights.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { StyleSheet } from "react-native";
3 | import TypeDemo from "../components/TypeDemo";
4 | import { human, systemWeights } from "react-native-typography";
5 |
6 | export default function SystemWeights() {
7 | return (
8 | <TypeDemo
9 | blackStyles={[
10 | {
11 | style: styles.thin,
12 | text: "System Thin",
13 | name: "thin"
14 | },
15 | {
16 | style: styles.light,
17 | text: "System Light",
18 | name: "light"
19 | },
20 | {
21 | style: styles.regular,
22 | text: "System Regular",
23 | name: "regular"
24 | },
25 | {
26 | style: styles.semibold,
27 | text: "System Semibold",
28 | name: "semibold"
29 | },
30 | {
31 | style: styles.bold,
32 | text: "System Bold",
33 | name: "bold"
34 | }
35 | ]}
36 | whiteStyles={[
37 | {
38 | style: styles.thinWhite,
39 | text: "System Thin",
40 | name: "thin"
41 | },
42 | {
43 | style: styles.lightWhite,
44 | text: "System Light",
45 | name: "light"
46 | },
47 | {
48 | style: styles.regularWhite,
49 | text: "System Regular",
50 | name: "regular"
51 | },
52 | {
53 | style: styles.semiboldWhite,
54 | text: "System Semibold",
55 | name: "semibold"
56 | },
57 | {
58 | style: styles.boldWhite,
59 | text: "System Bold",
60 | name: "bold"
61 | }
62 | ]}
63 | />
64 | );
65 | }
66 |
67 | const styles = StyleSheet.create({
68 | thin: {
69 | ...human.title1Object,
70 | ...systemWeights.thin
71 | },
72 | light: {
73 | ...human.title1Object,
74 | ...systemWeights.light
75 | },
76 | regular: {
77 | ...human.title1Object,
78 | ...systemWeights.regular
79 | },
80 | semibold: {
81 | ...human.title1Object,
82 | ...systemWeights.semibold
83 | },
84 | bold: {
85 | ...human.title1Object,
86 | ...systemWeights.bold
87 | },
88 | thinWhite: {
89 | ...human.title1WhiteObject,
90 | ...systemWeights.thin
91 | },
92 | lightWhite: {
93 | ...human.title1WhiteObject,
94 | ...systemWeights.light
95 | },
96 | regularWhite: {
97 | ...human.title1WhiteObject,
98 | ...systemWeights.regular
99 | },
100 | semiboldWhite: {
101 | ...human.title1WhiteObject,
102 | ...systemWeights.semibold
103 | },
104 | boldWhite: {
105 | ...human.title1WhiteObject,
106 | ...systemWeights.bold
107 | }
108 | });
109 |
--------------------------------------------------------------------------------
/demo/assets/images/adaptive-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hectahertz/react-native-typography/c66b2e8b8e4b73983e95016e53f42ec8327823fb/demo/assets/images/adaptive-icon.png
--------------------------------------------------------------------------------
/demo/assets/images/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hectahertz/react-native-typography/c66b2e8b8e4b73983e95016e53f42ec8327823fb/demo/assets/images/favicon.png
--------------------------------------------------------------------------------
/demo/assets/images/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hectahertz/react-native-typography/c66b2e8b8e4b73983e95016e53f42ec8327823fb/demo/assets/images/icon.png
--------------------------------------------------------------------------------
/demo/assets/images/splash-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hectahertz/react-native-typography/c66b2e8b8e4b73983e95016e53f42ec8327823fb/demo/assets/images/splash-icon.png
--------------------------------------------------------------------------------
/demo/components/TypeDemo.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { StyleSheet, View, Text } from "react-native";
3 | import { ScrollView } from "react-native-gesture-handler";
4 | import { human, materialColors } from "react-native-typography";
5 |
6 | export default function TypeDemo({ blackStyles, whiteStyles }) {
7 | return (
8 | <ScrollView style={styles.screenContainer}>
9 | <View style={styles.section}>
10 | {blackStyles.map(s => (
11 | <View key={s.name}>
12 | <Text numberOfLines={1} style={s.style}>
13 | {s.text}
14 | </Text>
15 | <Text numberOfLines={1} style={styles.styleNameText}>
16 | {s.name}
17 | </Text>
18 | </View>
19 | ))}
20 | </View>
21 | <View style={[styles.section, styles.darkSection]}>
22 | {whiteStyles.map(s => (
23 | <View key={s.name}>
24 | <Text numberOfLines={1} style={s.style}>
25 | {s.text}
26 | </Text>
27 | <Text numberOfLines={1} style={styles.darkSectionStyleNameText}>
28 | {s.name}
29 | </Text>
30 | </View>
31 | ))}
32 | </View>
33 | </ScrollView>
34 | );
35 | }
36 |
37 | const styles = StyleSheet.create({
38 | screenContainer: {
39 | flex: 1,
40 | backgroundColor: "#FFFFFF"
41 | },
42 | screenContent: {
43 | alignItems: "stretch",
44 | justifyContent: "flex-start"
45 | },
46 | section: {
47 | paddingHorizontal: 16,
48 | paddingVertical: 24
49 | },
50 | darkSection: {
51 | backgroundColor: "#1D1D1D"
52 | },
53 | darkSectionGuides: {
54 | marginBottom: 1,
55 | backgroundColor: "rgba(255,255,255,0.1)"
56 | },
57 | lightSectionGuides: {
58 | marginBottom: 1,
59 | backgroundColor: "rgba(0,0,0,0.1)"
60 | },
61 | noGuides: {
62 | marginBottom: 1
63 | },
64 | styleNameText: {
65 | ...human.caption2Object,
66 | color: materialColors.blackSecondary,
67 | marginBottom: 4
68 | },
69 | darkSectionStyleNameText: {
70 | ...human.caption2Object,
71 | color: materialColors.whiteSecondary,
72 | marginBottom: 4
73 | }
74 | });
75 |
--------------------------------------------------------------------------------
/demo/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "demo",
3 | "main": "expo-router/entry",
4 | "version": "1.0.0",
5 | "scripts": {
6 | "start": "expo start",
7 | "reset-project": "node ./scripts/reset-project.js",
8 | "android": "expo start --android",
9 | "ios": "expo start --ios",
10 | "web": "expo start --web",
11 | "test": "jest --watchAll",
12 | "lint": "expo lint"
13 | },
14 | "jest": {
15 | "preset": "jest-expo"
16 | },
17 | "dependencies": {
18 | "@expo/vector-icons": "^14.0.2",
19 | "@react-navigation/bottom-tabs": "^7.2.0",
20 | "@react-navigation/drawer": "^7.1.1",
21 | "@react-navigation/native": "^7.0.14",
22 | "expo": "~52.0.25",
23 | "expo-blur": "~14.0.2",
24 | "expo-constants": "~17.0.4",
25 | "expo-font": "~13.0.3",
26 | "expo-haptics": "~14.0.1",
27 | "expo-linking": "~7.0.4",
28 | "expo-router": "~4.0.16",
29 | "expo-splash-screen": "~0.29.20",
30 | "expo-status-bar": "~2.0.1",
31 | "expo-symbols": "~0.2.1",
32 | "expo-system-ui": "~4.0.7",
33 | "expo-web-browser": "~14.0.2",
34 | "react": "18.3.1",
35 | "react-dom": "18.3.1",
36 | "react-native": "0.76.6",
37 | "react-native-gesture-handler": "~2.20.2",
38 | "react-native-reanimated": "~3.16.1",
39 | "react-native-safe-area-context": "4.12.0",
40 | "react-native-screens": "~4.4.0",
41 | "react-native-typography": "^1.4.1",
42 | "react-native-web": "~0.19.13",
43 | "react-native-webview": "13.12.5",
44 | "expo-updates": "~0.26.12"
45 | },
46 | "devDependencies": {
47 | "@babel/core": "^7.25.2",
48 | "@types/jest": "^29.5.12",
49 | "@types/react": "~18.3.12",
50 | "@types/react-test-renderer": "^18.3.0",
51 | "jest": "^29.2.1",
52 | "jest-expo": "~52.0.3",
53 | "react-test-renderer": "18.3.1",
54 | "typescript": "^5.3.3"
55 | },
56 | "private": true
57 | }
58 |
--------------------------------------------------------------------------------
/demo/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "expo/tsconfig.base",
3 | "compilerOptions": {
4 | "strict": true,
5 | "paths": {
6 | "@/*": ["./*"]
7 | }
8 | },
9 | "include": ["**/*.ts", "**/*.tsx", ".expo/types/**/*.ts", "expo-env.d.ts"]
10 | }
11 |
--------------------------------------------------------------------------------
/images/hello-world-chinese.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hectahertz/react-native-typography/c66b2e8b8e4b73983e95016e53f42ec8327823fb/images/hello-world-chinese.png
--------------------------------------------------------------------------------
/images/hello-world.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hectahertz/react-native-typography/c66b2e8b8e4b73983e95016e53f42ec8327823fb/images/hello-world.png
--------------------------------------------------------------------------------
/images/human-collection-ios.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hectahertz/react-native-typography/c66b2e8b8e4b73983e95016e53f42ec8327823fb/images/human-collection-ios.png
--------------------------------------------------------------------------------
/images/human-dense.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hectahertz/react-native-typography/c66b2e8b8e4b73983e95016e53f42ec8327823fb/images/human-dense.png
--------------------------------------------------------------------------------
/images/human-tall.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hectahertz/react-native-typography/c66b2e8b8e4b73983e95016e53f42ec8327823fb/images/human-tall.png
--------------------------------------------------------------------------------
/images/ios-colors.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hectahertz/react-native-typography/c66b2e8b8e4b73983e95016e53f42ec8327823fb/images/ios-colors.png
--------------------------------------------------------------------------------
/images/iosuikit-collection-ios.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hectahertz/react-native-typography/c66b2e8b8e4b73983e95016e53f42ec8327823fb/images/iosuikit-collection-ios.png
--------------------------------------------------------------------------------
/images/iosuikit-dense.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hectahertz/react-native-typography/c66b2e8b8e4b73983e95016e53f42ec8327823fb/images/iosuikit-dense.png
--------------------------------------------------------------------------------
/images/iosuikit-tall.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hectahertz/react-native-typography/c66b2e8b8e4b73983e95016e53f42ec8327823fb/images/iosuikit-tall.png
--------------------------------------------------------------------------------
/images/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hectahertz/react-native-typography/c66b2e8b8e4b73983e95016e53f42ec8327823fb/images/logo.png
--------------------------------------------------------------------------------
/images/logoDark.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hectahertz/react-native-typography/c66b2e8b8e4b73983e95016e53f42ec8327823fb/images/logoDark.png
--------------------------------------------------------------------------------
/images/material-collection-android.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hectahertz/react-native-typography/c66b2e8b8e4b73983e95016e53f42ec8327823fb/images/material-collection-android.png
--------------------------------------------------------------------------------
/images/material-colors.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hectahertz/react-native-typography/c66b2e8b8e4b73983e95016e53f42ec8327823fb/images/material-colors.png
--------------------------------------------------------------------------------
/images/material-dense.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hectahertz/react-native-typography/c66b2e8b8e4b73983e95016e53f42ec8327823fb/images/material-dense.png
--------------------------------------------------------------------------------
/images/material-tall.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hectahertz/react-native-typography/c66b2e8b8e4b73983e95016e53f42ec8327823fb/images/material-tall.png
--------------------------------------------------------------------------------
/images/noto-cjk.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hectahertz/react-native-typography/c66b2e8b8e4b73983e95016e53f42ec8327823fb/images/noto-cjk.png
--------------------------------------------------------------------------------
/images/noto-tall.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hectahertz/react-native-typography/c66b2e8b8e4b73983e95016e53f42ec8327823fb/images/noto-tall.png
--------------------------------------------------------------------------------
/images/roboto-weights.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hectahertz/react-native-typography/c66b2e8b8e4b73983e95016e53f42ec8327823fb/images/roboto-weights.png
--------------------------------------------------------------------------------
/images/san-francisco-weights.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hectahertz/react-native-typography/c66b2e8b8e4b73983e95016e53f42ec8327823fb/images/san-francisco-weights.png
--------------------------------------------------------------------------------
/images/showcase-human-android.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hectahertz/react-native-typography/c66b2e8b8e4b73983e95016e53f42ec8327823fb/images/showcase-human-android.png
--------------------------------------------------------------------------------
/images/showcase-human-ios.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hectahertz/react-native-typography/c66b2e8b8e4b73983e95016e53f42ec8327823fb/images/showcase-human-ios.png
--------------------------------------------------------------------------------
/images/showcase-material-android.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hectahertz/react-native-typography/c66b2e8b8e4b73983e95016e53f42ec8327823fb/images/showcase-material-android.png
--------------------------------------------------------------------------------
/images/showcase-material-ios.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hectahertz/react-native-typography/c66b2e8b8e4b73983e95016e53f42ec8327823fb/images/showcase-material-ios.png
--------------------------------------------------------------------------------
/images/system-dense-android.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hectahertz/react-native-typography/c66b2e8b8e4b73983e95016e53f42ec8327823fb/images/system-dense-android.png
--------------------------------------------------------------------------------
/images/system-dense-ios.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hectahertz/react-native-typography/c66b2e8b8e4b73983e95016e53f42ec8327823fb/images/system-dense-ios.png
--------------------------------------------------------------------------------
/images/system-tall-android.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hectahertz/react-native-typography/c66b2e8b8e4b73983e95016e53f42ec8327823fb/images/system-tall-android.png
--------------------------------------------------------------------------------
/images/system-tall-ios.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hectahertz/react-native-typography/c66b2e8b8e4b73983e95016e53f42ec8327823fb/images/system-tall-ios.png
--------------------------------------------------------------------------------
/images/system-weights-android.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hectahertz/react-native-typography/c66b2e8b8e4b73983e95016e53f42ec8327823fb/images/system-weights-android.png
--------------------------------------------------------------------------------
/images/system-weights-ios.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hectahertz/react-native-typography/c66b2e8b8e4b73983e95016e53f42ec8327823fb/images/system-weights-ios.png
--------------------------------------------------------------------------------
/images/system-weights-web.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hectahertz/react-native-typography/c66b2e8b8e4b73983e95016e53f42ec8327823fb/images/system-weights-web.png
--------------------------------------------------------------------------------
/images/web-weights.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hectahertz/react-native-typography/c66b2e8b8e4b73983e95016e53f42ec8327823fb/images/web-weights.png
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-native-typography",
3 | "version": "1.4.1",
4 | "description":
5 | "Pixel–perfect, native–looking typographic styles for React Native",
6 | "main": "dist/index.js",
7 | "types": "dist/index.d.ts",
8 | "module": "src/index.js",
9 | "sideEffects": false,
10 | "files": ["src/", "dist/"],
11 | "directories": {
12 | "example": "example"
13 | },
14 | "scripts": {
15 | "build":
16 | "rm -rf dist && babel src --out-dir dist && cp ./src/index.d.ts ./dist",
17 | "format": "prettier --write '**/*.js'",
18 | "precommit": "lint-staged",
19 | "test": "echo \\\"Error: no test specified\\\" && exit 1"
20 | },
21 | "lint-staged": {
22 | "*.{js,json,css,md}": ["prettier --write", "git add"]
23 | },
24 | "repository": {
25 | "type": "git",
26 | "url": "git+https://github.com/hectahertz/react-native-typography.git"
27 | },
28 | "keywords": [
29 | "react-native",
30 | "react",
31 | "typography",
32 | "style",
33 | "styles",
34 | "typeface",
35 | "font"
36 | ],
37 | "author": "hectahertz <hectahertz@gmail.com>",
38 | "license": "MIT",
39 | "bugs": {
40 | "url": "https://github.com/hectahertz/react-native-typography/issues"
41 | },
42 | "homepage": "https://github.com/hectahertz/react-native-typography#readme",
43 | "dependencies": {},
44 | "peerDependencies": {
45 | "react": "*",
46 | "react-native": "*"
47 | },
48 | "devDependencies": {
49 | "babel-cli": "^6.26.0",
50 | "babel-preset-react-native": "^4.0.0",
51 | "husky": "^0.14.3",
52 | "lint-staged": "^6.0.0",
53 | "prettier": "1.9.1"
54 | }
55 | }
56 |
--------------------------------------------------------------------------------
/src/collections/human.js:
--------------------------------------------------------------------------------
1 | import { Platform } from "react-native";
2 | import CombinedStyleSheet from "../internal/CombinedStyleSheet";
3 | import suffixProperties from "../internal/suffixProperties";
4 | import systemWeights from "../helpers/systemWeights";
5 | import sanFranciscoSpacing from "../helpers/sanFranciscoSpacing";
6 | import iOSColors from "../helpers/iOSColors";
7 |
8 | // https://developer.apple.com/ios/human-interface-guidelines/visual-design/typography/
9 |
10 | const colors = {
11 | black: iOSColors.black,
12 | white: iOSColors.white
13 | };
14 |
15 | const getStylesForColor = color => ({
16 | largeTitle: {
17 | fontSize: 34,
18 | lineHeight: 41,
19 | ...systemWeights.regular,
20 | letterSpacing: Platform.OS === "ios" ? sanFranciscoSpacing(34) : undefined,
21 | color: colors[color]
22 | },
23 | title1: {
24 | fontSize: 28,
25 | lineHeight: 34,
26 | ...systemWeights.regular,
27 | letterSpacing: Platform.OS === "ios" ? sanFranciscoSpacing(28) : undefined,
28 | color: colors[color]
29 | },
30 | title2: {
31 | fontSize: 22,
32 | lineHeight: 28,
33 | ...systemWeights.regular,
34 | letterSpacing: Platform.OS === "ios" ? sanFranciscoSpacing(22) : undefined,
35 | color: colors[color]
36 | },
37 | title3: {
38 | fontSize: 20,
39 | lineHeight: 25,
40 | ...systemWeights.regular,
41 | letterSpacing: Platform.OS === "ios" ? sanFranciscoSpacing(20) : undefined,
42 | color: colors[color]
43 | },
44 | headline: {
45 | fontSize: 17,
46 | lineHeight: 22,
47 | ...systemWeights.semibold,
48 | letterSpacing: Platform.OS === "ios" ? sanFranciscoSpacing(17) : undefined,
49 | color: colors[color]
50 | },
51 | body: {
52 | fontSize: 17,
53 | lineHeight: 22,
54 | ...systemWeights.regular,
55 | letterSpacing: Platform.OS === "ios" ? sanFranciscoSpacing(17) : undefined,
56 | color: colors[color]
57 | },
58 | callout: {
59 | fontSize: 16,
60 | lineHeight: 21,
61 | ...systemWeights.regular,
62 | letterSpacing: Platform.OS === "ios" ? sanFranciscoSpacing(16) : undefined,
63 | color: colors[color]
64 | },
65 | subhead: {
66 | fontSize: 15,
67 | lineHeight: 20,
68 | ...systemWeights.regular,
69 | letterSpacing: Platform.OS === "ios" ? sanFranciscoSpacing(15) : undefined,
70 | color: colors[color]
71 | },
72 | footnote: {
73 | fontSize: 13,
74 | lineHeight: 18,
75 | ...systemWeights.regular,
76 | letterSpacing: Platform.OS === "ios" ? sanFranciscoSpacing(13) : undefined,
77 | color: colors[color]
78 | },
79 | caption1: {
80 | fontSize: 12,
81 | lineHeight: 16,
82 | ...systemWeights.regular,
83 | letterSpacing: Platform.OS === "ios" ? sanFranciscoSpacing(12) : undefined,
84 | color: colors[color]
85 | },
86 | caption2: {
87 | fontSize: 11,
88 | lineHeight: 13,
89 | ...systemWeights.regular,
90 | letterSpacing: Platform.OS === "ios" ? sanFranciscoSpacing(11) : undefined,
91 | color: colors[color]
92 | }
93 | });
94 |
95 | export default CombinedStyleSheet.create({
96 | ...getStylesForColor("black"),
97 | ...suffixProperties(getStylesForColor("white"), "White")
98 | });
99 |
--------------------------------------------------------------------------------
/src/collections/humanDense.js:
--------------------------------------------------------------------------------
1 | import { Platform } from "react-native";
2 | import CombinedStyleSheet from "../internal/CombinedStyleSheet";
3 | import suffixProperties from "../internal/suffixProperties";
4 | import systemDenseWeights from "../helpers/systemDenseWeights";
5 | import human from "./human";
6 |
7 | // https://developer.apple.com/videos/play/wwdc2016/801/
8 |
9 | const getStylesForColor = color => {
10 | const colorSuffix = color === "white" ? "White" : "";
11 | return {
12 | largeTitle: {
13 | ...human[`largeTitle${colorSuffix}Object`],
14 | ...systemDenseWeights.regular,
15 | lineHeight: 52
16 | },
17 | title1: {
18 | ...human[`title1${colorSuffix}Object`],
19 | ...systemDenseWeights.regular,
20 | lineHeight: 43
21 | },
22 | title2: {
23 | ...human[`title2${colorSuffix}Object`],
24 | ...systemDenseWeights.regular,
25 | lineHeight: 35
26 | },
27 | title3: {
28 | ...human[`title3${colorSuffix}Object`],
29 | ...systemDenseWeights.regular,
30 | lineHeight: 32
31 | },
32 | headline: {
33 | ...human[`headline${colorSuffix}Object`],
34 | ...systemDenseWeights.semibold,
35 | lineHeight: 28
36 | },
37 | body: {
38 | ...human[`body${colorSuffix}Object`],
39 | ...systemDenseWeights.regular,
40 | lineHeight: 28
41 | },
42 | callout: {
43 | ...human[`callout${colorSuffix}Object`],
44 | ...systemDenseWeights.regular,
45 | lineHeight: 26
46 | },
47 | subhead: {
48 | ...human[`subhead${colorSuffix}Object`],
49 | ...systemDenseWeights.regular,
50 | lineHeight: 25
51 | },
52 | footnote: {
53 | ...human[`footnote${colorSuffix}Object`],
54 | ...systemDenseWeights.regular,
55 | lineHeight: 23
56 | },
57 | caption1: {
58 | ...human[`caption1${colorSuffix}Object`],
59 | ...systemDenseWeights.regular,
60 | lineHeight: 20
61 | },
62 | caption2: {
63 | ...human[`caption2${colorSuffix}Object`],
64 | ...systemDenseWeights.regular,
65 | lineHeight: 16
66 | }
67 | };
68 | };
69 |
70 | export default CombinedStyleSheet.create({
71 | ...getStylesForColor("black"),
72 | ...suffixProperties(getStylesForColor("white"), "White")
73 | });
74 |
--------------------------------------------------------------------------------
/src/collections/humanTall.js:
--------------------------------------------------------------------------------
1 | import { Platform } from "react-native";
2 | import CombinedStyleSheet from "../internal/CombinedStyleSheet";
3 | import suffixProperties from "../internal/suffixProperties";
4 | import systemTallWeights from "../helpers/systemTallWeights";
5 | import human from "./human";
6 |
7 | // https://developer.apple.com/videos/play/wwdc2016/801/
8 |
9 | const getStylesForColor = color => {
10 | const colorSuffix = color === "white" ? "White" : "";
11 | return {
12 | largeTitle: {
13 | ...human[`largeTitle${colorSuffix}Object`],
14 | ...systemTallWeights.regular,
15 | lineHeight: 52
16 | },
17 | title1: {
18 | ...human[`title1${colorSuffix}Object`],
19 | ...systemTallWeights.regular,
20 | lineHeight: 43
21 | },
22 | title2: {
23 | ...human[`title2${colorSuffix}Object`],
24 | ...systemTallWeights.regular,
25 | lineHeight: 35
26 | },
27 | title3: {
28 | ...human[`title3${colorSuffix}Object`],
29 | ...systemTallWeights.regular,
30 | lineHeight: 32
31 | },
32 | headline: {
33 | ...human[`headline${colorSuffix}Object`],
34 | ...systemTallWeights.semibold,
35 | lineHeight: 28
36 | },
37 | body: {
38 | ...human[`body${colorSuffix}Object`],
39 | ...systemTallWeights.regular,
40 | lineHeight: 28
41 | },
42 | callout: {
43 | ...human[`callout${colorSuffix}Object`],
44 | ...systemTallWeights.regular,
45 | lineHeight: 26
46 | },
47 | subhead: {
48 | ...human[`subhead${colorSuffix}Object`],
49 | ...systemTallWeights.regular,
50 | lineHeight: 25
51 | },
52 | footnote: {
53 | ...human[`footnote${colorSuffix}Object`],
54 | ...systemTallWeights.regular,
55 | lineHeight: 23
56 | },
57 | caption1: {
58 | ...human[`caption1${colorSuffix}Object`],
59 | ...systemTallWeights.regular,
60 | lineHeight: 20
61 | },
62 | caption2: {
63 | ...human[`caption2${colorSuffix}Object`],
64 | ...systemTallWeights.regular,
65 | lineHeight: 16
66 | }
67 | };
68 | };
69 |
70 | export default CombinedStyleSheet.create({
71 | ...getStylesForColor("black"),
72 | ...suffixProperties(getStylesForColor("white"), "White")
73 | });
74 |
--------------------------------------------------------------------------------
/src/collections/iOSUIKit.js:
--------------------------------------------------------------------------------
1 | import { Platform } from "react-native";
2 | import CombinedStyleSheet from "../internal/CombinedStyleSheet";
3 | import suffixProperties from "../internal/suffixProperties";
4 | import human from "./human";
5 | import systemWeights from "../helpers/systemWeights";
6 |
7 | // Extracted from the sketch file
8 | // https://developer.apple.com/design/resources/
9 | // These are the textStyles that fall under the category of iOS UIKit
10 |
11 | const getStylesForColor = color => {
12 | const colorSuffix = color === "white" ? "White" : "";
13 | return {
14 | largeTitleEmphasized: {
15 | ...human[`largeTitle${colorSuffix}Object`],
16 | ...systemWeights.bold,
17 | letterSpacing: Platform.OS === "ios" ? 0.41 : undefined
18 | },
19 | title3: human[`title3${colorSuffix}Object`],
20 | title3Emphasized: {
21 | ...human[`title3${colorSuffix}Object`],
22 | ...systemWeights.semibold,
23 | letterSpacing: Platform.OS === "ios" ? 0.75 : undefined
24 | },
25 | body: human[`body${colorSuffix}Object`],
26 | bodyEmphasized: {
27 | ...human[`body${colorSuffix}Object`],
28 | ...systemWeights.semibold,
29 | letterSpacing: Platform.OS === "ios" ? -0.41 : undefined
30 | },
31 | subhead: human[`subhead${colorSuffix}Object`],
32 | subheadShort: {
33 | ...human[`subhead${colorSuffix}Object`],
34 | lineHeight: 18
35 | },
36 | subheadEmphasized: {
37 | ...human[`subhead${colorSuffix}Object`],
38 | ...systemWeights.semibold,
39 | letterSpacing: Platform.OS === "ios" ? -0.24 : undefined
40 | },
41 | callout: human[`callout${colorSuffix}Object`],
42 | footnote: human[`footnote${colorSuffix}Object`],
43 | footnoteEmphasized: {
44 | ...human[`footnote${colorSuffix}Object`],
45 | ...systemWeights.semibold,
46 | letterSpacing: Platform.OS === "ios" ? -0.08 : undefined
47 | },
48 | caption2: human[`caption2${colorSuffix}Object`],
49 | caption2Emphasized: {
50 | ...human[`caption2${colorSuffix}Object`],
51 | ...systemWeights.semibold,
52 | letterSpacing: Platform.OS === "ios" ? 0.06 : undefined
53 | }
54 | };
55 | };
56 |
57 | export default CombinedStyleSheet.create({
58 | ...getStylesForColor("black"),
59 | ...suffixProperties(getStylesForColor("white"), "White")
60 | });
61 |
--------------------------------------------------------------------------------
/src/collections/iOSUIKitDense.js:
--------------------------------------------------------------------------------
1 | import { Platform } from "react-native";
2 | import CombinedStyleSheet from "../internal/CombinedStyleSheet";
3 | import suffixProperties from "../internal/suffixProperties";
4 | import humanDense from "./humanDense";
5 | import systemDenseWeights from "../helpers/systemDenseWeights";
6 |
7 | // Extracted from the sketch file
8 | // https://developer.apple.com/design/resources/
9 | // These are the textStyles that fall under the category of iOS UIKit
10 |
11 | const getStylesForColor = color => {
12 | const colorSuffix = color === "white" ? "White" : "";
13 | return {
14 | largeTitleEmphasized: {
15 | ...humanDense[`largeTitle${colorSuffix}Object`],
16 | ...systemDenseWeights.bold,
17 | letterSpacing: Platform.OS === "ios" ? 0.41 : undefined
18 | },
19 | title3: humanDense[`title3${colorSuffix}Object`],
20 | title3Emphasized: {
21 | ...humanDense[`title3${colorSuffix}Object`],
22 | ...systemDenseWeights.semibold,
23 | letterSpacing: Platform.OS === "ios" ? 0.75 : undefined
24 | },
25 | body: humanDense[`body${colorSuffix}Object`],
26 | bodyEmphasized: {
27 | ...humanDense[`body${colorSuffix}Object`],
28 | ...systemDenseWeights.semibold,
29 | letterSpacing: Platform.OS === "ios" ? -0.41 : undefined
30 | },
31 | subhead: humanDense[`subhead${colorSuffix}Object`],
32 | subheadShort: {
33 | ...humanDense[`subhead${colorSuffix}Object`],
34 | lineHeight: 23
35 | },
36 | subheadEmphasized: {
37 | ...humanDense[`subhead${colorSuffix}Object`],
38 | ...systemDenseWeights.semibold,
39 | letterSpacing: Platform.OS === "ios" ? -0.24 : undefined
40 | },
41 | callout: humanDense[`callout${colorSuffix}Object`],
42 | footnote: humanDense[`footnote${colorSuffix}Object`],
43 | footnoteEmphasized: {
44 | ...humanDense[`footnote${colorSuffix}Object`],
45 | ...systemDenseWeights.semibold,
46 | letterSpacing: Platform.OS === "ios" ? -0.08 : undefined
47 | },
48 | caption2: humanDense[`caption2${colorSuffix}Object`],
49 | caption2Emphasized: {
50 | ...humanDense[`caption2${colorSuffix}Object`],
51 | ...systemDenseWeights.semibold,
52 | letterSpacing: Platform.OS === "ios" ? 0.06 : undefined
53 | }
54 | };
55 | };
56 |
57 | export default CombinedStyleSheet.create({
58 | ...getStylesForColor("black"),
59 | ...suffixProperties(getStylesForColor("white"), "White")
60 | });
61 |
--------------------------------------------------------------------------------
/src/collections/iOSUIKitTall.js:
--------------------------------------------------------------------------------
1 | import { Platform } from "react-native";
2 | import CombinedStyleSheet from "../internal/CombinedStyleSheet";
3 | import suffixProperties from "../internal/suffixProperties";
4 | import humanTall from "./humanTall";
5 | import systemTallWeights from "../helpers/systemTallWeights";
6 |
7 | // Extracted from the sketch file
8 | // https://developer.apple.com/design/resources/
9 | // These are the textStyles that fall under the category of iOS UIKit
10 |
11 | const getStylesForColor = color => {
12 | const colorSuffix = color === "white" ? "White" : "";
13 | return {
14 | largeTitleEmphasized: {
15 | ...humanTall[`largeTitle${colorSuffix}Object`],
16 | ...systemTallWeights.bold,
17 | letterSpacing: Platform.OS === "ios" ? 0.41 : undefined
18 | },
19 | title3: humanTall[`title3${colorSuffix}Object`],
20 | title3Emphasized: {
21 | ...humanTall[`title3${colorSuffix}Object`],
22 | ...systemTallWeights.semibold,
23 | letterSpacing: Platform.OS === "ios" ? 0.75 : undefined
24 | },
25 | body: humanTall[`body${colorSuffix}Object`],
26 | bodyEmphasized: {
27 | ...humanTall[`body${colorSuffix}Object`],
28 | ...systemTallWeights.semibold,
29 | letterSpacing: Platform.OS === "ios" ? -0.41 : undefined
30 | },
31 | subhead: humanTall[`subhead${colorSuffix}Object`],
32 | subheadShort: {
33 | ...humanTall[`subhead${colorSuffix}Object`],
34 | lineHeight: 23
35 | },
36 | subheadEmphasized: {
37 | ...humanTall[`subhead${colorSuffix}Object`],
38 | ...systemTallWeights.semibold,
39 | letterSpacing: Platform.OS === "ios" ? -0.24 : undefined
40 | },
41 | callout: humanTall[`callout${colorSuffix}Object`],
42 | footnote: humanTall[`footnote${colorSuffix}Object`],
43 | footnoteEmphasized: {
44 | ...humanTall[`footnote${colorSuffix}Object`],
45 | ...systemTallWeights.semibold,
46 | letterSpacing: Platform.OS === "ios" ? -0.08 : undefined
47 | },
48 | caption2: humanTall[`caption2${colorSuffix}Object`],
49 | caption2Emphasized: {
50 | ...humanTall[`caption2${colorSuffix}Object`],
51 | ...systemTallWeights.semibold,
52 | letterSpacing: Platform.OS === "ios" ? 0.06 : undefined
53 | }
54 | };
55 | };
56 |
57 | export default CombinedStyleSheet.create({
58 | ...getStylesForColor("black"),
59 | ...suffixProperties(getStylesForColor("white"), "White")
60 | });
61 |
--------------------------------------------------------------------------------
/src/collections/material.js:
--------------------------------------------------------------------------------
1 | import { Platform } from "react-native";
2 | import CombinedStyleSheet from "../internal/CombinedStyleSheet";
3 | import suffixProperties from "../internal/suffixProperties";
4 | import systemWeights from "../helpers/systemWeights";
5 | import sanFranciscoSpacing from "../helpers/sanFranciscoSpacing";
6 | import materialColors from "../helpers/materialColors";
7 |
8 | // https://material.io/guidelines/style/typography.html#typography-styles
9 |
10 | const colors = {
11 | black: {
12 | primary: materialColors.blackPrimary,
13 | secondary: materialColors.blackSecondary,
14 | tertiary: materialColors.blackTertiary
15 | },
16 | white: {
17 | primary: materialColors.whitePrimary,
18 | secondary: materialColors.whiteSecondary,
19 | tertiary: materialColors.whiteTertiary
20 | }
21 | };
22 |
23 | const getStylesForColor = color => ({
24 | display4: {
25 | fontSize: 112,
26 | lineHeight: 128,
27 | ...systemWeights.light,
28 | letterSpacing: Platform.OS === "ios" ? sanFranciscoSpacing(112) : undefined,
29 | color: colors[color].secondary
30 | },
31 | display3: {
32 | fontSize: 56,
33 | lineHeight: 64,
34 | ...systemWeights.regular,
35 | letterSpacing: Platform.OS === "ios" ? sanFranciscoSpacing(56) : undefined,
36 | color: colors[color].secondary
37 | },
38 | display2: {
39 | fontSize: 45,
40 | lineHeight: 52,
41 | ...systemWeights.regular,
42 | letterSpacing: Platform.OS === "ios" ? sanFranciscoSpacing(45) : undefined,
43 | color: colors[color].secondary
44 | },
45 | display1: {
46 | fontSize: 34,
47 | lineHeight: 40,
48 | ...systemWeights.regular,
49 | letterSpacing: Platform.OS === "ios" ? sanFranciscoSpacing(34) : undefined,
50 | color: colors[color].secondary
51 | },
52 | headline: {
53 | fontSize: 24,
54 | lineHeight: 32,
55 | ...systemWeights.regular,
56 | letterSpacing: Platform.OS === "ios" ? sanFranciscoSpacing(24) : undefined,
57 | color: colors[color].primary
58 | },
59 | title: {
60 | fontSize: 20,
61 | lineHeight: 28,
62 | ...systemWeights.semibold,
63 | letterSpacing: Platform.OS === "ios" ? sanFranciscoSpacing(20) : undefined,
64 | color: colors[color].primary
65 | },
66 | subheading: {
67 | fontSize: 16,
68 | lineHeight: 24,
69 | ...systemWeights.regular,
70 | letterSpacing: Platform.OS === "ios" ? sanFranciscoSpacing(16) : undefined,
71 | color: colors[color].primary
72 | },
73 | body2: {
74 | fontSize: 14,
75 | lineHeight: 24,
76 | ...systemWeights.semibold,
77 | letterSpacing: Platform.OS === "ios" ? sanFranciscoSpacing(14) : undefined,
78 | color: colors[color].primary
79 | },
80 | body1: {
81 | fontSize: 14,
82 | lineHeight: 20,
83 | ...systemWeights.regular,
84 | letterSpacing: Platform.OS === "ios" ? sanFranciscoSpacing(14) : undefined,
85 | color: colors[color].primary
86 | },
87 | caption: {
88 | fontSize: 12,
89 | lineHeight: 16,
90 | ...systemWeights.regular,
91 | letterSpacing: Platform.OS === "ios" ? sanFranciscoSpacing(12) : undefined,
92 | color: colors[color].secondary
93 | },
94 | button: {
95 | fontSize: 14,
96 | lineHeight: 20,
97 | ...systemWeights.semibold,
98 | letterSpacing: Platform.OS === "ios" ? sanFranciscoSpacing(14) : undefined,
99 | color: colors[color].primary
100 | }
101 | });
102 |
103 | export default CombinedStyleSheet.create({
104 | ...getStylesForColor("black"),
105 | ...suffixProperties(getStylesForColor("white"), "White")
106 | });
107 |
--------------------------------------------------------------------------------
/src/collections/materialDense.js:
--------------------------------------------------------------------------------
1 | import { Platform } from "react-native";
2 | import CombinedStyleSheet from "../internal/CombinedStyleSheet";
3 | import suffixProperties from "../internal/suffixProperties";
4 | import material from "./material";
5 | import systemDenseWeights from "../helpers/systemDenseWeights";
6 | import sanFranciscoSpacing from "../helpers/sanFranciscoSpacing";
7 |
8 | // https://material.io/guidelines/style/typography.html#typography-styles
9 |
10 | const getStylesForColor = color => {
11 | const colorSuffix = color === "white" ? "White" : "";
12 | return {
13 | display4: {
14 | ...material[`display4${colorSuffix}Object`],
15 | ...systemDenseWeights.light,
16 | lineHeight: 164
17 | },
18 | display3: {
19 | ...material[`display3${colorSuffix}Object`],
20 | ...systemDenseWeights.regular,
21 | lineHeight: 82
22 | },
23 | display2: {
24 | ...material[`display2${colorSuffix}Object`],
25 | ...systemDenseWeights.regular,
26 | lineHeight: 66
27 | },
28 | display1: {
29 | ...material[`display1${colorSuffix}Object`],
30 | ...systemDenseWeights.regular,
31 | lineHeight: 50
32 | },
33 | headline: {
34 | ...material[`headline${colorSuffix}Object`],
35 | ...systemDenseWeights.regular,
36 | lineHeight: 40
37 | },
38 | title: {
39 | ...material[`title${colorSuffix}Object`],
40 | ...systemDenseWeights.semibold,
41 | fontSize: 21,
42 | lineHeight: 36,
43 | letterSpacing: Platform.OS === "ios" ? sanFranciscoSpacing(21) : undefined
44 | },
45 | subheading: {
46 | ...material[`subheading${colorSuffix}Object`],
47 | ...systemDenseWeights.regular,
48 | fontSize: 17,
49 | lineHeight: 30,
50 | letterSpacing: Platform.OS === "ios" ? sanFranciscoSpacing(17) : undefined
51 | },
52 | body2: {
53 | ...material[`body2${colorSuffix}Object`],
54 | ...systemDenseWeights.semibold,
55 | fontSize: 15,
56 | lineHeight: 30,
57 | letterSpacing: Platform.OS === "ios" ? sanFranciscoSpacing(15) : undefined
58 | },
59 | body1: {
60 | ...material[`body1${colorSuffix}Object`],
61 | ...systemDenseWeights.regular,
62 | fontSize: 15,
63 | lineHeight: 26,
64 | letterSpacing: Platform.OS === "ios" ? sanFranciscoSpacing(15) : undefined
65 | },
66 | caption: {
67 | ...material[`caption${colorSuffix}Object`],
68 | ...systemDenseWeights.regular,
69 | fontSize: 13,
70 | lineHeight: 20,
71 | letterSpacing: Platform.OS === "ios" ? sanFranciscoSpacing(13) : undefined
72 | },
73 | button: {
74 | ...material[`button${colorSuffix}Object`],
75 | ...systemDenseWeights.semibold,
76 | fontSize: 15,
77 | lineHeight: 26,
78 | letterSpacing: Platform.OS === "ios" ? sanFranciscoSpacing(15) : undefined
79 | }
80 | };
81 | };
82 |
83 | export default CombinedStyleSheet.create({
84 | ...getStylesForColor("black"),
85 | ...suffixProperties(getStylesForColor("white"), "White")
86 | });
87 |
--------------------------------------------------------------------------------
/src/collections/materialTall.js:
--------------------------------------------------------------------------------
1 | import { Platform } from "react-native";
2 | import CombinedStyleSheet from "../internal/CombinedStyleSheet";
3 | import suffixProperties from "../internal/suffixProperties";
4 | import material from "./material";
5 | import systemTallWeights from "../helpers/systemTallWeights";
6 | import sanFranciscoSpacing from "../helpers/sanFranciscoSpacing";
7 |
8 | // https://material.io/guidelines/style/typography.html#typography-styles
9 |
10 | const getStylesForColor = color => {
11 | const colorSuffix = color === "white" ? "White" : "";
12 | return {
13 | display4: {
14 | ...material[`display4${colorSuffix}Object`],
15 | ...systemTallWeights.light,
16 | lineHeight: 164
17 | },
18 | display3: {
19 | ...material[`display3${colorSuffix}Object`],
20 | ...systemTallWeights.regular,
21 | lineHeight: 82
22 | },
23 | display2: {
24 | ...material[`display2${colorSuffix}Object`],
25 | ...systemTallWeights.regular,
26 | lineHeight: 66
27 | },
28 | display1: {
29 | ...material[`display1${colorSuffix}Object`],
30 | ...systemTallWeights.regular,
31 | lineHeight: 50
32 | },
33 | headline: {
34 | ...material[`headline${colorSuffix}Object`],
35 | ...systemTallWeights.regular,
36 | lineHeight: 40
37 | },
38 | title: {
39 | ...material[`title${colorSuffix}Object`],
40 | ...systemTallWeights.semibold,
41 | fontSize: 21,
42 | lineHeight: 36,
43 | letterSpacing: Platform.OS === "ios" ? sanFranciscoSpacing(21) : undefined
44 | },
45 | subheading: {
46 | ...material[`subheading${colorSuffix}Object`],
47 | ...systemTallWeights.regular,
48 | fontSize: 17,
49 | lineHeight: 30,
50 | letterSpacing: Platform.OS === "ios" ? sanFranciscoSpacing(17) : undefined
51 | },
52 | body2: {
53 | ...material[`body2${colorSuffix}Object`],
54 | ...systemTallWeights.semibold,
55 | fontSize: 15,
56 | lineHeight: 30,
57 | letterSpacing: Platform.OS === "ios" ? sanFranciscoSpacing(15) : undefined
58 | },
59 | body1: {
60 | ...material[`body1${colorSuffix}Object`],
61 | ...systemTallWeights.regular,
62 | fontSize: 15,
63 | lineHeight: 26,
64 | letterSpacing: Platform.OS === "ios" ? sanFranciscoSpacing(15) : undefined
65 | },
66 | caption: {
67 | ...material[`caption${colorSuffix}Object`],
68 | ...systemTallWeights.regular,
69 | fontSize: 13,
70 | lineHeight: 20,
71 | letterSpacing: Platform.OS === "ios" ? sanFranciscoSpacing(13) : undefined
72 | },
73 | button: {
74 | ...material[`button${colorSuffix}Object`],
75 | ...systemTallWeights.semibold,
76 | fontSize: 15,
77 | lineHeight: 26,
78 | letterSpacing: Platform.OS === "ios" ? sanFranciscoSpacing(15) : undefined
79 | }
80 | };
81 | };
82 |
83 | export default CombinedStyleSheet.create({
84 | ...getStylesForColor("black"),
85 | ...suffixProperties(getStylesForColor("white"), "White")
86 | });
87 |
--------------------------------------------------------------------------------
/src/helpers/iOSColors.js:
--------------------------------------------------------------------------------
1 | // Extracted from the sketch file
2 | // https://developer.apple.com/design/resources/
3 | // And also
4 | // https://developer.apple.com/ios/human-interface-guidelines/visual-design/color/
5 |
6 | const iOSColors = {
7 | red: "#FF3B30",
8 | orange: "#FF9500",
9 | yellow: "#FFCC00",
10 | green: "#4CD964",
11 | tealBlue: "#5AC8FA",
12 | blue: "#007AFF",
13 | purple: "#5856D6",
14 | pink: "#FF2D55",
15 |
16 | white: "#FFFFFF",
17 | customGray: "#EFEFF4",
18 | lightGray: "#E5E5EA",
19 | lightGray2: "#D1D1D6",
20 | midGray: "#C7C7CC",
21 | gray: "#8E8E93",
22 | black: "#000000"
23 | };
24 |
25 | export default iOSColors;
26 |
--------------------------------------------------------------------------------
/src/helpers/materialColors.js:
--------------------------------------------------------------------------------
1 | // https://material.io/guidelines/style/color.html#color-usability
2 |
3 | const materialColors = {
4 | blackPrimary: "rgba(0,0,0,0.87)",
5 | blackSecondary: "rgba(0,0,0,0.54)",
6 | blackTertiary: "rgba(0,0,0,0.38)",
7 | whitePrimary: "rgba(255,255,255,1)",
8 | whiteSecondary: "rgba(255,255,255,0.70)",
9 | whiteTertiary: "rgba(255,255,255,0.50)"
10 | };
11 |
12 | export default materialColors;
13 |
--------------------------------------------------------------------------------
/src/helpers/notoCJKWeights.js:
--------------------------------------------------------------------------------
1 | // Noto Sans CJK has many more steps defined but they're not shipped with Android yet.
2 |
3 | const notoCJKWeights = {
4 | regular: {
5 | includeFontPadding: false,
6 | fontFamily: "sans-serif",
7 | fontWeight: "normal",
8 | backgroundColor: "transparent"
9 | },
10 | bold: {
11 | includeFontPadding: false,
12 | fontFamily: "sans-serif",
13 | fontWeight: "bold",
14 | backgroundColor: "transparent"
15 | }
16 | };
17 |
18 | export default notoCJKWeights;
19 |
--------------------------------------------------------------------------------
/src/helpers/notoTallWeights.js:
--------------------------------------------------------------------------------
1 | const notoTallWeights = {
2 | regular: {
3 | includeFontPadding: false,
4 | fontFamily: "sans-serif",
5 | fontWeight: "normal",
6 | backgroundColor: "transparent"
7 | },
8 | bold: {
9 | includeFontPadding: false,
10 | fontFamily: "sans-serif",
11 | fontWeight: "bold",
12 | backgroundColor: "transparent"
13 | }
14 | };
15 |
16 | export default notoTallWeights;
17 |
--------------------------------------------------------------------------------
/src/helpers/robotoWeights.js:
--------------------------------------------------------------------------------
1 | const robotoWeights = {
2 | thin: {
3 | includeFontPadding: false,
4 | fontFamily: "sans-serif-thin",
5 | fontWeight: "normal",
6 | backgroundColor: "transparent"
7 | },
8 | light: {
9 | includeFontPadding: false,
10 | fontFamily: "sans-serif-light",
11 | fontWeight: "normal",
12 | backgroundColor: "transparent"
13 | },
14 | regular: {
15 | includeFontPadding: false,
16 | fontFamily: "sans-serif",
17 | fontWeight: "normal",
18 | backgroundColor: "transparent"
19 | },
20 | medium: {
21 | includeFontPadding: false,
22 | fontFamily: "sans-serif-medium",
23 | fontWeight: "normal",
24 | backgroundColor: "transparent"
25 | },
26 | bold: {
27 | includeFontPadding: false,
28 | fontFamily: "sans-serif",
29 | fontWeight: "bold",
30 | backgroundColor: "transparent"
31 | },
32 | condensed: {
33 | includeFontPadding: false,
34 | fontFamily: "sans-serif-condensed",
35 | fontWeight: "normal",
36 | backgroundColor: "transparent"
37 | },
38 | condensedBold: {
39 | includeFontPadding: false,
40 | fontFamily: "sans-serif-condensed",
41 | fontWeight: "bold",
42 | backgroundColor: "transparent"
43 | }
44 | };
45 |
46 | export default robotoWeights;
47 |
--------------------------------------------------------------------------------
/src/helpers/sanFranciscoSpacing.js:
--------------------------------------------------------------------------------
1 | // https://github.com/kylehickinson/Sketch-SF-UI-Font-Fixer
2 | // http://matthewbuchanan.s3.amazonaws.com/sketch/iOS-Tracking-Chart.png
3 |
4 | const spacingBySize = {
5 | // SF UI/Pro Text
6 | 6: 0.246,
7 | 7: 0.223,
8 | 8: 0.208,
9 | 9: 0.171,
10 | 10: 0.12,
11 | 11: 0.06,
12 | 12: 0,
13 | 13: -0.078,
14 | 14: -0.154,
15 | 15: -0.24,
16 | 16: -0.32,
17 | 17: -0.408,
18 | 18: -0.45,
19 | 19: -0.49,
20 | // SF UI/Pro Display
21 | 20: 0.361328,
22 | 21: 0.348633,
23 | 22: 0.34375,
24 | 23: 0.348145,
25 | 24: 0.351562,
26 | 25: 0.354004,
27 | 26: 0.355469,
28 | 27: 0.355957,
29 | 28: 0.355469,
30 | 29: 0.354004,
31 | 30: 0.366211,
32 | 31: 0.363281,
33 | 32: 0.375,
34 | 33: 0.370605,
35 | 34: 0.381836,
36 | 35: 0.375977,
37 | 36: 0.386719,
38 | 37: 0.379395,
39 | 38: 0.371094,
40 | 39: 0.380859,
41 | 40: 0.371094,
42 | 41: 0.380371,
43 | 42: 0.369141,
44 | 43: 0.37793,
45 | 44: 0.365234,
46 | 45: 0.351562,
47 | 46: 0.359375,
48 | 47: 0.344238,
49 | 48: 0.351562,
50 | 49: 0.334961,
51 | 50: 0.341797,
52 | 51: 0.32373,
53 | 52: 0.304688,
54 | 53: 0.310547,
55 | 54: 0.290039,
56 | 55: 0.29541,
57 | 56: 0.273438,
58 | 57: 0.27832,
59 | 58: 0.254883,
60 | 59: 0.230469,
61 | 60: 0.234375,
62 | 61: 0.208496,
63 | 62: 0.211914,
64 | 63: 0.18457,
65 | 64: 0.1875,
66 | 65: 0.158691,
67 | 66: 0.161133,
68 | 67: 0.130859,
69 | 68: 0.132812,
70 | 69: 0.134766,
71 | 70: 0.102539,
72 | 71: 0.104004,
73 | 72: 0.105469,
74 | 73: 0.071289,
75 | 74: 0.072266,
76 | 75: 0.036621,
77 | 76: 0.037109,
78 | 77: 0.037598,
79 | 78: 0.0,
80 | 79: 0.0,
81 | 80: 0.0,
82 | 81: 0.0
83 | };
84 |
85 | const sanFranciscoSpacing = size =>
86 | spacingBySize[Math.min(Math.max(size, 6), 81)];
87 |
88 | export default sanFranciscoSpacing;
89 |
--------------------------------------------------------------------------------
/src/helpers/sanFranciscoWeights.js:
--------------------------------------------------------------------------------
1 | // These match the names on
2 | // https://developer.apple.com/documentation/uikit/uifontdescriptor/font_weights
3 |
4 | const sanFranciscoWeights = {
5 | thin: {
6 | fontFamily: "System",
7 | fontWeight: "100",
8 | backgroundColor: "transparent"
9 | },
10 | ultraLight: {
11 | fontFamily: "System",
12 | fontWeight: "200",
13 | backgroundColor: "transparent"
14 | },
15 | light: {
16 | fontFamily: "System",
17 | fontWeight: "300",
18 | backgroundColor: "transparent"
19 | },
20 | regular: {
21 | fontFamily: "System",
22 | fontWeight: "400",
23 | backgroundColor: "transparent"
24 | },
25 | medium: {
26 | fontFamily: "System",
27 | fontWeight: "500",
28 | backgroundColor: "transparent"
29 | },
30 | semibold: {
31 | fontFamily: "System",
32 | fontWeight: "600",
33 | backgroundColor: "transparent"
34 | },
35 | bold: {
36 | fontFamily: "System",
37 | fontWeight: "700",
38 | backgroundColor: "transparent"
39 | },
40 | heavy: {
41 | fontFamily: "System",
42 | fontWeight: "800",
43 | backgroundColor: "transparent"
44 | },
45 | black: {
46 | fontFamily: "System",
47 | fontWeight: "900",
48 | backgroundColor: "transparent"
49 | }
50 | };
51 |
52 | export default sanFranciscoWeights;
53 |
--------------------------------------------------------------------------------
/src/helpers/systemDenseWeights.android.js:
--------------------------------------------------------------------------------
1 | import notoCJKWeights from "../helpers/notoCJKWeights";
2 |
3 | // For now these weights are really restricted on Android, even though San Francisco
4 | // has many steps defined for some dense languages, Noto Sans CJK only has regular
5 | // and bold shipped with Android
6 |
7 | // San Francisco falls back from regular to bold starting from semibold for the scripts
8 | // for which it doesn't have so many weight steps, so let's do the same for Noto CJK.
9 |
10 | const systemDenseWeights = {
11 | thin: notoCJKWeights.regular,
12 | light: notoCJKWeights.regular,
13 | regular: notoCJKWeights.regular,
14 | semibold: notoCJKWeights.bold,
15 | bold: notoCJKWeights.bold
16 | };
17 |
18 | export default systemDenseWeights;
19 |
--------------------------------------------------------------------------------
/src/helpers/systemDenseWeights.ios.js:
--------------------------------------------------------------------------------
1 | import sanFranciscoWeights from "../helpers/sanFranciscoWeights";
2 |
3 | const systemDenseWeights = {
4 | thin: sanFranciscoWeights.thin,
5 | light: sanFranciscoWeights.light,
6 | regular: sanFranciscoWeights.regular,
7 | semibold: sanFranciscoWeights.semibold,
8 | bold: sanFranciscoWeights.bold
9 | };
10 |
11 | export default systemDenseWeights;
12 |
--------------------------------------------------------------------------------
/src/helpers/systemDenseWeights.web.js:
--------------------------------------------------------------------------------
1 | import webWeights from "../helpers/webWeights";
2 |
3 | const systemDenseWeights = {
4 | thin: webWeights.thin,
5 | light: webWeights.light,
6 | regular: webWeights.regular,
7 | semibold: webWeights.semibold,
8 | bold: webWeights.bold
9 | };
10 |
11 | export default systemDenseWeights;
12 |
--------------------------------------------------------------------------------
/src/helpers/systemTallWeights.android.js:
--------------------------------------------------------------------------------
1 | import notoTallWeights from "../helpers/notoTallWeights";
2 |
3 | // San Francisco falls back from regular to bold starting from semibold for the scripts
4 | // for which it doesn't have so many weight steps, so let's do the same for Noto.
5 |
6 | const systemTallWeights = {
7 | thin: notoTallWeights.regular,
8 | light: notoTallWeights.regular,
9 | regular: notoTallWeights.regular,
10 | semibold: notoTallWeights.bold,
11 | bold: notoTallWeights.bold
12 | };
13 |
14 | export default systemTallWeights;
15 |
--------------------------------------------------------------------------------
/src/helpers/systemTallWeights.ios.js:
--------------------------------------------------------------------------------
1 | import sanFranciscoWeights from "../helpers/sanFranciscoWeights";
2 |
3 | const systemTallWeights = {
4 | thin: sanFranciscoWeights.thin,
5 | light: sanFranciscoWeights.light,
6 | regular: sanFranciscoWeights.regular,
7 | semibold: sanFranciscoWeights.semibold,
8 | bold: sanFranciscoWeights.bold
9 | };
10 |
11 | export default systemTallWeights;
12 |
--------------------------------------------------------------------------------
/src/helpers/systemTallWeights.web.js:
--------------------------------------------------------------------------------
1 | import webWeights from "../helpers/webWeights";
2 |
3 | const systemTallWeights = {
4 | thin: webWeights.thin,
5 | light: webWeights.light,
6 | regular: webWeights.regular,
7 | semibold: webWeights.semibold,
8 | bold: webWeights.bold
9 | };
10 |
11 | export default systemTallWeights;
12 |
--------------------------------------------------------------------------------
/src/helpers/systemWeights.android.js:
--------------------------------------------------------------------------------
1 | import robotoWeights from "../helpers/robotoWeights";
2 |
3 | const systemWeights = {
4 | thin: robotoWeights.thin,
5 | light: robotoWeights.light,
6 | regular: robotoWeights.regular,
7 | semibold: robotoWeights.medium,
8 | bold: robotoWeights.bold
9 | };
10 |
11 | export default systemWeights;
12 |
--------------------------------------------------------------------------------
/src/helpers/systemWeights.ios.js:
--------------------------------------------------------------------------------
1 | import sanFranciscoWeights from "../helpers/sanFranciscoWeights";
2 |
3 | const systemWeights = {
4 | thin: sanFranciscoWeights.thin,
5 | light: sanFranciscoWeights.light,
6 | regular: sanFranciscoWeights.regular,
7 | semibold: sanFranciscoWeights.semibold,
8 | bold: sanFranciscoWeights.bold
9 | };
10 |
11 | export default systemWeights;
12 |
--------------------------------------------------------------------------------
/src/helpers/systemWeights.web.js:
--------------------------------------------------------------------------------
1 | import webWeights from "../helpers/webWeights";
2 |
3 | const systemWeights = {
4 | thin: webWeights.thin,
5 | light: webWeights.light,
6 | regular: webWeights.regular,
7 | semibold: webWeights.semibold,
8 | bold: webWeights.bold
9 | };
10 |
11 | export default systemWeights;
12 |
--------------------------------------------------------------------------------
/src/helpers/webWeights.js:
--------------------------------------------------------------------------------
1 | const webWeights = {
2 | thin: {
3 | fontFamily: "System",
4 | fontWeight: "100"
5 | },
6 | ultraLight: {
7 | fontFamily: "System",
8 | fontWeight: "200"
9 | },
10 | light: {
11 | fontFamily: "System",
12 | fontWeight: "300"
13 | },
14 | regular: {
15 | fontFamily: "System",
16 | fontWeight: "400"
17 | },
18 | medium: {
19 | fontFamily: "System",
20 | fontWeight: "500"
21 | },
22 | semibold: {
23 | fontFamily: "System",
24 | fontWeight: "600"
25 | },
26 | bold: {
27 | fontFamily: "System",
28 | fontWeight: "700"
29 | },
30 | heavy: {
31 | fontFamily: "System",
32 | fontWeight: "800"
33 | },
34 | black: {
35 | fontFamily: "System",
36 | fontWeight: "900"
37 | }
38 | };
39 |
40 | export default webWeights;
41 |
--------------------------------------------------------------------------------
/src/index.d.ts:
--------------------------------------------------------------------------------
1 | import { StyleProp, TextStyle } from "react-native";
2 | type Style = StyleProp<TextStyle>;
3 |
4 | export var material: {
5 | display4: Style;
6 | display4Object: TextStyle;
7 | display3: Style;
8 | display3Object: TextStyle;
9 | display2: Style;
10 | display2Object: TextStyle;
11 | display1: Style;
12 | display1Object: TextStyle;
13 | headline: Style;
14 | headlineObject: TextStyle;
15 | title: Style;
16 | titleObject: TextStyle;
17 | subheading: Style;
18 | subheadingObject: TextStyle;
19 | body2: Style;
20 | body2Object: TextStyle;
21 | body1: Style;
22 | body1Object: TextStyle;
23 | caption: Style;
24 | captionObject: TextStyle;
25 | button: Style;
26 | buttonObject: TextStyle;
27 |
28 | display4White: Style;
29 | display4WhiteObject: TextStyle;
30 | display3White: Style;
31 | display3WhiteObject: TextStyle;
32 | display2White: Style;
33 | display2WhiteObject: TextStyle;
34 | display1White: Style;
35 | display1WhiteObject: TextStyle;
36 | headlineWhite: Style;
37 | headlineWhiteObject: TextStyle;
38 | titleWhite: Style;
39 | titleWhiteObject: TextStyle;
40 | subheadingWhite: Style;
41 | subheadingWhiteObject: TextStyle;
42 | body2White: Style;
43 | body2WhiteObject: TextStyle;
44 | body1White: Style;
45 | body1WhiteObject: TextStyle;
46 | captionWhite: Style;
47 | captionWhiteObject: TextStyle;
48 | buttonWhite: Style;
49 | buttonWhiteObject: TextStyle;
50 | };
51 |
52 | export var materialDense: {
53 | display4: Style;
54 | display4Object: TextStyle;
55 | display3: Style;
56 | display3Object: TextStyle;
57 | display2: Style;
58 | display2Object: TextStyle;
59 | display1: Style;
60 | display1Object: TextStyle;
61 | headline: Style;
62 | headlineObject: TextStyle;
63 | title: Style;
64 | titleObject: TextStyle;
65 | subheading: Style;
66 | subheadingObject: TextStyle;
67 | body2: Style;
68 | body2Object: TextStyle;
69 | body1: Style;
70 | body1Object: TextStyle;
71 | caption: Style;
72 | captionObject: TextStyle;
73 | button: Style;
74 | buttonObject: TextStyle;
75 |
76 | display4White: Style;
77 | display4WhiteObject: TextStyle;
78 | display3White: Style;
79 | display3WhiteObject: TextStyle;
80 | display2White: Style;
81 | display2WhiteObject: TextStyle;
82 | display1White: Style;
83 | display1WhiteObject: TextStyle;
84 | headlineWhite: Style;
85 | headlineWhiteObject: TextStyle;
86 | titleWhite: Style;
87 | titleWhiteObject: TextStyle;
88 | subheadingWhite: Style;
89 | subheadingWhiteObject: TextStyle;
90 | body2White: Style;
91 | body2WhiteObject: TextStyle;
92 | body1White: Style;
93 | body1WhiteObject: TextStyle;
94 | captionWhite: Style;
95 | captionWhiteObject: TextStyle;
96 | buttonWhite: Style;
97 | buttonWhiteObject: TextStyle;
98 | };
99 |
100 | export var materialTall: {
101 | display4: Style;
102 | display4Object: TextStyle;
103 | display3: Style;
104 | display3Object: TextStyle;
105 | display2: Style;
106 | display2Object: TextStyle;
107 | display1: Style;
108 | display1Object: TextStyle;
109 | headline: Style;
110 | headlineObject: TextStyle;
111 | title: Style;
112 | titleObject: TextStyle;
113 | subheading: Style;
114 | subheadingObject: TextStyle;
115 | body2: Style;
116 | body2Object: TextStyle;
117 | body1: Style;
118 | body1Object: TextStyle;
119 | caption: Style;
120 | captionObject: TextStyle;
121 | button: Style;
122 | buttonObject: TextStyle;
123 |
124 | display4White: Style;
125 | display4WhiteObject: TextStyle;
126 | display3White: Style;
127 | display3WhiteObject: TextStyle;
128 | display2White: Style;
129 | display2WhiteObject: TextStyle;
130 | display1White: Style;
131 | display1WhiteObject: TextStyle;
132 | headlineWhite: Style;
133 | headlineWhiteObject: TextStyle;
134 | titleWhite: Style;
135 | titleWhiteObject: TextStyle;
136 | subheadingWhite: Style;
137 | subheadingWhiteObject: TextStyle;
138 | body2White: Style;
139 | body2WhiteObject: TextStyle;
140 | body1White: Style;
141 | body1WhiteObject: TextStyle;
142 | captionWhite: Style;
143 | captionWhiteObject: TextStyle;
144 | buttonWhite: Style;
145 | buttonWhiteObject: TextStyle;
146 | };
147 |
148 | export var human: {
149 | largeTitle: Style;
150 | largeTitleObject: TextStyle;
151 | title1: Style;
152 | title1Object: TextStyle;
153 | title2: Style;
154 | title2Object: TextStyle;
155 | title3: Style;
156 | title3Object: TextStyle;
157 | headline: Style;
158 | headlineObject: TextStyle;
159 | body: Style;
160 | bodyObject: TextStyle;
161 | callout: Style;
162 | calloutObject: TextStyle;
163 | subhead: Style;
164 | subheadObject: TextStyle;
165 | footnote: Style;
166 | footnoteObject: TextStyle;
167 | caption1: Style;
168 | caption1Object: TextStyle;
169 | caption2: Style;
170 | caption2Object: TextStyle;
171 |
172 | largeTitleWhite: Style;
173 | largeTitleWhiteObject: TextStyle;
174 | title1White: Style;
175 | title1WhiteObject: TextStyle;
176 | title2White: Style;
177 | title2WhiteObject: TextStyle;
178 | title3White: Style;
179 | title3WhiteObject: TextStyle;
180 | headlineWhite: Style;
181 | headlineWhiteObject: TextStyle;
182 | bodyWhite: Style;
183 | bodyWhiteObject: TextStyle;
184 | calloutWhite: Style;
185 | calloutWhiteObject: TextStyle;
186 | subheadWhite: Style;
187 | subheadWhiteObject: TextStyle;
188 | footnoteWhite: Style;
189 | footnoteWhiteObject: TextStyle;
190 | caption1White: Style;
191 | caption1WhiteObject: TextStyle;
192 | caption2White: Style;
193 | caption2WhiteObject: TextStyle;
194 | };
195 |
196 | export var humanDense: {
197 | largeTitle: Style;
198 | largeTitleObject: TextStyle;
199 | title1: Style;
200 | title1Object: TextStyle;
201 | title2: Style;
202 | title2Object: TextStyle;
203 | title3: Style;
204 | title3Object: TextStyle;
205 | headline: Style;
206 | headlineObject: TextStyle;
207 | body: Style;
208 | bodyObject: TextStyle;
209 | callout: Style;
210 | calloutObject: TextStyle;
211 | subhead: Style;
212 | subheadObject: TextStyle;
213 | footnote: Style;
214 | footnoteObject: TextStyle;
215 | caption1: Style;
216 | caption1Object: TextStyle;
217 | caption2: Style;
218 | caption2Object: TextStyle;
219 |
220 | largeTitleWhite: Style;
221 | largeTitleWhiteObject: TextStyle;
222 | title1White: Style;
223 | title1WhiteObject: TextStyle;
224 | title2White: Style;
225 | title2WhiteObject: TextStyle;
226 | title3White: Style;
227 | title3WhiteObject: TextStyle;
228 | headlineWhite: Style;
229 | headlineWhiteObject: TextStyle;
230 | bodyWhite: Style;
231 | bodyWhiteObject: TextStyle;
232 | calloutWhite: Style;
233 | calloutWhiteObject: TextStyle;
234 | subheadWhite: Style;
235 | subheadWhiteObject: TextStyle;
236 | footnoteWhite: Style;
237 | footnoteWhiteObject: TextStyle;
238 | caption1White: Style;
239 | caption1WhiteObject: TextStyle;
240 | caption2White: Style;
241 | caption2WhiteObject: TextStyle;
242 | };
243 |
244 | export var humanTall: {
245 | largeTitle: Style;
246 | largeTitleObject: TextStyle;
247 | title1: Style;
248 | title1Object: TextStyle;
249 | title2: Style;
250 | title2Object: TextStyle;
251 | title3: Style;
252 | title3Object: TextStyle;
253 | headline: Style;
254 | headlineObject: TextStyle;
255 | body: Style;
256 | bodyObject: TextStyle;
257 | callout: Style;
258 | calloutObject: TextStyle;
259 | subhead: Style;
260 | subheadObject: TextStyle;
261 | footnote: Style;
262 | footnoteObject: TextStyle;
263 | caption1: Style;
264 | caption1Object: TextStyle;
265 | caption2: Style;
266 | caption2Object: TextStyle;
267 |
268 | largeTitleWhite: Style;
269 | largeTitleWhiteObject: TextStyle;
270 | title1White: Style;
271 | title1WhiteObject: TextStyle;
272 | title2White: Style;
273 | title2WhiteObject: TextStyle;
274 | title3White: Style;
275 | title3WhiteObject: TextStyle;
276 | headlineWhite: Style;
277 | headlineWhiteObject: TextStyle;
278 | bodyWhite: Style;
279 | bodyWhiteObject: TextStyle;
280 | calloutWhite: Style;
281 | calloutWhiteObject: TextStyle;
282 | subheadWhite: Style;
283 | subheadWhiteObject: TextStyle;
284 | footnoteWhite: Style;
285 | footnoteWhiteObject: TextStyle;
286 | caption1White: Style;
287 | caption1WhiteObject: TextStyle;
288 | caption2White: Style;
289 | caption2WhiteObject: TextStyle;
290 | };
291 |
292 | export var iOSUIKit: {
293 | largeTitleEmphasized: Style;
294 | largeTitleEmphasizedObject: TextStyle;
295 | title3Emphasized: Style;
296 | title3EmphasizedObject: TextStyle;
297 | title3: Style;
298 | title3Object: TextStyle;
299 | bodyEmphasized: Style;
300 | bodyEmphasizedObject: TextStyle;
301 | body: Style;
302 | bodyObject: TextStyle;
303 | subheadEmphasized: Style;
304 | subheadEmphasizedObject: TextStyle;
305 | subhead: Style;
306 | subheadObject: TextStyle;
307 | subheadShort: Style;
308 | subheadShortObject: TextStyle;
309 | callout: Style;
310 | calloutObject: TextStyle;
311 | footnoteEmphasized: Style;
312 | footnoteEmphasizedObject: TextStyle;
313 | footnote: Style;
314 | footnoteObject: TextStyle;
315 | caption2Emphasized: Style;
316 | caption2EmphasizedObject: TextStyle;
317 | caption2: Style;
318 | caption2Object: TextStyle;
319 |
320 | largeTitleEmphasizedWhite: Style;
321 | largeTitleEmphasizedWhiteObject: TextStyle;
322 | title3EmphasizedWhite: Style;
323 | title3EmphasizedWhiteObject: TextStyle;
324 | title3White: Style;
325 | title3WhiteObject: TextStyle;
326 | bodyEmphasizedWhite: Style;
327 | bodyEmphasizedWhiteObject: TextStyle;
328 | bodyWhite: Style;
329 | bodyWhiteObject: TextStyle;
330 | subheadEmphasizedWhite: Style;
331 | subheadEmphasizedWhiteObject: TextStyle;
332 | subheadWhite: Style;
333 | subheadWhiteObject: TextStyle;
334 | subheadShortWhite: Style;
335 | subheadShortWhiteObject: TextStyle;
336 | calloutWhite: Style;
337 | calloutWhiteObject: TextStyle;
338 | footnoteEmphasizedWhite: Style;
339 | footnoteEmphasizedWhiteObject: TextStyle;
340 | footnoteWhite: Style;
341 | footnoteWhiteObject: TextStyle;
342 | caption2EmphasizedWhite: Style;
343 | caption2EmphasizedWhiteObject: TextStyle;
344 | caption2White: Style;
345 | caption2WhiteObject: TextStyle;
346 | };
347 |
348 | export var iOSUIKitDense: {
349 | largeTitleEmphasized: Style;
350 | largeTitleEmphasizedObject: TextStyle;
351 | title3Emphasized: Style;
352 | title3EmphasizedObject: TextStyle;
353 | title3: Style;
354 | title3Object: TextStyle;
355 | bodyEmphasized: Style;
356 | bodyEmphasizedObject: TextStyle;
357 | body: Style;
358 | bodyObject: TextStyle;
359 | subheadEmphasized: Style;
360 | subheadEmphasizedObject: TextStyle;
361 | subhead: Style;
362 | subheadObject: TextStyle;
363 | subheadShort: Style;
364 | subheadShortObject: TextStyle;
365 | callout: Style;
366 | calloutObject: TextStyle;
367 | footnoteEmphasized: Style;
368 | footnoteEmphasizedObject: TextStyle;
369 | footnote: Style;
370 | footnoteObject: TextStyle;
371 | caption2Emphasized: Style;
372 | caption2EmphasizedObject: TextStyle;
373 | caption2: Style;
374 | caption2Object: TextStyle;
375 |
376 | largeTitleEmphasizedWhite: Style;
377 | largeTitleEmphasizedWhiteObject: TextStyle;
378 | title3EmphasizedWhite: Style;
379 | title3EmphasizedWhiteObject: TextStyle;
380 | title3White: Style;
381 | title3WhiteObject: TextStyle;
382 | bodyEmphasizedWhite: Style;
383 | bodyEmphasizedWhiteObject: TextStyle;
384 | bodyWhite: Style;
385 | bodyWhiteObject: TextStyle;
386 | subheadEmphasizedWhite: Style;
387 | subheadEmphasizedWhiteObject: TextStyle;
388 | subheadWhite: Style;
389 | subheadWhiteObject: TextStyle;
390 | subheadShortWhite: Style;
391 | subheadShortWhiteObject: TextStyle;
392 | calloutWhite: Style;
393 | calloutWhiteObject: TextStyle;
394 | footnoteEmphasizedWhite: Style;
395 | footnoteEmphasizedWhiteObject: TextStyle;
396 | footnoteWhite: Style;
397 | footnoteWhiteObject: TextStyle;
398 | caption2EmphasizedWhite: Style;
399 | caption2EmphasizedWhiteObject: TextStyle;
400 | caption2White: Style;
401 | caption2WhiteObject: TextStyle;
402 | };
403 |
404 | export var iOSUIKitTall: {
405 | largeTitleEmphasized: Style;
406 | largeTitleEmphasizedObject: TextStyle;
407 | title3Emphasized: Style;
408 | title3EmphasizedObject: TextStyle;
409 | title3: Style;
410 | title3Object: TextStyle;
411 | bodyEmphasized: Style;
412 | bodyEmphasizedObject: TextStyle;
413 | body: Style;
414 | bodyObject: TextStyle;
415 | subheadEmphasized: Style;
416 | subheadEmphasizedObject: TextStyle;
417 | subhead: Style;
418 | subheadObject: TextStyle;
419 | subheadShort: Style;
420 | subheadShortObject: TextStyle;
421 | callout: Style;
422 | calloutObject: TextStyle;
423 | footnoteEmphasized: Style;
424 | footnoteEmphasizedObject: TextStyle;
425 | footnote: Style;
426 | footnoteObject: TextStyle;
427 | caption2Emphasized: Style;
428 | caption2EmphasizedObject: TextStyle;
429 | caption2: Style;
430 | caption2Object: TextStyle;
431 |
432 | largeTitleEmphasizedWhite: Style;
433 | largeTitleEmphasizedWhiteObject: TextStyle;
434 | title3EmphasizedWhite: Style;
435 | title3EmphasizedWhiteObject: TextStyle;
436 | title3White: Style;
437 | title3WhiteObject: TextStyle;
438 | bodyEmphasizedWhite: Style;
439 | bodyEmphasizedWhiteObject: TextStyle;
440 | bodyWhite: Style;
441 | bodyWhiteObject: TextStyle;
442 | subheadEmphasizedWhite: Style;
443 | subheadEmphasizedWhiteObject: TextStyle;
444 | subheadWhite: Style;
445 | subheadWhiteObject: TextStyle;
446 | subheadShortWhite: Style;
447 | subheadShortWhiteObject: TextStyle;
448 | calloutWhite: Style;
449 | calloutWhiteObject: TextStyle;
450 | footnoteEmphasizedWhite: Style;
451 | footnoteEmphasizedWhiteObject: TextStyle;
452 | footnoteWhite: Style;
453 | footnoteWhiteObject: TextStyle;
454 | caption2EmphasizedWhite: Style;
455 | caption2EmphasizedWhiteObject: TextStyle;
456 | caption2White: Style;
457 | caption2WhiteObject: TextStyle;
458 | };
459 |
460 | export var systemWeights: {
461 | thin: TextStyle;
462 | light: TextStyle;
463 | regular: TextStyle;
464 | semibold: TextStyle;
465 | bold: TextStyle;
466 | };
467 |
468 | export var systemDenseWeights: {
469 | thin: TextStyle;
470 | light: TextStyle;
471 | regular: TextStyle;
472 | semibold: TextStyle;
473 | bold: TextStyle;
474 | };
475 |
476 | export var systemTallWeights: {
477 | thin: TextStyle;
478 | light: TextStyle;
479 | regular: TextStyle;
480 | semibold: TextStyle;
481 | bold: TextStyle;
482 | };
483 |
484 | export var notoCJKWeights: {
485 | regular: TextStyle;
486 | bold: TextStyle;
487 | };
488 |
489 | export var notoTallWeights: {
490 | regular: TextStyle;
491 | bold: TextStyle;
492 | };
493 |
494 | export var sanFranciscoWeights: {
495 | thin: TextStyle;
496 | ultraLight: TextStyle;
497 | light: TextStyle;
498 | regular: TextStyle;
499 | medium: TextStyle;
500 | semibold: TextStyle;
501 | bold: TextStyle;
502 | heavy: TextStyle;
503 | black: TextStyle;
504 | };
505 |
506 | export var robotoWeights: {
507 | thin: TextStyle;
508 | light: TextStyle;
509 | regular: TextStyle;
510 | medium: TextStyle;
511 | bold: TextStyle;
512 | condensed: TextStyle;
513 | condensedBold: TextStyle;
514 | };
515 |
516 | export var webWeights: {
517 | thin: TextStyle;
518 | ultraLight: TextStyle;
519 | light: TextStyle;
520 | regular: TextStyle;
521 | medium: TextStyle;
522 | semibold: TextStyle;
523 | bold: TextStyle;
524 | heavy: TextStyle;
525 | black: TextStyle;
526 | };
527 |
528 | export var iOSColors: {
529 | red: string;
530 | orange: string;
531 | yellow: string;
532 | green: string;
533 | tealBlue: string;
534 | blue: string;
535 | purple: string;
536 | pink: string;
537 |
538 | white: string;
539 | customGray: string;
540 | lightGray: string;
541 | lightGray2: string;
542 | midGray: string;
543 | gray: string;
544 | black: string;
545 | };
546 |
547 | export var materialColors: {
548 | blackPrimary: string;
549 | blackSecondary: string;
550 | blackTertiary: string;
551 | whitePrimary: string;
552 | whiteSecondary: string;
553 | whiteTertiary: string;
554 | };
555 |
556 | export function sanFranciscoSpacing(fontSize: number): number;
557 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | export { default as human } from "./collections/human";
2 | export { default as humanDense } from "./collections/humanDense";
3 | export { default as humanTall } from "./collections/humanTall";
4 | export { default as material } from "./collections/material";
5 | export { default as materialTall } from "./collections/materialTall";
6 | export { default as materialDense } from "./collections/materialDense";
7 | export { default as iOSUIKit } from "./collections/iOSUIKit";
8 | export { default as iOSUIKitDense } from "./collections/iOSUIKitDense";
9 | export { default as iOSUIKitTall } from "./collections/iOSUIKitTall";
10 |
11 | export { default as sanFranciscoWeights } from "./helpers/sanFranciscoWeights";
12 | export { default as robotoWeights } from "./helpers/robotoWeights";
13 | export { default as notoCJKWeights } from "./helpers/notoCJKWeights";
14 | export { default as notoTallWeights } from "./helpers/notoTallWeights";
15 | export { default as webWeights } from "./helpers/webWeights";
16 | export { default as systemWeights } from "./helpers/systemWeights";
17 | export { default as systemDenseWeights } from "./helpers/systemDenseWeights";
18 | export { default as systemTallWeights } from "./helpers/systemTallWeights";
19 | export { default as sanFranciscoSpacing } from "./helpers/sanFranciscoSpacing";
20 | export { default as iOSColors } from "./helpers/iOSColors";
21 | export { default as materialColors } from "./helpers/materialColors";
22 |
--------------------------------------------------------------------------------
/src/internal/CombinedStyleSheet.js:
--------------------------------------------------------------------------------
1 | import { StyleSheet } from "react-native";
2 | import suffixProperties from "./suffixProperties";
3 |
4 | /**
5 | * Very frequently you may want to use a style with some tweaks.
6 | *
7 | * This class generates properties with the Object suffix, that can be
8 | * used to create a customized entry in a `StyleSheet`, e.g.:
9 | *
10 | * const styles = StyleSheet.create({
11 | * wrapper: {
12 | * ...material.title1Object,
13 | * color: 'palevioletred',
14 | * },
15 | * });
16 | *
17 | * Pattern taken from React Native's StyleSheet
18 | * @see https://github.com/facebook/react-native/blob/master/Libraries/StyleSheet/StyleSheet.js
19 | */
20 | const create = object => ({
21 | ...suffixProperties(object, "Object"),
22 | ...StyleSheet.create(object)
23 | });
24 |
25 | export default { create };
26 |
--------------------------------------------------------------------------------
/src/internal/suffixProperties.js:
--------------------------------------------------------------------------------
1 | const suffixProperties = (object, suffix) =>
2 | Object.keys(object).reduce(
3 | (acc, key) => ({ ...acc, [`${key}${suffix}`]: object[key] }),
4 | {}
5 | );
6 |
7 | export default suffixProperties;
8 |
--------------------------------------------------------------------------------