Skip to content

Commit 6878059

Browse files
jpgarciajpgarcia
committed
feat(hooks): rename createStack methods
1 parent 2b6ea18 commit 6878059

File tree

2 files changed

+69
-42
lines changed

2 files changed

+69
-42
lines changed

‎README.md

Lines changed: 62 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -42,12 +42,13 @@ In order to use this hook your screens must use the `<NavigationProvider>` to pa
4242
You can take advantage of the [withNavigationProvider](#withNavigationProvider) or you could also use the `<NavigationProvider>` manually.
4343

4444
```tsx
45+
import { Navigation } from 'react-native-navigation'
46+
import { ComponentIdContext } from 'react-native-navigation-hooks'
47+
4548
Navigation.registerComponent('MyScreenComponent', () => withNavigationProvider(MyScreenComponent))
4649

4750
// or
4851

49-
import { ComponentIdContext } from 'react-native-navigation-hooks'
50-
5152
Navigation.registerComponent(
5253
'MyScreenComponent',
5354
() => (props): ReactElement => {
@@ -100,7 +101,7 @@ const MyScreen = () => {
100101
}
101102
```
102103

103-
You can check the list of the supported methods and the arguments overload [here](./src/helpers/createNavigationHelpers.ts).
104+
You can check the list of the supported methods and the arguments overload [here](./src/helpers/createNavigationCommands.ts).
104105

105106
### `useNavigationComponentDidAppear`
106107

@@ -111,21 +112,21 @@ import { useNavigationComponentDidAppear } from 'react-native-navigation-hooks'
111112

112113
const ScreenComponent = ({ componentId }) => {
113114
// Listen events only for this screen when using withNavigation HOC or <NavigationProvider> (if neither of those are provided it will warn you at least you provide a `{ global: true}` option)
114-
useNavigationComponentDidAppear(e => {
115+
useNavigationComponentDidAppear((e) => {
115116
console.log(`${e.componentName} appeared`)
116117
})
117118

118119
// Listen events only for this screen by providing componentId as paramenter
119120
useNavigationComponentDidAppear(
120-
e => {
121+
(e) => {
121122
console.log(`${e.componentName} appeared`)
122123
},
123124
{ componentId }
124125
)
125126

126127
// Global event handler. You should probably never use this but just in case.
127128
useNavigationComponentDidAppear(
128-
e => {
129+
(e) => {
129130
console.log(`${e.componentName} appeared`)
130131
},
131132
{ global: true }
@@ -144,21 +145,21 @@ import { useNavigationComponentDidDisappear } from 'react-native-navigation-hook
144145

145146
const ScreenComponent = ({ componentId }) => {
146147
// Listen events only for this screen when using withNavigation HOC or <NavigationProvider> (if neither of those are provided it will warn you at least you provide a `{ global: true}` option)
147-
useNavigationComponentDidDisappear(e => {
148+
useNavigationComponentDidDisappear((e) => {
148149
console.log(`${e.componentName} appeared`)
149150
})
150151

151152
// Listen events only for this screen by providing componentId as paramenter
152153
useNavigationComponentDidDisappear(
153-
e => {
154+
(e) => {
154155
console.log(`${e.componentName} appeared`)
155156
},
156157
{ componentId }
157158
)
158159

159160
// Global event handler. You should probably never use this but just in case.
160161
useNavigationComponentDidDisappear(
161-
e => {
162+
(e) => {
162163
console.log(`${e.componentName} appeared`)
163164
},
164165
{ global: true }
@@ -221,21 +222,21 @@ import { useNavigationModalAttemptedToDismiss } from 'react-native-navigation-ho
221222

222223
const ScreenComponent = ({ componentId }) => {
223224
// Listen events only for this screen when using withNavigation HOC or <NavigationProvider> (if neither of those are provided it will warn you at least you provide a `{ global: true}` option)
224-
useNavigationModalAttemptedToDismiss(e => {
225+
useNavigationModalAttemptedToDismiss((e) => {
225226
console.log(`Modal attempted dismissed on componentId: ${e.componentId}`)
226227
})
227228

228229
// Listen events only for this screen by providing componentId as paramenter
229230
useNavigationModalAttemptedToDismiss(
230-
e => {
231+
(e) => {
231232
console.log(`Modal attempted dismissed on componentId: ${e.componentId}`)
232233
},
233234
{ componentId }
234235
)
235236

236237
// Global event handler. You should probably never use this but just in case.
237238
useNavigationModalAttemptedToDismiss(
238-
e => {
239+
(e) => {
239240
console.log(`Modal attempted dismissed on componentId: ${e.componentId}`)
240241
},
241242
{ global: true }
@@ -254,21 +255,21 @@ import { useNavigationModalDismiss } from 'react-native-navigation-hooks'
254255

255256
const ScreenComponent = ({ componentId }) => {
256257
// Listen events only for this screen when using withNavigation HOC or <NavigationProvider> (if neither of those are provided it will warn you at least you provide a `{ global: true}` option)
257-
useNavigationModalDismiss(e => {
258+
useNavigationModalDismiss((e) => {
258259
console.log(`Modals dismissed: ${e.modalsDismissed} on componentId: ${e.componentId}`)
259260
})
260261

261262
// Listen events only for this screen by providing componentId as paramenter
262263
useNavigationModalDismiss(
263-
e => {
264+
(e) => {
264265
console.log(`Modals dismissed: ${e.modalsDismissed} on componentId: ${e.componentId}`)
265266
},
266267
{ componentId }
267268
)
268269

269270
// Global event handler. You should probably never use this but just in case.
270271
useNavigationModalDismiss(
271-
e => {
272+
(e) => {
272273
console.log(`Modals dismissed: ${e.modalsDismissed} on componentId: ${e.componentId}`)
273274
},
274275
{ global: true }
@@ -287,21 +288,21 @@ import { useNavigationScreenPop } from 'react-native-navigation-hooks'
287288

288289
const ScreenComponent = ({ componentId }) => {
289290
// Listen events only for this screen when using withNavigation HOC or <NavigationProvider> (if neither of those are provided it will warn you at least you provide a `{ global: true}` option)
290-
useNavigationScreenPop(e => {
291+
useNavigationScreenPop((e) => {
291292
console.log(`Screen was popped on componentId: ${e.componentId}`)
292293
})
293294

294295
// Listen events only for this screen by providing componentId as paramenter
295296
useNavigationScreenPop(
296-
e => {
297+
(e) => {
297298
console.log(`Screen was popped on componentId: ${e.componentId}`)
298299
},
299300
{ componentId }
300301
)
301302

302303
// Global event handler. You should probably never use this but just in case.
303304
useNavigationScreenPop(
304-
e => {
305+
(e) => {
305306
console.log(`Screen was popped on componentId: ${e.componentId}`)
306307
},
307308
{ global: true }
@@ -320,7 +321,7 @@ import { useNavigationBottomTabSelect } from 'react-native-navigation-hooks'
320321

321322
const ScreenComponent = ({ componentId }) => {
322323
// Global listener
323-
useNavigationBottomTabSelect(e => {
324+
useNavigationBottomTabSelect((e) => {
324325
console.log(`Selected tab id ${e.selectedTabIndex}, unselected tab id ${e.unselectedTabIndex}`)
325326
})
326327

@@ -337,7 +338,7 @@ import { useNavigationBottomTabPress } from 'react-native-navigation-hooks'
337338

338339
const ScreenComponent = ({ componentId }) => {
339340
// Global listener
340-
useNavigationBottomTabPress(e => {
341+
useNavigationBottomTabPress((e) => {
341342
console.log(`Selected tab id ${e.tabIndex}`)
342343
})
343344

@@ -354,7 +355,7 @@ import { useNavigationBottomTabLongPress } from 'react-native-navigation-hooks'
354355

355356
const ScreenComponent = ({ componentId }) => {
356357
// Global listener
357-
useNavigationBottomTabLongPress(e => {
358+
useNavigationBottomTabLongPress((e) => {
358359
console.log(`Selected tab id ${e.selectedTabIndex}`)
359360
})
360361

@@ -371,29 +372,29 @@ import { useNavigationButtonPress } from 'react-native-navigation-hooks'
371372

372373
const ScreenComponent = ({ componentId }) => {
373374
// Listen events only for this screen and all buttons when using withNavigation HOC or <NavigationProvider> (if neither of those are provided it will warn you at least you provide a `{ global: true}` option)
374-
useNavigationButtonPress(e => {
375+
useNavigationButtonPress((e) => {
375376
console.log(`Pressed ${e.buttonId} on componentId: ${e.componentId}`)
376377
})
377378

378379
// Listen events only for this screen and all buttons by providing componentId as paramenter
379380
useNavigationButtonPress(
380-
e => {
381+
(e) => {
381382
console.log(`Pressed ${e.buttonId} on componentId: ${e.componentId}`)
382383
},
383384
{ componentId }
384385
)
385386

386387
// Global event handler. You should probably never use this but just in case.
387388
useNavigationButtonPress(
388-
e => {
389+
(e) => {
389390
console.log(`Pressed ${e.buttonId} on componentId: ${e.componentId}`)
390391
},
391392
{ global: true }
392393
)
393394

394395
// Listen events only for this screen and a specifi buttonc by providing componentId and button as options
395396
useNavigationButtonPress(
396-
e => {
397+
(e) => {
397398
console.log('Pressed profile button on this screen!')
398399
},
399400
{ componentId, buttonId: 'profileButton' }
@@ -412,21 +413,21 @@ import { useNavigationSearchBarUpdate } from 'react-native-navigation-hooks'
412413

413414
const ScreenComponent = ({ componentId }) => {
414415
// Listen events only for this screen when using withNavigation HOC or <NavigationProvider> (if neither of those are provided it will warn you at least you provide a `{ global: true}` option)
415-
useNavigationSearchBarUpdate(e => {
416+
useNavigationSearchBarUpdate((e) => {
416417
console.log(`Seach bar text changed to ${e.text}${e.focussed ? ' (focussed)' : ''} on this screen`)
417418
})
418419

419420
// Listen events only for this screen by providing componentId as paramenter
420421
useNavigationSearchBarUpdate(
421-
e => {
422+
(e) => {
422423
console.log(`Seach bar text changed to ${e.text}${e.focussed ? ' (focussed)' : ''} on this screen`)
423424
},
424425
{ componentId }
425426
)
426427

427428
// Global event handler. You should probably never use this but just in case.
428429
useNavigationSearchBarUpdate(
429-
e => {
430+
(e) => {
430431
console.log(
431432
`Seach bar text changed to ${e.text}${e.focussed ? ' (focussed)' : ''} on componentId: ${e.componentId}`
432433
)
@@ -447,21 +448,21 @@ import { useNavigationSearchBarCancelPress } from 'react-native-navigation-hooks
447448

448449
const ScreenComponent = ({ componentId }) => {
449450
// Listen events only for this screen when using withNavigation HOC or <NavigationProvider> (if neither of those are provided it will warn you at least you provide a `{ global: true}` option)
450-
useNavigationSearchBarCancelPress(e => {
451+
useNavigationSearchBarCancelPress((e) => {
451452
console.log('Seach bar cancel button pressed on this screen')
452453
})
453454

454455
// Listen events only for this screen by providing componentId as paramenter
455456
useNavigationSearchBarCancelPress(
456-
e => {
457+
(e) => {
457458
console.log('Seach bar cancel button pressed on this screen')
458459
},
459460
{ componentId }
460461
)
461462

462463
// Global event handler. You should probably never use this but just in case.
463464
useNavigationSearchBarCancelPress(
464-
e => {
465+
(e) => {
465466
console.log(`Seach bar cancel button pressed on componentName: ${e.componentName}`)
466467
},
467468
{ global: true }
@@ -480,21 +481,21 @@ import { useNavigationPreviewComplete } from 'react-native-navigation-hooks'
480481

481482
const ScreenComponent = ({ componentId }) => {
482483
// Listen events only for this screen when using withNavigation HOC or <NavigationProvider> (if neither of those are provided it will warn you at least you provide a `{ global: true}` option)
483-
useNavigationPreviewComplete(e => {
484+
useNavigationPreviewComplete((e) => {
484485
console.log(`Preview component ${e.previewComponentId} shown on this screen`)
485486
})
486487

487488
// Listen events only for this screen by providing componentId as paramenter
488489
useNavigationPreviewComplete(
489-
e => {
490+
(e) => {
490491
console.log(`Preview component ${e.previewComponentId} shown on this screen`)
491492
},
492493
{ componentId }
493494
)
494495

495496
// Global event handler. You should probably never use this but just in case.
496497
useNavigationPreviewComplete(
497-
e => {
498+
(e) => {
498499
console.log(`Preview component ${e.previewComponentId} shown on ${e.componentId}`)
499500
},
500501
{ global: true }
@@ -504,6 +505,32 @@ const ScreenComponent = ({ componentId }) => {
504505
}
505506
```
506507

508+
## Helpers
509+
510+
### `createLayout`
511+
512+
A helper function to generate a `Layout` object shape
513+
514+
```ts
515+
function createStack<P = {}>(name: string, passProps?: P, options?: Options): Layout
516+
```
517+
518+
Checkout the tests [here](./src/helpers/createLayout.test.ts)
519+
520+
### `createStack`
521+
522+
An overlodaded helper function to generate a `LayoutStack` object shape
523+
524+
```ts
525+
function createStack(layoutStackChildren: LayoutStackChildren, id?: string, options?: Options): LayoutStack
526+
function createStack(layoutStackChildrenArray: LayoutStackChildren[], id?: string, options?: Options): LayoutStack
527+
function createStack(name: string): LayoutStack
528+
function createStack<P = {}>(name: string, passProps?: P): LayoutStack
529+
function createStack<P = {}>(name: string, passProps?: P, options?: Options): LayoutStack
530+
```
531+
532+
Checkout the tests [here](./src/helpers/createStack.test.ts)
533+
507534
## Suggestions
508535

509536
### Memoize your handlers
@@ -515,7 +542,7 @@ import { useNavigationButtonPress } from 'react-native-navigation-hooks'
515542
516543
const ScreenComponent = ({ componentId }) => {
517544
const handler = useCallback(
518-
e => {
545+
(e) => {
519546
console.log(`Parameter: ${parameter}`)
520547
},
521548
[paramenter]

‎src/helpers/createStack.ts

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,12 @@ import createLayout from './createLayout'
55
* Creates navigation LayoutStack exposing multiple function types for the same function as a list of overloads.
66
* [more info](https://wix.github.io/react-native-navigation/api/layout-stack)
77
*/
8-
function createModalStack(layoutStackChildren: LayoutStackChildren, id?: string, options?: Options): LayoutStack
9-
function createModalStack(layoutStackChildrenArray: LayoutStackChildren[], id?: string, options?: Options): LayoutStack
10-
function createModalStack(name: string): LayoutStack
11-
function createModalStack<P = {}>(name: string, passProps?: P): LayoutStack
12-
function createModalStack<P = {}>(name: string, passProps?: P, options?: Options): LayoutStack
13-
function createModalStack<P = {}>(
8+
function createStack(layoutStackChildren: LayoutStackChildren, id?: string, options?: Options): LayoutStack
9+
function createStack(layoutStackChildrenArray: LayoutStackChildren[], id?: string, options?: Options): LayoutStack
10+
function createStack(name: string): LayoutStack
11+
function createStack<P = {}>(name: string, passProps?: P): LayoutStack
12+
function createStack<P = {}>(name: string, passProps?: P, options?: Options): LayoutStack
13+
function createStack<P = {}>(
1414
nameOrLayoutStackChildren: string | LayoutStackChildren | LayoutStackChildren[],
1515
passPropsOrId?: P | string,
1616
options?: Options
@@ -37,4 +37,4 @@ function createModalStack<P = {}>(
3737
return { id, children: layoutStackChildren, options: stackOptions }
3838
}
3939

40-
export default createModalStack
40+
export default createStack

0 commit comments

Comments
 (0)