Browse Source

added events doc

yogevbd 6 years ago
parent
commit
54dc81e05b
5 changed files with 81 additions and 80 deletions
  1. 65
    0
      docs/docs/events.md
  2. 1
    0
      docs/docs/layout-types.md
  3. 1
    26
      docs/docs/screen-api.md
  4. 1
    1
      docs/docs/styling.md
  5. 13
    53
      docs/docs/top-level-api.md

+ 65
- 0
docs/docs/events.md View File

1
+# Events
2
+
3
+## onAppLaunched
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.
6
+
7
+```js
8
+Navigation.events().onAppLaunched(() => {
9
+
10
+});
11
+```
12
+
13
+## componentDidAppear
14
+
15
+Listen globally to all components `componentDidAppear` events
16
+```js
17
+Navigation.events().componentDidAppear((componentId, componentName) => {
18
+
19
+});
20
+```
21
+
22
+Listen for component
23
+```js
24
+class MyComponent extends Component {
25
+  componentDidAppear() {
26
+    
27
+  }
28
+}
29
+```
30
+
31
+## componentDidDisappear
32
+
33
+Listen globally to all components `componentDidDisappear` events
34
+```js
35
+Navigation.events().componentDidDisappear((componentId, componentName) => {
36
+
37
+});
38
+```
39
+
40
+Listen for component
41
+```js
42
+class MyComponent extends Component {
43
+  componentDidDisappear() {
44
+    
45
+  }
46
+}
47
+```
48
+
49
+## onNavigationButtonPressed
50
+
51
+Listen globally to all `onNavigationButtonPressed` events
52
+```js
53
+Navigation.events().onNavigationButtonPressed((buttonId) => {
54
+
55
+});
56
+```
57
+
58
+Listen in component
59
+```js
60
+class MyComponent extends Component {
61
+  onNavigationButtonPressed(buttonId) {
62
+    
63
+  }
64
+}
65
+```

+ 1
- 0
docs/docs/layout-types.md View File

27
 
27
 
28
 ```js
28
 ```js
29
 const component = {
29
 const component = {
30
+  id: 'comopnent1', // Optional, Auto generated if empty
30
   name: 'Your registered component name',
31
   name: 'Your registered component name',
31
   options: {},
32
   options: {},
32
   passProps: {
33
   passProps: {

+ 1
- 26
docs/docs/screen-api.md View File

1
 # Screen API
1
 # Screen API
2
 
2
 
3
-This API is relevant when in a screen component context - it allows a screen to push other screens, pop screens, change its navigator style, etc. Access to this API is available through the `Navigation` module and expect to receive the current presented component id from screen `props.componentId`.\
3
+This API is relevant when in a screen component context - it allows a screen to push other screens, pop screens, change its navigator style, etc. Access to this API is available through the `Navigation` module and expect to receive the current presented component id from screen `props.componentId`.
4
 Component must initialize in stack in order to push another component.
4
 Component must initialize in stack in order to push another component.
5
 
5
 
6
 ## push(componentId, layout)
6
 ## push(componentId, layout)
105
 Navigation.dismissAllModals();
105
 Navigation.dismissAllModals();
106
 ```
106
 ```
107
 
107
 
108
-## showOverlay(layout = {})
109
-
110
-Show component as overlay.
111
-
112
-```js
113
-Navigation.showOverlay({
114
-  component: {
115
-    name: 'example.Overlay',
116
-    options: {
117
-      overlay: {
118
-        interceptTouchOutside: true
119
-      }
120
-    }
121
-  }
122
-});
123
-```
124
-
125
-## dismissOverlay(componentId)
126
-
127
-Dismiss overlay matching the overlay componentId.
128
-
129
-```js
130
-Navigation.dismissOverlay(this.props.componentId);
131
-```
132
-
133
 <!-- ## handleDeepLink(params = {})
108
 <!-- ## handleDeepLink(params = {})
134
 
109
 
135
 Trigger a deep link within the app. See [deep links](https://wix.github.io/react-native-navigation/#/deep-links) for more details about how screens can listen for deep link events.
110
 Trigger a deep link within the app. See [deep links](https://wix.github.io/react-native-navigation/#/deep-links) for more details about how screens can listen for deep link events.

+ 1
- 1
docs/docs/styling.md View File

30
   }
30
   }
31
 ```
31
 ```
32
 
32
 
33
-## Enabling persistent styling properties on iOS
33
+## Enabling persistent styling properties
34
 In v2 we added `setDefaultOptions` API for styles that should be applied on all components.
34
 In v2 we added `setDefaultOptions` API for styles that should be applied on all components.
35
 
35
 
36
 ```js
36
 ```js

+ 13
- 53
docs/docs/top-level-api.md View File

1
-# Top Level API Migration
1
+# Top Level API
2
 
2
 
3
 In order to make navigation API homogenous as much as possible, we provide setRoot function that receives layout of any kind.
3
 In order to make navigation API homogenous as much as possible, we provide setRoot function that receives layout of any kind.
4
 See [Layout types](layout-types)
4
 See [Layout types](layout-types)
47
 });
47
 });
