@nx/expo 19.5.7 → 19.6.0-beta.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (48) hide show
  1. package/generators.json +5 -0
  2. package/package.json +9 -9
  3. package/src/generators/application/application.js +1 -1
  4. package/src/generators/application/files/nx-welcome/claimed/src/app/App.tsx.template +737 -0
  5. package/src/generators/application/files/{src → nx-welcome/not-configured/src}/app/App.tsx.template +106 -114
  6. package/src/generators/application/files/nx-welcome/unclaimed/src/app/App.tsx.template +737 -0
  7. package/src/generators/application/lib/add-e2e.js +35 -5
  8. package/src/generators/application/lib/add-project.js +2 -2
  9. package/src/generators/application/lib/create-application-files.d.ts +1 -1
  10. package/src/generators/application/lib/create-application-files.js +13 -2
  11. package/src/generators/application/schema.d.ts +1 -0
  12. package/src/generators/convert-to-inferred/convert-to-inferred.d.ts +7 -0
  13. package/src/generators/convert-to-inferred/convert-to-inferred.js +117 -0
  14. package/src/generators/convert-to-inferred/lib/post-target-transformer.d.ts +6 -0
  15. package/src/generators/convert-to-inferred/lib/post-target-transformer.js +34 -0
  16. package/src/generators/convert-to-inferred/lib/process-build-options.d.ts +3 -0
  17. package/src/generators/convert-to-inferred/lib/process-build-options.js +20 -0
  18. package/src/generators/convert-to-inferred/lib/process-export-options.d.ts +3 -0
  19. package/src/generators/convert-to-inferred/lib/process-export-options.js +25 -0
  20. package/src/generators/convert-to-inferred/lib/process-generic-options.d.ts +3 -0
  21. package/src/generators/convert-to-inferred/lib/process-generic-options.js +21 -0
  22. package/src/generators/convert-to-inferred/lib/process-install-options.d.ts +3 -0
  23. package/src/generators/convert-to-inferred/lib/process-install-options.js +17 -0
  24. package/src/generators/convert-to-inferred/lib/process-prebuild-options.d.ts +3 -0
  25. package/src/generators/convert-to-inferred/lib/process-prebuild-options.js +13 -0
  26. package/src/generators/convert-to-inferred/lib/process-run-options.d.ts +3 -0
  27. package/src/generators/convert-to-inferred/lib/process-run-options.js +36 -0
  28. package/src/generators/convert-to-inferred/lib/process-serve-options.d.ts +3 -0
  29. package/src/generators/convert-to-inferred/lib/process-serve-options.js +14 -0
  30. package/src/generators/convert-to-inferred/lib/process-start-options.d.ts +3 -0
  31. package/src/generators/convert-to-inferred/lib/process-start-options.js +14 -0
  32. package/src/generators/convert-to-inferred/lib/process-submit-options.d.ts +3 -0
  33. package/src/generators/convert-to-inferred/lib/process-submit-options.js +20 -0
  34. package/src/generators/convert-to-inferred/schema.json +19 -0
  35. package/src/generators/library/library.js +2 -2
  36. /package/src/generators/application/files/{.babelrc.js.template → base/.babelrc.js.template} +0 -0
  37. /package/src/generators/application/files/{app.json.template → base/app.json.template} +0 -0
  38. /package/src/generators/application/files/{assets → base/assets}/adaptive-icon.png +0 -0
  39. /package/src/generators/application/files/{assets → base/assets}/favicon.png +0 -0
  40. /package/src/generators/application/files/{assets → base/assets}/icon.png +0 -0
  41. /package/src/generators/application/files/{assets → base/assets}/splash.png +0 -0
  42. /package/src/generators/application/files/{eas.json.template → base/eas.json.template} +0 -0
  43. /package/src/generators/application/files/{index.js.template → base/index.js.template} +0 -0
  44. /package/src/generators/application/files/{metro.config.js.template → base/metro.config.js.template} +0 -0
  45. /package/src/generators/application/files/{package.json.template → base/package.json.template} +0 -0
  46. /package/src/generators/application/files/{src → base/src}/app/App.spec.tsx.template +0 -0
  47. /package/src/generators/application/files/{tsconfig.app.json.template → base/tsconfig.app.json.template} +0 -0
  48. /package/src/generators/application/files/{tsconfig.json.template → base/tsconfig.json.template} +0 -0
