Browse Source

Update docs

* New statusBar options format
* Static events
Guy Carmeli 6 years ago
parent
commit
85d38d1386
2 changed files with 55 additions and 23 deletions
  1. 48
    18
      docs/docs/events.md
  2. 7
    5
      docs/docs/styling.md

+ 48
- 18
docs/docs/events.md View File

@@ -2,24 +2,40 @@
2 2
 
3 3
 ## onAppLaunched
4 4
 
5
-This event is called once the app is launched. Initialise the app with the layout you want. This creates the native layout hierarchy, loads the react components into the component by name, after which the app is ready for user interaction.
5
+Called once the app is launched. This event is used to set the Application's initial layout - after which the app is ready for user interaction.
6 6
 
7 7
 ```js
8
-Navigation.events().onAppLaunched(() => {
8
+Navigation.events().registerAppLaunchedListener(() => {
9 9
 
10 10
 });
11 11
 ```
12 12
 
13 13
 ## componentDidAppear
14
+Called each time this component appears on screen (attached to the view heirarchy)
14 15
 
15
-Listen globally to all components `componentDidAppear` events
16 16
 ```js
17
-Navigation.events().componentDidAppear((componentId, componentName) => {
17
+class MyComponent extends Component {
18
+  componentDidAppear() {
19
+    
20
+  }
21
+}
22
+```
23
+
24
+This event can be observed globally as well:
25
+
26
+```js
27
+Navigation.events().registerComponentDidAppearListener((componentId, componentName) => {
18 28
 
19 29
 });
20 30
 ```
31
+|       Parameter         | Description |
32
+|--------------------|:-----|
33
+**componentId**| Id of the appearing component
34
+**componentName**|Registered name used when registering the component with `Navigation.registerComponent()`
35
+
36
+## componentDidDisappear
37
+Called each time this component disappears from screen (detached from the view heirarchy)
21 38
 
22
-Listen for component
23 39
 ```js
24 40
 class MyComponent extends Component {
25 41
   componentDidAppear() {
@@ -28,34 +44,48 @@ class MyComponent extends Component {
28 44
 }
29 45
 ```
30 46
 
31
-## componentDidDisappear
47
+This event can be observed globally as well:
32 48
 
33
-Listen globally to all components `componentDidDisappear` events
34 49
 ```js
35
-Navigation.events().componentDidDisappear((componentId, componentName) => {
50
+Navigation.events().registerComponentDidDisappearListener((componentId, componentName) => {
36 51
 
37 52
 });
38 53
 ```
54
+|       Parameter         | Description |
55
+|--------------------|:-----|
56
+**componentId**| Id of the disappearing component
57
+**componentName**|Registered name used when registering the component with `Navigation.registerComponent()`
58
+
59
+## registerCommandListener
60
+The `commandListener` is called whenever a *Navigation command* (i.e push, pop, showModal etc) is invoked.
39 61
 
40
-Listen for component
41 62
 ```js
42
-class MyComponent extends Component {
43
-  componentDidDisappear() {
44
-    
45
-  }
46
-}
63
+Navigation.events().registerCommandListener((name, params) => {
64
+
65
+});
47 66
 ```
67
+|       Parameter         | Description |
68
+|--------------------|:-----|
69
+|**name** | The name of the command that was invoked. For example `push`|
70
+|**params**|`commandId`: Each command is assigned a unique Id<br>`componentId`: Optional, the componentId passed to the command<br>`layout`: Optional, If the command invoked created a screen. Slim representation of the component and its options |
48 71
 
49
-## onNavigationButtonPressed
72
+## registerCommandCompletedListener
73
+Invoked when a command finishes executing in native. If the command contains animations, for example pushed screen animation,) the listener is invoked after the animation ends.
50 74
 
51
-Listen globally to all `onNavigationButtonPressed` events
52 75
 ```js
53
-Navigation.events().onNavigationButtonPressed((buttonId) => {
76
+Navigation.events().registerCommandCompletedListener((commandId, completionTime, params) => {
54 77
 
55 78
 });
56 79
 ```
57 80
 
58
-Listen in component
81
+|       Parameter         | Description |
82
+|--------------------|:-----|
83
+|**commandId** | Id of the completed command|
84
+|**completionTime**|Timestamp when the comand, and consecutive animations, completed.|
85
+
86
+
87
+## onNavigationButtonPressed
88
+Called when a TopBar button is pressed.
59 89
 ```js
60 90
 class MyComponent extends Component {
61 91
   onNavigationButtonPressed(buttonId) {

+ 7
- 5
docs/docs/styling.md View File

@@ -56,11 +56,13 @@ Navigation.mergeOptions(this.props.componentId, {
56 56
 
57 57
 ```js
58 58
 {
59
-  statusBarHidden: false, // iOS only
60
-  statusBarBackgroundColor: 'red', // Android only
61
-  statusBarHideWithTopBar: false, // iOS only
62
-  statusBarBlur: true, // iOS only
63
-  statusBarStyle: 'light', // iOS only
59
+  statusBar: {
60
+    backgroundColor: 'red', // Android only
61
+    hidden: false, // iOS only
62
+    hideWithTopBar: false, // iOS only
63
+    blur: true, // iOS only
64
+    style: 'light',
65
+  },
64 66
   screenBackgroundColor: 'white',
65 67
   orientation: ['portrait', 'landscape'],
66 68
   popGesture: true,