48
 ```
48
 ```
49
 
49
 
50
-## showModal(layout = {})
50
+## showOverlay(layout = {})
51
 
51
 
52
-Show a screen as a modal.
52
+Show component as overlay.
53
 
53
 
54
 ```js
54
 ```js
55
-Navigation.showModal({
56
-  stack: {
57
-    children: [{
58
-      component: {
59
-        name: 'example.ModalScreen',
60
-        passProps: {
61
-          text: 'stack with one child'
62
-        },
63
-        options: {
64
-          topBar: {
65
-            title: {
66
-              text: 'Modal with stack'
67
-            }
68
-          }
69
-        }
55
+Navigation.showOverlay({
56
+  component: {
57
+    name: 'example.Overlay',
58
+    options: {
59
+      overlay: {
60
+        interceptTouchOutside: true
70
       }
61
       }
71
-    }]
62
+    }
72
   }
63
   }
73
 });
64
 });
74
 ```
65
 ```
75
 
66
 
76
-## dismissModal(componentId)
67
+## dismissOverlay(componentId)
77
 
68
 
78
-Dismiss the current modal.
69
+Dismiss overlay matching the overlay componentId.
79
 
70
 
80
 ```js
71
 ```js
81
-Navigation.dismissModal(this.props.componentId);
72
+Navigation.dismissOverlay(this.props.componentId);
82
 ```
73
 ```
83
 
74
 
84
-## dismissAllModals()
85
-
86
-Dismiss all the current modals at the same time.
87
-
88
-```js
89
-Navigation.dismissAllModals();
90
-```
91
-
92
-<!-- ## showLightBox(params = {}) - Use showOverlay
93
-
94
-Show a screen as a lightbox.
95
-
96
-```js
97
-Navigation.showLightBox({
98
-  screen: 'example.LightBoxScreen', // unique ID registered with Navigation.registerScreen
99
-  passProps: {}, // simple serializable object that will pass as props to the lightbox (optional)
100
-  style: {
101
-    backgroundBlur: 'dark', // 'dark' / 'light' / 'xlight' / 'none' - the type of blur on the background
102
-    backgroundColor: '#ff000080', // tint color for the background, you can specify alpha here (optional)
103
-    tapBackgroundToDismiss: true // dismisses LightBox on background taps (optional)
104
-  }
105
-});
106
-``` -->
107
-
108
-<!-- ## dismissLightBox(params = {})
109
-
110
-Dismiss the current lightbox.
111
-
112
-```js
113
-Navigation.dismissLightBox();
114
-``` -->
115
 
75
 
116
 <!-- ## handleDeepLink(params = {})
76
 <!-- ## handleDeepLink(params = {})
117
 
77