package/src/generators/application/files/nx-welcome/unclaimed/src/app/App.tsx.template ADDED
@@ -0,0 +1,737 @@
1
+ /* eslint-disable jsx-a11y/accessible-emoji */
2
+ import React, { useRef, useState } from 'react';
3
+ import {
4
+ SafeAreaView,
5
+ StyleSheet,
6
+ ScrollView,
7
+ View,
8
+ Text,
9
+ StatusBar,
10
+ TouchableOpacity,
11
+ Linking,
12
+ } from 'react-native';
13
+ import Svg, { G, Path } from 'react-native-svg';
14
+
15
+ export const App = () => {
16
+ const [whatsNextYCoord, setWhatsNextYCoord] = useState<number>(0);
17
+ const scrollViewRef = useRef<null | ScrollView>(null);
18
+
19
+ return (
20
+ <>
21
+ <StatusBar barStyle="dark-content" />
22
+ <SafeAreaView
23
+ style={{
24
+ flex: 1,
25
+ }}
26
+ >
27
+ <ScrollView
28
+ ref={(ref) => {
29
+ scrollViewRef.current = ref;
30
+ }}
31
+ contentInsetAdjustmentBehavior="automatic"
32
+ style={styles.scrollView}
33
+ >
34
+ <View style={styles.section}>
35
+ <Text style={styles.textLg}>Hello there,</Text>
36
+ <Text
37
+ style={[styles.textXL, styles.appTitleText]}
38
+ testID="heading"
39
+ role="heading"
40
+ >
41
+ Welcome <%= displayName %> 👋
42
+ </Text>
43
+ </View>
44
+ <View style={styles.section}>
45
+ <View style={styles.hero}>
46
+ <View style={styles.heroTitle}>
47
+ <Svg
48
+ width={32}
49
+ height={32}
50
+ stroke="hsla(162, 47%, 50%, 1)"
51
+ fill="none"
52
+ viewBox="0 0 24 24"
53
+ >
54
+ <Path
55
+ strokeLinecap="round"
56
+ strokeLinejoin="round"
57
+ strokeWidth="2"
58
+ d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"
59
+ />
60
+ </Svg>
61
+ <Text style={[styles.textLg, styles.heroTitleText]}>
62
+ You're up and running
63
+ </Text>
64
+ </View>
65
+ <TouchableOpacity
66
+ style={styles.whatsNextButton}
67
+ onPress={() => {
68
+ scrollViewRef.current?.scrollTo({
69
+ x: 0,
70
+ y: whatsNextYCoord,
71
+ });
72
+ }}
73
+ >
74
+ <Text style={[styles.textMd, styles.textCenter]}>
75
+ What's next?
76
+ </Text>
77
+ </TouchableOpacity>
78
+ </View>
79
+ </View>
80
+ <View style={styles.section}>
81
+ <View style={[styles.shadowBox]}>
82
+ <Text style={[styles.marginBottomMd, styles.textLg]}>
83
+ Learning materials
84
+ </Text>
85
+ <TouchableOpacity
86
+ style={[styles.listItem, styles.learning]}
87
+ onPress={() =>
88
+ Linking.openURL(
89
+ 'https://nx.dev/getting-started/intro?utm_source=nx-project'
90
+ )
91
+ }
92
+ >
93
+ <Svg
94
+ width={24}
95
+ height={24}
96
+ stroke="#000000"
97
+ fill="none"
98
+ viewBox="0 0 24 24"
99
+ >
100
+ <Path
101
+ strokeLinecap="round"
102
+ strokeLinejoin="round"
103
+ strokeWidth="2"
104
+ d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"
105
+ />
106
+ </Svg>
107
+ <View style={styles.listItemTextContainer}>
108
+ <Text style={[styles.textMd]}>Documentation</Text>
109
+ <Text style={[styles.text2XS, styles.textSubtle]}>
110
+ Everything is in there
111
+ </Text>
112
+ </View>
113
+ <Svg
114
+ width={18}
115
+ height={18}
116
+ stroke="#000000"
117
+ fill="none"
118
+ viewBox="0 0 24 24"
119
+ >
120
+ <Path
121
+ strokeLinecap="round"
122
+ strokeLinejoin="round"
123
+ strokeWidth="2"
124
+ d="M9 5l7 7-7 7"
125
+ />
126
+ </Svg>
127
+ </TouchableOpacity>
128
+ <TouchableOpacity
129
+ style={[styles.listItem, styles.learning]}
130
+ onPress={() =>
131
+ Linking.openURL('https://nx.dev/blog/?utm_source=nx-project')
132
+ }
133
+ >
134
+ <Svg
135
+ width={24}
136
+ height={24}
137
+ stroke="#000000"
138
+ fill="none"
139
+ viewBox="0 0 24 24"
140
+ >
141
+ <Path
142
+ strokeLinecap="round"
143
+ strokeLinejoin="round"
144
+ strokeWidth="2"
145
+ d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"
146
+ />
147
+ </Svg>
148
+ <View style={styles.listItemTextContainer}>
149
+ <Text style={[styles.textMd]}>Blog</Text>
150
+ <Text style={[styles.text2XS, styles.textSubtle]}>
151
+ Changelog, features & events
152
+ </Text>
153
+ </View>
154
+ <Svg
155
+ width={18}
156
+ height={18}
157
+ stroke="#000000"
158
+ fill="none"
159
+ viewBox="0 0 24 24"
160
+ >
161
+ <Path
162
+ strokeLinecap="round"
163
+ strokeLinejoin="round"
164
+ strokeWidth="2"
165
+ d="M9 5l7 7-7 7"
166
+ />
167
+ </Svg>
168
+ </TouchableOpacity>
169
+ <TouchableOpacity
170
+ style={[styles.listItem, styles.learning]}
171
+ onPress={() =>
172
+ Linking.openURL(
173
+ 'https://www.youtube.com/@NxDevtools/videos?utm_source=nx-project'
174
+ )
175
+ }
176
+ >
177
+ <Svg width={24} height={24} fill="#000000" viewBox="0 0 24 24">
178
+ <Path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" />
179
+ </Svg>
180
+ <View style={styles.listItemTextContainer}>
181
+ <Text style={[styles.textMd]}>Youtube channel</Text>
182
+ <Text style={[styles.text2XS, styles.textSubtle]}>
183
+ Nx Show, talks & tutorials
184
+ </Text>
185
+ </View>
186
+ <Svg
187
+ width={18}
188
+ height={18}
189
+ stroke="#000000"
190
+ fill="none"
191
+ viewBox="0 0 24 24"
192
+ >
193
+ <Path
194
+ strokeLinecap="round"
195
+ strokeLinejoin="round"
196
+ strokeWidth="2"
197
+ d="M9 5l7 7-7 7"
198
+ />
199
+ </Svg>
200
+ </TouchableOpacity>
201
+ <TouchableOpacity
202
+ style={[styles.listItem, styles.learning]}
203
+ onPress={() =>
204
+ Linking.openURL(
205
+ 'https://nx.dev/nx-api/expo/documents/overview'
206
+ )
207
+ }
208
+ >
209
+ <Svg
210
+ width={24}
211
+ height={24}
212
+ stroke="#000000"
213
+ fill="none"
214
+ viewBox="0 0 24 24"
215
+ >
216
+ <Path
217
+ strokeLinecap="round"
218
+ strokeLinejoin="round"
219
+ strokeWidth="2"
220
+ d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122"
221
+ />
222
+ </Svg>
223
+ <View style={styles.listItemTextContainer}>
224
+ <Text style={[styles.textMd]}>Interactive tutorials</Text>
225
+ <Text style={[styles.text2XS, styles.textSubtle]}>
226
+ Create an app, step by step
227
+ </Text>
228
+ </View>
229
+ <Svg
230
+ width={18}
231
+ height={18}
232
+ stroke="#000000"
233
+ fill="none"
234
+ viewBox="0 0 24 24"
235
+ >
236
+ <Path
237
+ strokeLinecap="round"
238
+ strokeLinejoin="round"
239
+ strokeWidth="2"
240
+ d="M9 5l7 7-7 7"
241
+ ></Path>
242
+ </Svg>
243
+ </TouchableOpacity>
244
+ </View>
245
+ </View>
246
+ <View style={styles.section}>
247
+ <TouchableOpacity
248
+ onPress={() =>
249
+ Linking.openURL('https://nx.dev/nx-cloud?utm_source=nx-project')
250
+ }
251
+ >
252
+ <View style={[styles.listItem, styles.shadowBox]}>
253
+ <Svg width={48} height={48} fill="#000000" viewBox="0 0 24 24">
254
+ <Path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
255
+ </Svg>
256
+ <View style={styles.listItemTextContainer}>
257
+ <Text
258
+ style={[
259
+ styles.textMd,
260
+ styles.textBold,
261
+ styles.marginBottomSm,
262
+ ]}
263
+ >
264
+ Nx is open source
265
+ </Text>
266
+ <Text style={[styles.textXS, styles.textLight]}>
267
+ Love Nx? Give us a star!
268
+ </Text>
269
+ </View>
270
+ </View>
271
+ </TouchableOpacity>
272
+ </View>
273
+ <View style={[styles.section, styles.shadowBox]}>
274
+ <TouchableOpacity
275
+ onPress={() =>
276
+ Linking.openURL(
277
+ 'https://marketplace.visualstudio.com/items?itemName=nrwl.angular-console&utm_source=nx-project'
278
+ )
279
+ }
280
+ >
281
+ <View style={[styles.listItem, styles.learning]}>
282
+ <Svg
283
+ width={48}
284
+ height={48}
285
+ fill="rgba(0, 122, 204, 1)"
286
+ viewBox="0 0 24 24"
287
+ >
288
+ <Path d="M23.15 2.587L18.21.21a1.494 1.494 0 0 0-1.705.29l-9.46 8.63-4.12-3.128a.999.999 0 0 0-1.276.057L.327 7.261A1 1 0 0 0 .326 8.74L3.899 12 .326 15.26a1 1 0 0 0 .001 1.479L1.65 17.94a.999.999 0 0 0 1.276.057l4.12-3.128 9.46 8.63a1.492 1.492 0 0 0 1.704.29l4.942-2.377A1.5 1.5 0 0 0 24 20.06V3.939a1.5 1.5 0 0 0-.85-1.352zm-5.146 14.861L10.826 12l7.178-5.448v10.896z" />
289
+ </Svg>
290
+ <View style={styles.listItemTextContainer}>
291
+ <Text
292
+ style={[
293
+ styles.textMd,
294
+ styles.textBold,
295
+ styles.marginBottomSm,
296
+ ]}
297
+ >
298
+ Install Nx Console for VSCode
299
+ </Text>
300
+ <Text style={[styles.textXS, styles.textLight]}>
301
+ The official VSCode extension for Nx.
302
+ </Text>
303
+ </View>
304
+ </View>
305
+ </TouchableOpacity>
306
+ </View>
307
+
308
+ <View style={[styles.section, styles.shadowBox]}>
309
+ <TouchableOpacity
310
+ onPress={() =>
311
+ Linking.openURL(
312
+ 'https://plugins.jetbrains.com/plugin/21060-nx-console'
313
+ )
314
+ }
315
+ >
316
+ <View style={[styles.listItem, styles.learning]}>
317
+ <Svg width={48} height={48} viewBox="20 20 60 60">
318
+ <Path d="m22.5 22.5h60v60h-60z" />
319
+ <G fill="#fff">
320
+ <Path d="m29.03 71.25h22.5v3.75h-22.5z" />
321
+ <Path d="m28.09 38 1.67-1.58a1.88 1.88 0 0 0 1.47.87c.64 0 1.06-.44 1.06-1.31v-5.98h2.58v6a3.48 3.48 0 0 1 -.87 2.6 3.56 3.56 0 0 1 -2.57.95 3.84 3.84 0 0 1 -3.34-1.55z" />
322
+ <Path d="m36 30h7.53v2.19h-5v1.44h4.49v2h-4.42v1.49h5v2.21h-7.6z" />
323
+ <Path d="m47.23 32.29h-2.8v-2.29h8.21v2.27h-2.81v7.1h-2.6z" />
324
+ <Path d="m29.13 43.08h4.42a3.53 3.53 0 0 1 2.55.83 2.09 2.09 0 0 1 .6 1.53 2.16 2.16 0 0 1 -1.44 2.09 2.27 2.27 0 0 1 1.86 2.29c0 1.61-1.31 2.59-3.55 2.59h-4.44zm5 2.89c0-.52-.42-.8-1.18-.8h-1.29v1.64h1.24c.79 0 1.25-.26 1.25-.81zm-.9 2.66h-1.57v1.73h1.62c.8 0 1.24-.31 1.24-.86 0-.5-.4-.87-1.27-.87z" />
325
+ <Path d="m38 43.08h4.1a4.19 4.19 0 0 1 3 1 2.93 2.93 0 0 1 .9 2.19 3 3 0 0 1 -1.93 2.89l2.24 3.27h-3l-1.88-2.84h-.87v2.84h-2.56zm4 4.5c.87 0 1.39-.43 1.39-1.11 0-.75-.54-1.12-1.4-1.12h-1.44v2.26z" />
326
+ <Path d="m49.59 43h2.5l4 9.44h-2.79l-.67-1.69h-3.63l-.67 1.69h-2.71zm2.27 5.73-1-2.65-1.06 2.65z" />
327
+ <Path d="m56.46 43.05h2.6v9.37h-2.6z" />
328
+ <Path d="m60.06 43.05h2.42l3.37 5v-5h2.57v9.37h-2.26l-3.53-5.14v5.14h-2.57z" />
329
+ <Path d="m68.86 51 1.45-1.73a4.84 4.84 0 0 0 3 1.13c.71 0 1.08-.24 1.08-.65 0-.4-.31-.6-1.59-.91-2-.46-3.53-1-3.53-2.93 0-1.74 1.37-3 3.62-3a5.89 5.89 0 0 1 3.86 1.25l-1.26 1.84a4.63 4.63 0 0 0 -2.62-.92c-.63 0-.94.25-.94.6 0 .42.32.61 1.63.91 2.14.46 3.44 1.16 3.44 2.91 0 1.91-1.51 3-3.79 3a6.58 6.58 0 0 1 -4.35-1.5z" />
330
+ </G>
331
+ </Svg>
332
+ <View style={styles.listItemTextContainer}>
333
+ <Text
334
+ style={[
335
+ styles.textMd,
336
+ styles.textBold,
337
+ styles.marginBottomSm,
338
+ ]}
339
+ >
340
+ Install Nx Console for JetBrains
341
+ </Text>
342
+ <Text style={[styles.textXS, styles.textLight]}>
343
+ Available for WebStorm, Intellij IDEA Ultimate and more!
344
+ </Text>
345
+ </View>
346
+ </View>
347
+ </TouchableOpacity>
348
+ </View>
349
+ <View style={styles.section}>
350
+ <View style={styles.shadowBox}>
351
+ <View style={[styles.listItem, styles.learning]}>
352
+ <Svg
353
+ width={48}
354
+ height={48}
355
+ role="img"
356
+ stroke="currentColor"
357
+ fill="transparent"
358
+ viewBox="0 0 24 24"
359
+ >
360
+ <Path
361
+ strokeWidth="2"
362
+ d="M23 3.75V6.5c-3.036 0-5.5 2.464-5.5 5.5s-2.464 5.5-5.5 5.5-5.5 2.464-5.5 5.5H3.75C2.232 23 1 21.768 1 20.25V3.75C1 2.232 2.232 1 3.75 1h16.5C21.768 1 23 2.232 23 3.75Z"
363
+ />
364
+ <Path
365
+ strokeWidth="2"
366
+ d="M23 6v14.1667C23 21.7307 21.7307 23 20.1667 23H6c0-3.128 2.53867-5.6667 5.6667-5.6667 3.128 0 5.6666-2.5386 5.6666-5.6666C17.3333 8.53867 19.872 6 23 6Z"
367
+ />
368
+ </Svg>
369
+ <View style={styles.listItemTextContainer}>
370
+ <Text
371
+ style={[
372
+ styles.textMd,
373
+ styles.textBold,
374
+ styles.marginBottomSm,
375
+ ]}
376
+ >
377
+ Nx Cloud
378
+ </Text>
379
+ <Text style={[styles.textSm, styles.textLight]}>
380
+ Enable faster CI & better DX
381
+ </Text>
382
+ </View>
383
+ </View>
384
+ <View style={styles.listItemTextContainer}>
385
+ <Text style={[styles.textXS, styles.textLight]}>
386
+ Your Nx Cloud remote cache setup is almost complete.
387
+ </Text>
388
+ </View>
389
+ <TouchableOpacity
390
+ style={styles.connectToCloudButton}
391
+ onPress={() => {
392
+ Linking.openURL(
393
+ '<%= connectCloudUrl %>'
394
+ )
395
+ }}
396
+ >
397
+ <Text style={[styles.textMd, styles.connectToCloudButtonText, styles.textCenter]}>
398
+ Click here to finish
399
+ </Text>
400
+ </TouchableOpacity>
401
+ </View>
402
+ </View>
403
+
404
+ <View
405
+ style={styles.section}
406
+ onLayout={(event) => {
407
+ const layout = event.nativeEvent.layout;
408
+ setWhatsNextYCoord(layout.y);
409
+ }}
410
+ >
411
+ <View style={styles.shadowBox}>
412
+ <Text style={[styles.textLg, styles.marginBottomMd]}>
413
+ Next steps
414
+ </Text>
415
+ <Text
416
+ style={[styles.textSm, styles.textLight, styles.marginBottomMd]}
417
+ >
418
+ Here are some things you can do with Nx:
419
+ </Text>
420
+ <View style={styles.listItem}>
421
+ <Svg
422
+ width={24}
423
+ height={24}
424
+ stroke="#000000"
425
+ fill="none"
426
+ viewBox="0 0 24 24"
427
+ >
428
+ <Path
429
+ strokeLinecap="round"
430
+ strokeLinejoin="round"
431
+ strokeWidth="2"
432
+ d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
433
+ />
434
+ </Svg>
435
+ <View style={styles.listItemTextContainer}>
436
+ <Text style={styles.textSm}>
437
+ Build, test and lint your app
438
+ </Text>
439
+ </View>
440
+ </View>
441
+ <View style={styles.codeBlock}>
442
+ <Text style={[styles.textXS, styles.monospace, styles.comment]}>
443
+ # Build
444
+ </Text>
445
+ <Text
446
+ style={[
447
+ styles.textXS,
448
+ styles.monospace,
449
+ styles.marginBottomMd,
450
+ ]}
451
+ >
452
+ nx build <%= displayName %>
453
+ </Text>
454
+ <Text style={[styles.textXS, styles.monospace, styles.comment]}>
455
+ # Test
456
+ </Text>
457
+ <Text
458
+ style={[
459
+ styles.textXS,
460
+ styles.monospace,
461
+ styles.marginBottomMd,
462
+ ]}
463
+ >
464
+ nx test <%= displayName %>
465
+ </Text>
466
+ <Text style={[styles.textXS, styles.monospace, styles.comment]}>
467
+ # Lint
468
+ </Text>
469
+ <Text style={[styles.textXS, styles.monospace]}>
470
+ nx lint <%= displayName %>
471
+ </Text>
472
+ <Text style={[styles.textXS, styles.monospace, styles.comment]}>
473
+ # Run them together!
474
+ </Text>
475
+ <Text
476
+ style={[
477
+ styles.textXS,
478
+ styles.monospace,
479
+ styles.marginBottomMd,
480
+ ]}
481
+ >
482
+ nx run-many -p <%= displayName %> -t build test lint
483
+ </Text>
484
+ </View>
485
+
486
+ <View style={styles.listItem}>
487
+ <Svg
488
+ width={24}
489
+ height={24}
490
+ stroke="#000000"
491
+ fill="none"
492
+ viewBox="0 0 24 24"
493
+ >
494
+ <Path
495
+ strokeLinecap="round"
496
+ strokeLinejoin="round"
497
+ strokeWidth="2"
498
+ d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
499
+ />
500
+ </Svg>
501
+ <View style={styles.listItemTextContainer}>
502
+ <Text style={styles.textSm}>View project details</Text>
503
+ </View>
504
+ </View>
505
+ <View style={[styles.codeBlock, styles.marginBottomLg]}>
506
+ <Text style={[styles.textXS, styles.monospace]}>
507
+ nx show project <%= displayName %>
508
+ </Text>
509
+ </View>
510
+ <View style={styles.listItem}>
511
+ <Svg
512
+ width={24}
513
+ height={24}
514
+ stroke="#000000"
515
+ fill="none"
516
+ viewBox="0 0 24 24"
517
+ >
518
+ <Path
519
+ strokeLinecap="round"
520
+ strokeLinejoin="round"
521
+ strokeWidth="2"
522
+ d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
523
+ />
524
+ </Svg>
525
+ <View style={styles.listItemTextContainer}>
526
+ <Text style={styles.textSm}>
527
+ View interactive project graph
528
+ </Text>
529
+ </View>
530
+ </View>
531
+ <View style={[styles.codeBlock, styles.marginBottomLg]}>
532
+ <Text style={[styles.textXS, styles.monospace]}>nx graph</Text>
533
+ </View>
534
+ <View style={styles.listItem}>
535
+ <Svg
536
+ width={24}
537
+ height={24}
538
+ stroke="#000000"
539
+ fill="none"
540
+ viewBox="0 0 24 24"
541
+ >
542
+ <Path
543
+ strokeLinecap="round"
544
+ strokeLinejoin="round"
545
+ strokeWidth="2"
546
+ d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
547
+ />
548
+ </Svg>
549
+ <View style={styles.listItemTextContainer}>
550
+ <Text style={styles.textSm}>Add UI library</Text>
551
+ </View>
552
+ </View>
553
+ <View style={[styles.codeBlock, styles.marginBottomLg]}>
554
+ <Text style={[styles.textXS, styles.monospace, styles.comment]}>
555
+ # Generate UI lib
556
+ </Text>
557
+ <Text
558
+ style={[
559
+ styles.textXS,
560
+ styles.monospace,
561
+ styles.marginBottomMd,
562
+ ]}
563
+ >
564
+ nx g @nx/react-native:lib ui
565
+ </Text>
566
+ <Text style={[styles.textXS, styles.monospace, styles.comment]}>
567
+ # Add a component
568
+ </Text>
569
+ <Text style={[styles.textXS, styles.monospace]}>nx g \</Text>
570
+ <Text style={[styles.textXS, styles.monospace]}>
571
+ @nx/react-native:component \
572
+ </Text>
573
+ <Text style={[styles.textXS, styles.monospace]}>
574
+ ui/src/lib/button
575
+ </Text>
576
+ </View>
577
+ </View>
578
+ <View style={[styles.listItem, styles.love]}>
579
+ <Text style={styles.textSubtle}>Carefully crafted with </Text>
580
+ <Svg
581
+ width={24}
582
+ height={24}
583
+ fill="rgba(252, 165, 165, 1)"
584
+ stroke="none"
585
+ viewBox="0 0 24 24"
586
+ >
587
+ <Path
588
+ strokeLinecap="round"
589
+ strokeLinejoin="round"
590
+ strokeWidth="2"
591
+ d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
592
+ />
593
+ </Svg>
594
+ </View>
595
+ </View>
596
+ </ScrollView>
597
+ </SafeAreaView>
598
+ </>
599
+ );
600
+ };
601
+ const styles = StyleSheet.create({
602
+ scrollView: {
603
+ backgroundColor: '#ffffff',
604
+ },
605
+ codeBlock: {
606
+ backgroundColor: 'rgba(55, 65, 81, 1)',
607
+ marginVertical: 12,
608
+ padding: 12,
609
+ borderRadius: 4,
610
+ },
611
+ monospace: {
612
+ color: '#ffffff',
613
+ fontFamily: 'Courier New',
614
+ marginVertical: 4,
615
+ },
616
+ comment: {
617
+ color: '#cccccc',
618
+ },
619
+ marginBottomSm: {
620
+ marginBottom: 6,
621
+ },
622
+ marginBottomMd: {
623
+ marginBottom: 18,
624
+ },
625
+ marginBottomLg: {
626
+ marginBottom: 24,
627
+ },
628
+ textLight: {
629
+ fontWeight: '300',
630
+ },
631
+ textBold: {
632
+ fontWeight: '500',
633
+ },
634
+ textCenter: {
635
+ textAlign: 'center',
636
+ },
637
+ text2XS: {
638
+ fontSize: 12,
639
+ },
640
+ textXS: {
641
+ fontSize: 14,
642
+ },
643
+ textSm: {
644
+ fontSize: 16,
645
+ },
646
+ textMd: {
647
+ fontSize: 18,
648
+ },
649
+ textLg: {
650
+ fontSize: 24,
651
+ },
652
+ textXL: {
653
+ fontSize: 48,
654
+ },
655
+ textContainer: {
656
+ marginVertical: 12,
657
+ },
658
+ textSubtle: {
659
+ color: '#6b7280',
660
+ },
661
+ section: {
662
+ marginVertical: 12,
663
+ marginHorizontal: 12,
664
+ },
665
+ shadowBox: {
666
+ backgroundColor: 'white',
667
+ borderRadius: 24,
668
+ shadowColor: 'black',
669
+ shadowOpacity: 0.15,
670
+ shadowOffset: {
671
+ width: 1,
672
+ height: 4,
673
+ },
674
+ shadowRadius: 12,
675
+ padding: 24,
676
+ marginBottom: 24,
677
+ },
678
+ listItem: {
679
+ display: 'flex',
680
+ flexDirection: 'row',
681
+ alignItems: 'center',
682
+ },
683
+ listItemTextContainer: {
684
+ marginLeft: 12,
685
+ flex: 1,
686
+ },
687
+ appTitleText: {
688
+ paddingTop: 12,
689
+ fontWeight: '500',
690
+ },
691
+ hero: {
692
+ borderRadius: 12,
693
+ backgroundColor: '#143055',
694
+ padding: 36,
695
+ marginBottom: 24,
696
+ },
697
+ heroTitle: {
698
+ flex: 1,
699
+ flexDirection: 'row',
700
+ },
701
+ heroTitleText: {
702
+ color: '#ffffff',
703
+ marginLeft: 12,
704
+ },
705
+ heroText: {
706
+ color: '#ffffff',
707
+ marginVertical: 12,
708
+ },
709
+
710
+ connectToCloudButton: {
711
+ backgroundColor: 'rgba(20, 48, 85, 1)',
712
+ paddingVertical: 10,
713
+ borderRadius: 8,
714
+ marginTop: 16,
715
+ width: '50%',
716
+ },
717
+
718
+ connectToCloudButtonText: {
719
+ color: '#ffffff',
720
+ },
721
+ whatsNextButton: {
722
+ backgroundColor: '#ffffff',
723
+ paddingVertical: 16,
724
+ borderRadius: 8,
725
+ width: '50%',
726
+ marginTop: 24,
727
+ },
728
+ learning: {
729
+ marginVertical: 12,
730
+ },
731
+ love: {
732
+ marginTop: 12,
733
+ justifyContent: 'center',
734
+ },
735
+ });
736
+
737
+ export default App;